flot.js ajax,jquery.flot.js简单绘制折线图用法示例

本文实例讲述了jquery.flot.js简单绘制折线图用法。分享给大家供大家参考，具体如下：

1、完整实例代码：

折线图

$(function() {

AlPriceQuery();

});

function AlPriceQuery(){

var result = {

AvgPrice : [14030, 13980, 14060, 14000, 13930, 14030, 13980, 14060, 14000, 13930],

Date: ["11-1", "11-2", "11-3", "11-4", "11-5", "11-6", "11-7", "11-8", "11-9", "11-10"],

}

var DataArr = [];//y轴数据

var TickArr = [];//x轴自定义刻度数据

var PriceArr = [];//价格

for(var i=0; i

DataArr.push([ i+1, result.AvgPrice[i] ]);

TickArr.push([ i+1, result.Date[i] ]);

PriceArr.push(result.AvgPrice[i]);

}

var MinPrice = PriceArr.sort(function(a, b){return a - b})[0];//获取最小的铝锭价

if(MinPrice % 20 == 0){

MinPrice = MinPrice - 20;

}

else{

MinPrice = MinPrice - 30;

}

//数据源

var DataSet = [{

"label": "最近 " + result.Date.length + " 日铝锭价",

"data": DataArr,//折线图数据

}];

//配置

var Options = {

xaxis: {

ticks: TickArr,//x轴自定义刻度数据

},

yaxis: {

min: MinPrice,//最小刻度

tickSize: 20,//递增量

},

series: {

lines: {

show: true,//显示线段

lineWidth: 1.5,

},

points: {

show: true,//显示节点

radius: 3,

},

color: "#7AC0DA",

},

grid: {

hoverable: true,//鼠标移动到节点会有效果

borderWidth: 1,//最外边的边框

backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },

},

legend: {

noColumns: 0,

labelBoxBorderColor: "#000000",

position: "sw",

backgroundOpacity: 0.1,

},

shadowSize: 0,//曲线阴影

};

//节点hover事件

$.fn.UseTooltip = function () {

var PrePoint = null, PreLabel = null;

$(this).bind("plothover", function (event, pos, item) {

if (item) {

if ((PreLabel != item.series.label) || (PrePoint != item.dataIndex)) {

PrePoint = item.dataIndex;

PreLabel = item.series.label;

$("#tooltip").remove();

$(this).css({

"cursor": "pointer"

})

if (item.seriesIndex == 0) {

ShowTooltip(

item.pageX + 100,

item.pageY - 10,

"#f7d373",

result.Date[item.dataIndex] + " 铝锭价: " + item.series.data[item.dataIndex][1]);

}

}

}

else {

PrePoint = null;

PreLabel = null;

$(this).css({

"cursor": "auto"

});

$("#tooltip").remove();

}

});

};

if (PriceArr.length > 0) {

$.plot($("#placeholder"), DataSet, Options);

$("#placeholder").UseTooltip();

}

}

//提示框

function ShowTooltip(x, y, color, contents) {

$('

' + contents + '

').css({

position: 'absolute',

display: 'none',

top: y - 40,

left: x - 120,

border: '2px solid ' + color,

padding: '3px',

'font-size': '9px',

'border-radius': '5px',

'background-color': '#fff',

'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

opacity: 0.9

}).appendTo("body").fadeIn(200);

}

2、运行效果图如下：

希望本文所述对大家jQuery程序设计有所帮助。