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

// 动态显示

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