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

Question

我正在用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

---

样本图

---

图表表视图

Answer 1

[HighCharts论坛的https://www.highcharts.com/forum/viewtopic.php?f=9&t=43528&p=153676&hilit=We+are+aware+of+this+bug#p153676答复

我们知道此错误，我们正在努力解决此问题。您可以在这里查看更新：https://github.com/highcharts/highcharts/issues/12767

您可以通过将丢失的数据设置为空来解决此问题数组，就像我在下面的演示中所做的那样。现场演示：https://jsfiddle.net/BlackLabel/g5fykpnm/

var data1 = [
    ["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
      }
    }
  ],
  exporting: {
    showTable: true
  }
});

#container {
    height: 400px; 
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

 <div id="container"></div>