Highcharts Angular - Highcharts 错误 #12答案

【问题标题】：Highcharts Angular - Highcharts Error #12Highcharts Angular - Highcharts 错误 #12
【发布时间】：2021-05-14 11:25:50
【问题描述】：

我正在尝试在此API 的折线图中显示数据，x 轴上显示“日期”值，y 轴上显示“宣布”值。我得到Highcharts Error #12 并且数据没有显示在图表上。我已经像这样构造了 series.data 属性：[[date, announces],[date, announces], ...]。这是我的代码：

dataChart: SequenceChartData[] = [];
bucketAnnouncements: Array<[Date, number]> = [];

ngOnInit(): void {
    this.chartService.getSequenceChartData(this.data.peerAS, this.data.peerIPAddress, this.data.prefix)
    .subscribe((data: SequenceChartData[]) => {
      this.dataChart = data;
      this.update = true;
      this.show = true;
      let firstDay = Infinity;
      let lastDay = -Infinity;
      for (const val of this.dataChart){
        const date = moment.utc(val.date).unix();
        if (firstDay > date) {
          firstDay = date;
        }
        if (lastDay < date) {
          lastDay = date;
        }
      }
      for (let n = firstDay; n <= lastDay; n += 300) {
        this.bucketAnnouncements[n] = [
          new Date(n * 1000),
          0
        ];
      }
      for (const val of this.dataChart) {
        const date = val.date;
        this.bucketAnnouncements[moment.utc(date).unix()][1] = val.announces;
      }

      this.chartOptions.series = [
          {
            name: 'ao',
            type: 'line',
            data: this.bucketAnnouncements,
            color: '#009879',
          }
        ];
        });
    }

使用console.log 似乎数据分配正确：

1546300800: (2) [Tue Jan 01 2019 01:00:00 GMT+0100 (Central European Standard Time), 31]
1546301100: (2) [Tue Jan 01 2019 01:05:00 GMT+0100 (Central European Standard Time), 30]
1546301400: (2) [Tue Jan 01 2019 01:10:00 GMT+0100 (Central European Standard Time), 30]
1546301700: (2) [Tue Jan 01 2019 01:15:00 GMT+0100 (Central European Standard Time), 30]
1546302000: (2) [Tue Jan 01 2019 01:20:00 GMT+0100 (Central European Standard Time), 30]
1546302300: (2) [Tue Jan 01 2019 01:25:00 GMT+0100 (Central European Standard Time), 30]
1546302600: (2) [Tue Jan 01 2019 01:30:00 GMT+0100 (Central European Standard Time), 30]
...

我还按照错误提示将turboTreshold 设置为更高的数字，但它仍然不起作用（仍然给出警告）：

plotOptions: {
    series: {
        turboThreshold: 500000,
        ...
    }
}

为了更完整地理解我的代码，这里是github repository（无法解决合并冲突）

【问题讨论】：

标签： angular typescript api highcharts data-binding

【解决方案1】：

请注意date 格式。
例如，Tue Jan 01 2019 01:00:00 GMT+0100 (Central European Standard Time)) 不是 Highcharts 的数字。这只是一个字符串。
为了解决这个问题，请使用毫秒格式的时间戳。

您可能会找到一些方法将其从一种格式转换为另一种格式。
MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

【讨论】：