在网页上绘制实时图表

Question

我有一个每分钟附加新数据的csv文件，我希望将此文件中的数据绘制为网页上的图形。 csv文件有12个参数，我想绘制参数与时间的图表。

Answer 1

您可以使用php加载csv数据 - 更多关于here at w3school.com (fgetcsv)，然后您可以使用canvas.context函数，您只需要创建带有点的图表（context.fillRect或arc for circle，或者其他你用你自己的函数创建的形状）和一些线作为轴。

然后你需要setInterval或requestAnimationFrame来定期在客户端重复这个过程。

否则，你可以找到很多关于html5图表的内容，如果你只是google它，有专门为这些案例制作的库，以及很多教程。

我不太确定你的问题究竟是从你的问题中找到的。

Answer 2

看起来@VicoLemp已涵盖您的数据加载流程。

这是一个简单的画布线图，供您开始使用。

随意设计它以满足您的设计需求：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var PI2=Math.PI*2;
var offsetX=20;
var offsetY=20;

var points=randomData(12);

plotData(points,250,250);

function plotData(pts,chartWidth,chartHeight){

  var range=calcSourceMinMax(pts);

  var p=[];
  for(var i=0;i<pts.length;i++){
    var mappedX=mapRange(i,0,pts.length,0,chartWidth)+offsetX;
    var mappedY=ch-(mapRange(pts[i],range.min,range.max,0,chartHeight)+offsetY);
    p.push({x:mappedX,y:mappedY});
  }

  ctx.clearRect(0,0,cw,ch);
  ctx.strokeStyle='lightgray';

  ctx.beginPath();
  ctx.moveTo(p[0].x,p[0].y);
  for(var i=1;i<p.length;i++){
    ctx.lineTo(p[i].x,p[i].y);
  }
  ctx.stroke();

  for(var i=0;i<p.length;i++){
    var pt=p[i];
    ctx.beginPath();
    ctx.arc(pt.x,pt.y,3,0,PI2);
    ctx.fill();
    ctx.fillText(i,pt.x,pt.y-5);
    ctx.fillText(i+' = '+pts[i],chartWidth+offsetX+20,i*15);
  }

}



////////////////////////////
// Utilities

//
function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh) {
  return mappedLow + (mappedHigh - mappedLow) * (value - sourceLow) / (sourceHigh - sourceLow);
}

//
function calcSourceMinMax(a){
  var min=1000000;
  var max=-1000000;
  for(var i=0;i<a.length;i++){
    var value=a[i];
    if(value<min){min=value;}
    if(value>max){max=value;}
  }
  return({min:min,max:max});
}

//
function randomData(count){
  var a=[];
  for(var i=0;i<count;i++){
    a.push(parseInt(Math.random()*100));
  }
  return(a);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=400 height=300></canvas>