Highcharts视图数据表显示不正确的数据

时间:2020-03-16 10:07:14

标签: highcharts angular2-highcharts

我正在用angular5构建此应用程序。

示例代码如下所示。数据由时间/类别(字符串)和整数值组成。

当我使用整数值代替字符串代替类别时,它工作正常。但是它应该每天/每周/每月/每季度/每年。


var data1 =[["Q2-15", 40.4],
["Q3-15", 40.7],
["Q4-15", 40.5],
["Q1-16", 41.4],
["Q2-16", 41.4],
["Q3-16", 41.4],
["Q4-16", 40.8],
["Q1-17", 41],
["Q2-17", 41.4],
["Q3-17", 41.2],
["Q4-17", 42],
["Q1-18", 42.9],
["Q2-18", 42.9],
["Q3-18", 42.9],
["Q4-18", 42.9],
["Q1-19", 42.3],
["Q2-19", 44.7],
["Q3-19", 45.5],
["Q4-19", 14.6],
["Q1-20", 36.6]],

data2=[["Q1-20", 36.6],
["Q2-20", 83.2],
["Q3-20", 55.3]],

data3 = [
["Q4-19", 149.6, 149.6],
["Q1-20", 19.9, 52.4],
["Q2-20", 67.4, 100.02],
["Q3-20", 39.5, 72.13]
],    

data4 = [
["Q4-19", 14.6, 14.6],
["Q1-20", 24.4, 47.8],
["Q2-20", 72.06, 94.4],
["Q3-20", 44.17, 67.5]
];


Highcharts.chart('container', {
title: {
text: "Forecast Chart"
},
xAxis: {
type: 'category'
},
yAxis: {
title: null,
},
series: [{
name: "data1",
data: data1,
type: 'spline',
color: Highcharts.getOptions().colors[0],
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
},
{
name: "data2",
data: data2,
type: 'spline',
color: "#4781c1",
zIndex: 1,
marker: {
fillColor: 'white',
symbol: 'circle',
lineWidth: 2,
lineColor: "#4781c1"
}
},
{
name: "data3",
data: data3,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: '#7cbaff',
marker: {
enabled: false
}
},
{
name: "data4",
data: data4,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: '#b8d8fb',
marker: {
enabled: false
}
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
exporting: {
buttons: {
contextButton: {
symbol: 'download',
symbolStroke: "",
symbolStrokeWidth: 5,
menuItems: ["viewFullscreen", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadXLS", "viewData"]
}
}
},
navigation: {
menuItemHoverStyle: {
background: '#f1f1f1',
color: 'black'
}
}
});

JsFIddle


样本图

Sample Chart


图表视图

Chart-Table view

1 个答案:

答案 0 :(得分:0)

HighCharts论坛的回复,{@ {3}}

我们知道此错误,我们正在努力解决此问题。您 可以在这里观看更新: https://www.highcharts.com/forum/viewtopic.php?f=9&t=43528&p=153676#p153676

您可以通过将丢失的数据设置为空来解决此问题 数组,就像我在下面的演示中一样。
实时演示:jsfiddle.net/BlackLabel/g5fykpnm /