包含两列

Question

如果有月份和年份，如何接近column chart。

我的数据采用这种格式

['Group','Count','Month','Year'],
['A',10,'February',2015],
['B',8,'February',2015],
['C',15,'February',2016]

目标是创建一个柱形图，其中 X轴为月， Y轴为计数。现在，X轴应该按月分组计数。 这样的事情 -

我试图简单地传递上述数据，看看我能得到什么，但是我收到了错误。

是否可以根据按月分组的年份为Axis分配值？

JsFiddle of Google Chart Example

Answer 1

只需要三列，就像这样...

  ['Month', '2015', '2016'],
  ['Jan', 10, 15],
  ['Feb', 12, 18],
  ['Mar', 14, 21],
  ['Apr', 16, 24]

然后您可以使用DataView通过计算列添加注释...

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}]);

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', '2015', '2016'],
      ['Jan', 10, 15],
      ['Feb', 12, 18],
      ['Mar', 14, 21],
      ['Apr', 16, 24]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'
      }, 2, {
        calc: 'stringify',
        sourceColumn: 2,
        type: 'string',
        role: 'annotation'
    }]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, {});
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

所有Google图表都需要特定的DataFormat

意思是，如果您的数据尚未以此格式存在，则需要进行操作

可视化库确实提供了一些Data Manipulation Methods，例如group()

可用于将数据转换为所需格式

  

1）按月和年分组数据   2）使用Month列创建一个新的DataTable   3）从分组表中为每年添加一列
  4）每月添加行

请参阅以下工作代码段，使用问题中的数据......

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Group', 'Count', 'Month', 'Year'],
      ['A', 10, 'February', 2015],
      ['B', 8, 'February', 2015],
      ['C' , 15, 'February', 2016]
    ]);

    // group by month / year
    var dataGroup = google.visualization.data.group(
      data,
      [2, 3],
      [{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}]
    );
    dataGroup.sort([{column: 0},{column: 1}]);

    // build final data table
    var yearData = new google.visualization.DataTable({
      cols: [
        {label: 'Month', type: 'string'}
      ]
    });

    // add column for each year
    var years = dataGroup.getDistinctValues(1);
    for (var i = 0; i < years.length; i++) {
      yearData.addColumn(
        {label: years[i], type: 'number'}
      );
    }

    // add row for each month
    var rowMonth = null;
    var rowIndex = null;
    for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
      if (rowMonth !== dataGroup.getValue(i, 0)) {
        rowMonth = dataGroup.getValue(i, 0);
        rowIndex = yearData.addRow();
        yearData.setValue(rowIndex, 0, rowMonth);
      }
      for (var x = 1; x < yearData.getNumberOfColumns(); x++) {
        if (yearData.getColumnLabel(x) === dataGroup.getValue(i, 1).toString()) {
          yearData.setValue(rowIndex, x, dataGroup.getValue(i, 2));
        }
      }
    }

    var view = new google.visualization.DataView(yearData);
    view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'
      }, 2, {
        calc: 'stringify',
        sourceColumn: 2,
        type: 'string',
        role: 'annotation'
    }]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);
    chart.draw(view);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>