0 
<!DOCTYPE html>
<html>
<head><title>Canvas code example</title>
<script type="text/javascript">
// JavaScript source code goes here
function fun1(x) {return Math.sin(x);  }
function fun2(x) {return Math.cos(3*x);}

function draw() {
 var canvas = document.getElementById("canvas");
 if (null==canvas || !canvas.getContext) return;

 var axes={}, ctx=canvas.getContext("2d");
 axes.x0 = 0 + .5*canvas.width;  // x0 pixels from left to x=0
 //document.writeln(axes.x0);
 axes.y0 = 0 + .5*canvas.height; // y0 pixels from top to y=0
 axes.scale = 40;                 // 40 pixels from x=0 to x=1
 axes.doNegativeX = true;

 showAxes(ctx,axes);   // maybe to show , ie display the axes only  :P
 funGraph(ctx,axes,fun1,"rgb(11,153,11)",1); 
 funGraph(ctx,axes,fun2,"rgb(66,44,255)",2);
}

function funGraph (ctx,axes,func,color,thick) {
 var xx, yy, dx=.5, x0=axes.x0, y0=axes.y0, scale=axes.scale;
 var iMax = Math.round((ctx.canvas.width-x0)/dx);
 var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
 ctx.beginPath();
 ctx.lineWidth = thick;
 ctx.strokeStyle = color;

 for (var i=iMin;i<=iMax;i++) {
  xx = dx*i; yy = scale*func(xx/scale);  //scale is the magnification factor
  if (i==iMin) ctx.moveTo(x0+xx,y0-yy);     //if min ..then start drawing..so moveTo ..else CONTINUE drawing..so lineTo
  else         ctx.lineTo(x0+xx,y0-yy);
 }
 ctx.stroke();  //this is used to draw it
}

function showAxes(ctx,axes) {
 var x0=axes.x0, w=ctx.canvas.width;
 var y0=axes.y0, h=ctx.canvas.height;
 var xmin = axes.doNegativeX ? 0 : x0;
 ctx.beginPath();
 ctx.strokeStyle = "rgb(128,128,128)"; 
 ctx.moveTo(xmin,y0); ctx.lineTo(w,y0);  // X axis
 ctx.moveTo(x0,0);    ctx.lineTo(x0,h);  // Y axis
 ctx.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="502" height="108"></canvas>
</body>
</html>

我如何将它用于实时图表。这是静态的。有没有其他方法可以绘制“”“实时图表”/“实时图表”。我的项目是为 USB 加密狗的上传和下载值绘制折线图？

4

1 回答 1

0

您可以使用flot它，请参阅页面上的图表：flotcharts.org或在示例下。

于 2013-10-18T11:53:04.220 回答