我的数据格式 -
['Group','Count','Month','Year'],
['A',10,'February',2015],
['B',8,'February',2015],
['C',15,'February',2016]
我将使用过滤器来显示按组列分隔的每个月的数据。
X-axis会有团体。Y-Axis所有年份都会有计数（2014、2015、2016...）。
Something like this 
我正在为此使用 Google 仪表板。我的代码-
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard4_div'));
var slider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter4_div',
'options': {
'filterColumnLabel': 'Month',
'ui': {
'allowTyping': true,
'allowMultiple': false,
'allowNone': false,
'sortValues': false,
'label': 'Choose month',
}
}
});
var ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart4_div',
// How to take in two column values
});
dashboard.bind(slider, ColumnChart);
// Draw the dashboard.
dashboard.draw(data);
我想知道如何使用 Google Charts 在图表中添加两列值
由于在绘制图表之前需要对数据进行处理，
独立绘制类别过滤器和图表
使用原始数据表slider
那么当'ready' or 'statechange'事件发生于slider,
use selectedValues过滤行
过滤后，使用data.group将年份从行转换为列
请参阅以下工作片段...
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],
['A', 7, 'February', 2016],
['B', 5, 'February', 2016],
['C', 12, 'February', 2015],
['A', 20, 'March', 2015],
['B', 16, 'March', 2015],
['C', 30, 'March', 2016],
['A', 14, 'March', 2016],
['B', 10, 'March', 2016],
['C', 24, 'March', 2015]
]);
var slider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'dataTable': data,
'options': {
'filterColumnLabel': 'Month',
'ui': {
'allowTyping': true,
'allowMultiple': false,
'allowNone': false,
'sortValues': false,
'label': 'Choose month',
}
}
});
google.visualization.events.addListener(slider, 'ready', drawChart);
google.visualization.events.addListener(slider, 'statechange', drawChart);
function drawChart() {
var sliderData = new google.visualization.DataView(slider.getDataTable());
sliderData.setRows(sliderData.getFilteredRows([{
column: 2,
value: slider.getState().selectedValues[0]
}]));
// group by 'Group' / 'Year'
var dataGroup = google.visualization.data.group(
sliderData,
[0, 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: 'Group', 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 ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'dataTable': view
});
ColumnChart.draw();
}
slider.draw();
},
packages: ['controls', 'corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>EDIT
更新了多个过滤器...
添加附加过滤器的重复代码。
当第一个过滤器准备好时绘制第二个过滤器。
当第二个过滤器准备就绪时绘制图表。
将所有过滤器值添加到getFilteredRows陈述。
请参阅以下工作片段...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Group', 'Count', 'Month', 'Year'],
['A', 10, 'February', 2015],
['B', 8, 'February', 2015],
['C', 15, 'February', 2016],
['A', 7, 'February', 2016],
['B', 5, 'February', 2016],
['C', 12, 'February', 2015],
['A', 20, 'March', 2015],
['B', 16, 'March', 2015],
['C', 30, 'March', 2016],
['A', 14, 'March', 2016],
['B', 10, 'March', 2016],
['C', 24, 'March', 2015]
]);
var filter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter_div_group',
dataTable: data,
options: {
filterColumnLabel: 'Group',
ui: {
allowTyping: true,
allowMultiple: false,
allowNone: false,
sortValues: false,
label: 'Choose group',
}
}
});
var slider = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter_div_month',
dataTable: data,
options: {
filterColumnLabel: 'Month',
ui: {
allowTyping: true,
allowMultiple: false,
allowNone: false,
sortValues: false,
label: 'Choose month',
}
}
});
google.visualization.events.addListener(slider, 'ready', function () {
filter.draw();
});
google.visualization.events.addListener(slider, 'statechange', drawChart);
google.visualization.events.addListener(filter, 'ready', drawChart);
google.visualization.events.addListener(filter, 'statechange', drawChart);
function drawChart() {
// add both filter values to getFilteredRows
var sliderData = new google.visualization.DataView(slider.getDataTable());
sliderData.setRows(sliderData.getFilteredRows([{
column: 0,
value: filter.getState().selectedValues[0]
}, {
column: 2,
value: slider.getState().selectedValues[0]
}]));
// group by 'Group' / 'Year'
var dataGroup = google.visualization.data.group(
sliderData,
[0, 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: 'Group', 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 ColumnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'dataTable': view
});
ColumnChart.draw();
}
slider.draw();
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="filter_div_group"></div>
<div id="filter_div_month"></div>
<div id="chart_div"></div>
</div>