Flot画动态折线图 (两条折线动态的)

这篇博客展示了如何使用Flot库在HTML中创建动态的双折线图。结合jQuery,通过实例代码,博主成功实现了图表的动态更新。在测试环境中,代码已在http://www.jqueryflottutorial.com上运行并通过验证,生成了600px宽、300px高的图表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用了几个例子合起来做出来的这个例子


<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 type="text/javascript">  
$(function () {  
    // 要绘制的数据和数据的数据点数  
    var data = [], totalPoints = 300;  
   var data1=[];
    // 获得一些随机数据  
    function getRandomData() {  
        if (data.length > 0)  
            data = data.slice(1);  
        while (data.length < totalPoints) {  
            var prev = data.length > 0 ? data[data.length - 1] : 50;  
            var y = prev + Math.random() * 10 - 5;  
            if (y < 0)  
                y = 0;  
            if (y > 100)  
                y = 100;  
            data.push(y);  
        }  
        var res = [];  
        for (var i = 0; i < data.length; ++i)  
            res.push([i, data[i]])  
        return res;  
    }  
// 获得一些随机数据  
    function getRandomData1() {  
        if (data1.length > 0)  
            data1 = data1.slice(1);  
        while (data1.length < totalPoints) {  
            var prev = data1.length > 0 ? data1[data1.length - 1] : 50;  
            var y = prev + Math.random() * 10 - 5;  
            if (y < 0)  
                y = 0;  
            if (y > 100)  
                y = 100;  
            data1.push(y);  
        }  
        var res = [];  
        for (var i = 0; i < data1.length; ++i)  
            res.push([i, data1[i]])  
        return res;  
    }  

    var updateInterval = 10; // 刷新间隔  
     
    // 设置绘图参数  
    var options = {  
        series: { shadowSize: 0 }, // 绘制线的阴影,不绘制设置 0  
        yaxis: { min: 0, max: 100 }, // Y 轴的最大值最小值  
        xaxis: { show: false } // 不显示 X 轴  
    };  
   var dataset = [
                { label: "CP1U", data:  getRandomData() , color: "#00FF00" },
                { label: "CP2U", data:  getRandomData1() , color: "#00FFFF" }
            ];

    // 绘图对象 参数为:绘制地点、数据、属性  
    var plot = $.plot($("#placeholder"),dataset, options);  
    function update() {  
        // 要实现动态绘图,只需重新设置其数据即可  
        //plot.setData([ getRandomData() ]); // 设置数据  
         dataset = [
                { label: "CP1U", data:  getRandomData() , color: "#00FF00" },
                { label: "CP2U", data:  getRandomData1() , color: "#00FFFF" }
            ];


        plot.setData(dataset);
        // 轴线不改变,不用调用 plot.setupGrid()  
        plot.draw();  
        // 设置调用  
        setTimeout(update, updateInterval);  
    }  
    // 加载调用  
    update();  
});  
</script>  

<div id="placeholder" style="width:600px;height:300px;"></div>


该代码在http://www.jqueryflottutorial.com上进行了测试

运行效果图如下:






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值