CanvasJS 实时折线图不呈现数据点答案

【问题标题】：CanvasJS live linechart not rendering datapointsCanvasJS 实时折线图不呈现数据点
【发布时间】：2021-04-18 13:13:57
【问题描述】：

我正在为一个 Angular 项目编写图表，该项目将使用 API 来显示地板球游戏的统计数据。我已经检查了 API 代码并记录了对象，并且所有数据都完全正确地传递给了图表，所以问题很可能出在我的图表代码上。

将数据放入图表后，y 轴线以正确的大小显示，但没有可见线。

图表被启动OnInit()：

ngOnInit(): void {
  this.api.activePlayer().subscribe(d => this.player = d);
  this.api.activeMatch().subscribe(d => this.match = d);

  this.statUpdate();

  this.accel = this.getXformatted();

  this.chartAcc = new CanvasJS.Chart("graphAcc",{
    title:{
      text:"Live Acceleration Chart"
    },
    data: [{
      type: "line",
      dataPoints : this.accel
    }]
  });

  this.chartAcc.render();

  setInterval(d => {this.UpdateChart()}, 5000);
}

statUpdate() 是：

statUpdate(): void {
  this.api.matchplayerstats(this.player.name, this.match.id).subscribe(d => this.stats = d[0]);
}

getXformatted() 是：

getXformatted(): any[]
{
  var output : any[] = [];
  Jquery.each(this.accel, function(key, value){
    output.push({
        x: value.time,
        y: value.x
      });
  });
  return output;
}

updateChart() 是：

UpdateChart(): void
{
  this.statUpdate();

  if (this.stats.accel.length > this.accel.length)
  {
    for(var i = this.accel.length; i < this.stats.accel.length; i++)
    {
      this.accel.push({
        x: this.stats.accel[i].time,
        y: this.stats.accel[i].x
      })
    }
  }

  this.chartAcc.render();
}

我剩下的唯一猜测是accel[x].time（数据类型：Date）没有正确传递，但我不知道如何解决这个问题。

【问题讨论】：

标签： javascript angular canvasjs

【解决方案1】：

问题在于 Date 变量的传递，正如我在帖子末尾所猜测的那样。它由 API 传递，没有尾随 Z。添加尾随Z 解决了日期格式问题。

【讨论】：