Отобразить независимую серию осей X на Google Chart - PullRequest
Новая
       10

Отобразить независимую серию осей X на Google Chart

1 голос
/ 26 апреля 2019

Мне нужно отобразить две независимые серии в Google Chart.Ряды представляют температуру и давление в пределах одного и того же периода времени, однако время выборки может быть разным.Ниже образец моих данных 

let temperatures = [["Apr 26, 2019, 4:28:28 AM", 25.509],
                    ["Apr 26, 2019, 4:28:38 AM", 26.509],
                    ["Apr 26, 2019, 4:28:48 AM", 25.590],
                    ["Apr 26, 2019, 4:28:58 AM", 25.515],
                    ["Apr 26, 2019, 4:29:08 AM", 24.998]]

let pressures =     [["Apr 26, 2019, 4:28:30 AM", 60.509],
                     ["Apr 26, 2019, 4:28:41 AM", 60.509],
                     ["Apr 26, 2019, 4:28:50 AM", 60.590] 
                     ["Apr 26, 2019, 4:28:57 AM", 60.998]]

Есть ли способ нарисовать диаграмму с такими данными?

Насколько я понимаю, и ScatterChart, и ComboChart ожидают одно и то же значение оси X.

1 Ответ

0 голосов
/ 24 июня 2019

диаграммы ожидают, что значение оси X будет в том же / первом столбце.
но мы можем использовать null, где ряд не имеет значения для значения оси X.

мы можем использовать google метод соединения , чтобы объединить два набора данных. 

var dataTemp = google.visualization.arrayToDataTable(temperatures, true);
var dataPres = google.visualization.arrayToDataTable(pressures, true);
var dataChart = google.visualization.data.join(dataTemp, dataPres, 'full', [[0, 0]], [1], [1]);

и следующие опции для размещения давления на второй оси Y. 

var options = {
  series: {
    1: {
      targetAxisIndex: 1,
    }
  }
};

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  let temperatures = [
    ["Apr 26, 2019, 4:28:28 AM", 25.509],
    ["Apr 26, 2019, 4:28:38 AM", 26.509],
    ["Apr 26, 2019, 4:28:48 AM", 25.590],
    ["Apr 26, 2019, 4:28:58 AM", 25.515],
    ["Apr 26, 2019, 4:29:08 AM", 24.998]
  ];

  let pressures = [
    ["Apr 26, 2019, 4:28:30 AM", 60.509],
    ["Apr 26, 2019, 4:28:41 AM", 60.509],
    ["Apr 26, 2019, 4:28:50 AM", 60.590],
    ["Apr 26, 2019, 4:28:57 AM", 60.998]
  ];

  var dataTemp = google.visualization.arrayToDataTable(temperatures, true);
  var dataPres = google.visualization.arrayToDataTable(pressures, true);
  var dataChart = google.visualization.data.join(dataTemp, dataPres, 'full', [[0, 0]], [1], [1]);
  dataChart.setColumnLabel(1, 'Temperature');
  dataChart.setColumnLabel(2, 'Pressure');

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 60,
      right: 16,
      bottom: 100
    },
    height: 400,
    width: '100%',
    series: {
      1: {
        targetAxisIndex: 1,
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(dataChart, options);
});
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id='chart_div'></div>
...