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

Question

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

Answer 1

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

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

CanvasJS live linechart not rendering datapoints

javascript

angular

canvasjs