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

如何解决CanvasJS 实时折线图不呈现数据点

我正在为一个 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）没有被正确传递，但我不知道如何解决这个问题。

解决方法

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