2列のGoogle縦棒グラフ

Question

月と年を持つときにcolumn chartに近づく方法。

マイデータがこのフォーマットである

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

目的は、カウントとして月間とY軸とX軸を有する縦棒グラフを作成することです。今、X軸は、月ごとにグループ化された年数を持つ必要があります。 このようなもの -

私は何を得ることができるかを単に上のデータを渡そうとしましたが、エラーが発生します。

月ごとにグループ化された年に基づいてAxisに値を割り当てる方法はありますか？

JsFiddle of Google Chart Example

Answer 1

だけで、あなたは...計算列を経由して、注釈を追加する

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' 
}]); 

を DataViewを使用することができる3つの列、このような何か...

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

が必要

次の作業スニペットを参照してください...

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

意味を必要とEDITデータがすでにこの形式で

存在しない場合は、操作が要求されます視覚化ライブラリは、Data Manipulation Methods、s UCH月および年
2によるデータ）が月列
3）を使用して新しいデータテーブルを作成して必要な形式に

1）グループのデータを変換するために使用することができるgroup()

として質問からのデータを使用して、次の作業のスニペットを参照してください

月ごとに行を追加します）グループ化されたテーブル
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>