javascript - 具有不同数量数据集的 Google Charts 中的多行

Question

在 Google 图表中，我想显示 3 条不同的线。但是它们没有相同数量的数据点。

下图是用Excel图表制作的，方便大家理解我的问题。

灰色线只有两个数据点，橙色线一直到 5，蓝色线有完整的数据集。

现在开始我的真实项目: 在 Google Chart 中，我尝试了同样的方法，所以我的 dataArray 看起来像这样(有 4 行):

["20180629", 24.5, 28, 27.52, 24.6],
["20180630", 23, 28, 23.57, 24.4],
["20180701", 22.6, 26, 23, 23.5],
["20180702", 23, 25, 22.44, 23.5],
["20180703", 25.1, 28, 24.43, 26.3],
["20180704", 27.6, 30, 24.59, 21.4],
["20180705", 28.9, 24.1, 23.8, ],
["20180706", 24.4, , , ],
["20180707", 23.7, , , ],
["20180708", 24.8, , , ]  

所以你可以看到，从 20180629 到 20180704 是完整的数据集，20180705 缺少一个，20180707 和 20180708 缺少 3 个。

没有机会在那里显示 0，因为这会显示错误的温度图表。

Chrome 控制台显示此错误:

Uncaught (in promise) Error: Row given with size different than 5 (the number of columns in the table).

Answer 1

您可以使用 null 代替空数据点...

["20180629", 24.5, 28, 27.52, 24.6],
["20180630", 23, 28, 23.57, 24.4],
["20180701", 22.6, 26, 23, 23.5],
["20180702", 23, 25, 22.44, 23.5],
["20180703", 25.1, 28, 24.43, 26.3],
["20180704", 27.6, 30, 24.59, 21.4],
["20180705", 28.9, 24.1, 23.8, null],
["20180706", 24.4, null, null, null],
["20180707", 23.7, null, null, null],
["20180708", 24.8, null, null, null]

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["20180629", 24.5, 28, 27.52, 24.6],
    ["20180630", 23, 28, 23.57, 24.4],
    ["20180701", 22.6, 26, 23, 23.5],
    ["20180702", 23, 25, 22.44, 23.5],
    ["20180703", 25.1, 28, 24.43, 26.3],
    ["20180704", 27.6, 30, 24.59, 21.4],
    ["20180705", 28.9, 24.1, 23.8, null],
    ["20180706", 24.4, null, null, null],
    ["20180707", 23.7, null, null, null],
    ["20180708", 24.8, null, null, null]
  ], true);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>