jquery插件flot的使用

特点：使用方便，交互效果良好，支持动态显示

使用 :

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);}

// 动态显示

// 封装图表，定时请求数据并刷新图表(代码略。。。)