使用了几个例子合起来做出来的这个例子
<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上进行了测试
运行效果图如下: