English | 正體中文 | 简体中文

绘制一个能即时更新资料的折线图

能够即时更新的图表在当你需要绘制CPU负载、磁碟使用状况、线上使用者统计甚至是股市图表时就很方便,
为了要制作能即时更新的图表, 你需要使用到一些Flot的内建函式

plot.setData(data) //重新设定资料
plot.draw()        //重新绘制图表

我们用阵列来储存资料, 当每次在你重绘图表之前, 你要先移除阵列中的第一笔资料,
然后再插入一笔新的资料到阵列里, 再用 plot.setData(data) 去重新设定资料, 最后再呼叫 plot.draw() 重绘图表
//原始资料
var data = [
    [1, 50], [2, 100], [3, 150], [4, 200], [5, 250]
];

//从阵列里移除第一笔资料
data.shift();

//最后阵列的结果会是如下
/*
    var data = [
        [2, 100], [3, 150], [4, 200], [5, 250]
    ];
*/

//插入一笔新的资料到阵列里
data.push([5, 999]);

//最后阵列的结果会是如下, 同时要重新指定X轴的个数
/*
    var data = [
        [1, 100], [2, 150], [3, 200], [4, 250], [5, 999]
    ];
*/

//重新设定资料并重绘
plot.setData([data]);
plot.draw();


即时更新图表

范例程式码Expand
<!-- HTML -->
<div id="example-section10">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


<!-- Javascript -->
<script type="text/javascript" src="/js/lib/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="/js/flot/jshashtable-2.1.js"></script>    
<script type="text/javascript" src="/js/flot/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script>
var data = [];
var dataset;
var totalPoints = 50;
var updateInterval = 1000;
var now = new Date().getTime();


function GetData() {
    data.shift();

    while (data.length < totalPoints) {     
        var y = Math.random() * 100;
        var temp = [now += updateInterval, y];

        data.push(temp);
    }
}

var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 1.2,
            fill: true
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [2, "second"],
        tickFormatter: function (v, axis) {
            var date = new Date(v);

            if (date.getSeconds() % 20 == 0) {
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return hours + ":" + minutes + ":" + seconds;
            } else {
                return "";
            }
        },
        axisLabel: "Time",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxis: {
        min: 0,
        max: 100,        
        tickSize: 5,
        tickFormatter: function (v, axis) {
            if (v % 10 == 0) {
                return v + "%";
            } else {
                return "";
            }
        },
        axisLabel: "CPU loading",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 6
    },
    legend: {        
        labelBoxBorderColor: "#fff"
    }
};

$(document).ready(function () {
    GetData();

    dataset = [
        { label: "CPU", data: data }
    ];

    $.plot($("#flotcontainer"), dataset, options);

    function update() {
        GetData();

        $.plot($("#flotcontainer"), dataset, options)
        setTimeout(update, updateInterval);
    }

    update();
});



</script>
在线测试程序

更多范例
 
© 2012 PureExample.com contact