Multiple lines in Google Charts with different number of datasets

问题

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

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

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

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, , , ]

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.

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

The Chrome Console shows this error:

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

回答1:

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>

来源：https://stackoverflow.com/questions/51106238/multiple-lines-in-google-charts-with-different-number-of-datasets

标签

javascript

arrays

charts

google-visualization