Несколько строк в Google Charts с разным количеством наборов данных - PullRequest
Новая
       15

Несколько строк в Google Charts с разным количеством наборов данных

0 голосов
/ 29 июня 2018

В Google Charts я хочу отобразить 3 разные строки. Но они не имеют одинакового количества точек данных.

Следующее изображение было сделано с помощью Excel Chart, чтобы вы могли лучше понять мою проблему.

У серой линии есть только две точки данных, оранжевая линия доходит до 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).

enter image description here

1 Ответ

0 голосов
/ 29 июня 2018

вы можете использовать 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>
...