我尝试在折线图中显示API的数据,其中x轴为“date”值,y轴为“announces”值。我收到Highcharts错误#12,数据未显示在图表中。我将www.example.com属性结构化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(无法解决合并冲突)
2条答案
按热度按时间46scxncf1#
请注意
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
0lvr5msh2#
将turboThreshold设置为0(零)。它将工作
绘图选项:{系列:{涡轮增压阈值:0、...}}