特点:使用方便,交互效果良好,支持动态显示
使用 :
1.view
<div id="flot"></div>
2.js
var dataSet = [];//存放图形对象的地方
var obj1 = {label: "obj1",color:"#00FFFF",data:datas,lines: { show: true }};
//data:是你所要展示图形对象的数据,支持Json格式
dataSet.push(obj1,...);
var Options = { //图表展现样式
grid: {
backgroundColor: "#000000",
tickColor: "#008040",
hoverable: true,
clickable: true
},
yaxis: { min: 0 },
xaxis: { mode: 'time' ,
tickSize: [5, "minute"],
timeformat: "%H:%M%p", // format string to use
min: currentTime- 3600000,//1 hour
max: currentTime,
timezone: "browser",
twelveHourClock: true // 12 or 24 time in time mode
},
series: {
lines: {
lineWidth: 1,
fill: true,
fillColor: {
colors: [
{
opacity: 0.4
},
{
opacity: 0
}
]
},
steps: false
}
}
};
// 图表初始化
$(document).ready(function(){
$.plot($('#flot'),dataSet,Options);
});
// 当鼠标移动到图形数据节点时,显示该节点数据信息
var previousPoint = null;
$("#flot").bind("plothover",
function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var item_series_label = item.series.label;
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
var x_date = new Date(Number(x));
showTooltip(
item.pageX,
item.pageY,
"Item:" + item_series_label + "</br>Value:" + y + item_p
+ "</br>Time:" + x_date.toLocaleString()
);
}
}else {
$("#tooltip").remove();
previousPoint = null;
}
}
);
//显示坐标跟随
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #000',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(1);
}
// 动态显示
// 封装图表,定时请求数据并刷新图表(代码略。。。)