Flot画动态折线图（两条折线动态的）

最新推荐文章于 2022-11-05 19:43:45 发布

原创最新推荐文章于 2022-11-05 19:43:45 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #bootstrap #jquery

编程专栏收录该内容

101 篇文章

订阅专栏

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

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

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

<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>

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

运行效果图如下：