本文使用HTML的Canvas元素绘制实时动态折线图。
参考于这篇博客HTML5 Canvas动画折线图 可动态添加节点
<button id="start" style="text-align:center;">Start</button>
<button id="stop" style="text-align:center;">Stop</button>
<canvas id="canvas"></canvas>
<script>
var interval;
var x_value=0;
$(function(){
$("#start").click(function(){
interval = setInterval(refresh,1000);
});
});
function refresh(){
var y_value = Math.round(Math.random()*100*100)/100;
append(x_value,y_value);
x_value = x_value + 1;
}
$(function(){
$("#stop").click(function(){
clearInterval(interval);
});
});
</script>
function append(x_value,y_value) {
chart.append([
{ label: x_value, value: y_value }
]);
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext( '2d' );
context.fillText( point.label, point.x - ( wordWidth / 2 ), height - 30 );
context.fillText( point.value, 18, point.y);
执行Start可实时动态绘制折线图,执行Stop即可停止刷新。运行结果如下图所示:
本文地址:https://blog.csdn.net/qq_41672428/article/details/107453997
如对本文有疑问, 点击进行留言回复!!
web前端基础之HTML5语义化新标签学习笔记(8)学会用语义化标签
网友评论