Google图表中的多行数据集数量不同 [英] Multiple lines in Google Charts with different number of datasets

问题描述

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

In Google Charts I want to display 3 different lines. But they do not have the same number of data points.

下面的图像是用Excel Chart制作的，以便您可以更好地理解我的问题.

The following Image was made with Excel Chart, so that you can understand my problem better.

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

Line grey has only two data points, the orange line goes until 5 and the blue one has full data set.

现在进入我的真实项目: 在Google Chart中，我尝试了相同的操作，所以我的dataArray看起来像这样(有4行):

So now to my real project: in Google Chart I tried the same, so my dataArray looks like that (with 4 lines):

["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中缺少三个数据集.

So you can see, that from 20180629 to 20180704 there is the full data set, in 20180705 is one missing and in 20180707 and 20180708 are 3 missing.

没有机会在此处显示0，因为这将显示错误的温度图表.

It is no opportunity, to display a 0 there, because this would show wrong temperature charts.

Chrome控制台显示此错误:

The Chrome Console shows this error:

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

推荐答案

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

you can use null in place of the empty data points...

["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]

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

see following working snippet...

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>

这篇关于Google图表中的多行数据集数量不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！