带两列的Google柱形图表

Question

如何在有月份和年份时处理column chart。

我的数据是在该格式

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

目的是创造具有X轴作为月和Y轴作为计数柱形图。现在X轴应该有按月分组的月数。 这样的事情 -

我试图简单地通过上述数据，看看我能得到什么，但我得到错误。

任何方式来指定轴的价值基于按月份分组的年份？

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>

编辑

所有谷歌图表要求特定DataFormat

意义，操纵，如果你的数据不已经在这个格式

的存在需要可视化库确实提供了一些Data Manipulation Methods，s UCH作为group()

其可以被用于将数据转换为所需的格式

1）组由月和
年 2中的数据）创建一个新的数据表与Month列
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>