为了能给用户带来更好的使用体验,公司产品的传输状态能够让客户清晰的看到,从而实时观察设备和网络的情况,
为了保证引入库的统一性,用原本的chart.js的库来做动态的折线图:
1.定义初始变量
var myLine=""; var maxLength=30; var index_bit = new Array(30); var data = [0]; for (var i = 0; i < 30; i++) { index_bit[i] = i } var time="";
myLine是画图的实例,maxLength是当前显示横坐标最大数值,data是数据的初始值
2.定位画图位置
<div id="panel" style="margin:50px"> <!--<canvas id="bit" height="250" width="600"></canvas>--> <!--为防止浏览器报错,id不要用canvas等--> </div>
注意:为了防止停止定时器时,canvas会保留原来画图的数据,从而出现比较鬼畜的闪图现象,canvas最好是动态加载标签,
3.定时获取数据画图
function paintLineChart(){ var currentData=Math.random()*100+1; if(data.length>=30){ myLine.removeData(); myLine.addData([currentData],maxLength++) }else{ data.push(currentData); var lineChartData = { // 横坐标 labels :index_bit, datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "palevioletred", pointColor : "palevioletred", pointStrokeColor : "fff", data :data } ] }; var defaults={ animation : false }; myLine = new Chart(document.getElementById("bit").getContext("2d")).Line(lineChartData,defaults); } time=setTimeout(function () { paintLineChart() },1000); }
如果是ajax从后台获取数据的话,可以让currentData等于返回值的某一个字段,用timeOut而不用Interval是为了防止与交互时
数据不能马上返回或者返回时间太长,多条ajax命令并发会导致后台命令阻塞。
4.清除数据
clearTimeout(time); myLine=""; maxLength=30; index_bit = new Array(30); data = [0]; for (var j = 0; j < 30; j++) { index_bit[j] = j } $("#panel").empty();
清除canvas标签,就可以清除掉保留在canvas上的数据,避免出现再次画图时会出现上次画图的曲线的闪图现象。
最终效果图如下:
5.提示
1)上面方法只是单一直线图,多条折线图可以参考chart.js的中文文档。
2)换图的库很多,例如highchart.echart等都可以用,我只是利用现有库进行制作。
3)横坐标最大值是在当前显示的最大格数,并不是实际的值,当达到最大值时,横坐标会动态替换,就想上面图显示的样子。
4)此方法还有很多不够完善的地方,例如无法限定纵坐标的值的范围,由库自行调整等,希望程序员朋友们指出错误和修改完善方法。