Как нарисовать график месяц против текстовой метки в Google диаграммах - PullRequest
Новая
       32

Как нарисовать график месяц против текстовой метки в Google диаграммах

0 голосов
/ 01 мая 2018

Как создать график Google-диаграммы с месяцем (март 2018 г.) по оси h и меткой по оси V (модуль базы данных) 

[
    ['Database Module', new Date(2018, 3, 30),1],
    ['HR Module', new Date(2018, 1, 4), 1],
    ['Finance Module', new Date(2018, 2, 4),4],
    ['Operations Module', new Date(2018, 2, 4), 6],
    ['PP Module', new Date(2018, 2, 4), 1]
]

1 Ответ

0 голосов
/ 01 мая 2018

не уверен, что это график, который вы ищете,
но вы могли бы использовать DataView для создания столбца оси V для каждой метки,
затем используйте метод group() для суммирования по дате ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Database Module', new Date(2018, 3, 30),1],
    ['HR Module', new Date(2018, 1, 4), 1],
    ['Finance Module', new Date(2018, 2, 4),4],
    ['Operations Module', new Date(2018, 2, 4), 6],
    ['PP Module', new Date(2018, 2, 4), 1]
  ], true);

  var dataView = new google.visualization.DataView(data);
  var labels = data.getDistinctValues(0);
  var viewColumns = [1];
  labels.forEach(function (label, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 0) === label) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: label,
      type: 'number'
    });
  });
  dataView.setColumns(viewColumns);

  var aggColumns = [];
  labels.forEach(function (label, index) {
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: dataView.getColumnLabel(index + 1),
      type: dataView.getColumnType(index + 1)
    });
  });

  var dataGroup = google.visualization.data.group(dataView, [0], aggColumns);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(dataGroup, {
    legend: 'bottom'
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...