當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Flot画实时曲线

發布時間：2023/12/2 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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画实时曲线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。