bugfix> graph > 投稿

h軸に月年(2018年3月)、V軸(データベースモジュール)にラベルを付けてGoogleチャートグラフを作成する方法

[
    ['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 件
  • これがあなたが探しているグラフかどうかわからない、
    しかし、あなたは 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>
    
    

あなたの答え