当前位置：首页 >

Flot画实时曲线

发布时间：2023/12/2 46 豆豆

生活随笔收集整理的这篇文章主要介绍了 Flot画实时曲线小编觉得挺不错的,现在分享给大家,帮大家做个参考.

源代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>深海的小鱼编制-PLOT</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:600px;
    height:300px;
    z-index:1;
    left: 200px;
    top: 167px;
}
</style>
</head>

<body>
<h1>深海的小鱼儿-随机函数图像</h1>
<div id="apDiv1" align="center"></div>
<script type="text/javascript">
$(function () {

    // we use an inline data source in the example, usually data would
    // be fetched from a server
    var data = [], totalPoints = 300;
    function getRandomData() {
        if (data.length > 0)
            data = data.slice(1);
        // do a random walk
       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);
        }
        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }
    var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        yaxis: { min: 0, max: 100 },
        xaxis: { show: false }
    }
    var plot = $.plot($("#apDiv1"),[getRandomData()],options);
    function update() {
        plot.setData([ getRandomData() ]);
        // since the axes don't change, we don't need to call plot.setupGrid()
        plot.draw();
        setTimeout(update, 1);
    }
    update();

});

</script>
</body>
</html>

图解：

转载于:https://www.cnblogs.com/xmphoenix/archive/2011/04/03/2004464.html

总结

以上是生活随笔为你收集整理的Flot画实时曲线的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。