我正在尝试使用CategoryFilters创建GoogleCharts 条形图,该图表还显示每个类别/组的平均值。如何计算和显示平均值的其他条形/列?
类似这样的例子(示例)-> https://ibb.co/wQksgGN
我已经尝试在“图表”选项部分中使用trendlines,但它们只是线条,而不是条形/列,并且似乎不适用于我的代码。
trendlines: { 3: {}},
到目前为止,我的所有代码都在这里-> https://jsfiddle.net/tototatutu/ktwr5jap/5/
答案 0 :(得分:0)
因为您需要在绘制图表之前计算平均值,
您将无法使用仪表板/绑定功能。
相反,您将需要执行平均值计算并绘制图表,
在控件的状态更改事件中。
首先,我们将数据表分配给控件,添加事件侦听器,然后绘制它们。
// Define category pickers for 'KPI', 'Peer Group'
var kpiPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control1',
dataTable: data, // <-- add data table
options: {
filterColumnLabel: 'KPI',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
caption: 'Choose KPI',
sortValues: true,
allowNone: false
}}
});
var regionPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control2',
dataTable: data, // <-- add data table
options: {
filterColumnLabel: 'Peer Group',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
caption: 'Choose Peer Group',
sortValues: true,
allowNone: false
}}
});
// Add state change event listeners
google.visualization.events.addListener(kpiPicker, 'statechange', stateChange);
google.visualization.events.addListener(regionPicker, 'statechange', stateChange);
// Draw controls
kpiPicker.draw();
regionPicker.draw();
接下来,在状态更改事件期间,我们将创建一个数据视图,并根据所选类别过滤数据。
// Build data view, filter based on category filters
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{
column: 0,
value: kpiPicker.getState().selectedValues[0]
}, {
column: 1,
value: regionPicker.getState().selectedValues[0]
}]));
然后使用group
方法查找视图的平均值。
// Group data, calculate average
var groupData = google.visualization.data.group(
view,
[{column: 0, type: 'string', modifier: function () {return 'Average';}}],
[{
column: 3,
type: 'number',
label: 'Average',
aggregation: google.visualization.data.avg
}]
);
然后将数据视图转换回数据表,添加平均行并进行排序。
// Convert view to data table, add average row, sort
view = view.toDataTable();
view.addRow([kpiPicker.getState().selectedValues[0], regionPicker.getState().selectedValues[0], 'Peer Group Average', groupData.getValue(0, 1), '#757575']);
view.sort({column: 3, desc: true});
然后,我们将数据视图分配给图表并绘制...
// Draw charts
barChart.setDataTable(view);
table.setDataTable(view);
barChart.draw();
table.draw();
有关完整示例,请参见以下工作摘要
google.charts.load('current', {
packages: ['controls']
}).then(function () {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['KPI', 'Peer Group', 'Products', 'Amount', { role: 'style' }],
['KPI 1', 'EMEA', 'Product A', 4, '#003E7D'],
['KPI 1', 'EMEA', 'Product B', 6, '#003E7D'],
['KPI 1', 'EMEA', 'Product C', 2, '#F46B1B'],
['KPI 1', 'Americas', 'Product A', 3, '#003E7D'],
['KPI 1', 'Americas', 'Product B', 8, '#003E7D'],
['KPI 1', 'Americas', 'Product C', 7, '#F46B1B'],
['KPI 2', 'EMEA', 'Product A', 9, '#003E7D'],
['KPI 2', 'EMEA', 'Product B', 1, '#003E7D'],
['KPI 2', 'EMEA', 'Product C', 4, '#F46B1B'],
['KPI 2', 'Americas', 'Product A', 4, '#003E7D'],
['KPI 2', 'Americas', 'Product B', 6, '#003E7D'],
['KPI 2', 'Americas', 'Product C', 7, '#F46B1B']
]);
// Define category pickers for 'KPI', 'Peer Group'
var kpiPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control1',
dataTable: data, // <-- add data table
options: {
filterColumnLabel: 'KPI',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
caption: 'Choose KPI',
sortValues: true,
allowNone: false
}}
});
var regionPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control2',
dataTable: data, // <-- add data table
options: {
filterColumnLabel: 'Peer Group',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
caption: 'Choose Peer Group',
sortValues: true,
allowNone: false
}}
});
// Define a bar chart to show 'Amount' data
var barChart = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'chart1',
options: {
width: 480,
height: 300,
legend: 'none',
bar: {
groupWidth: '50%'
},
animation: {
duration: 600,
},
hAxis: {
minValue: 0,
maxValue: 1,
ticks: [0, 2, 4, 6, 8, 10],
gridlines: {
color: '#F46B1B'
},
textStyle: {
color: '#003E7D',
fontSize: 15,
fontName: 'Montserrat',
bold: true,
},
},
vAxis: {
textStyle: {
fontName: 'Montserrat',
color: '#003E7D',
fontSize: 11,
bold: true
},
},
},
// Configure the barChart to use columns 2 (Products), 3 (Amount), and 4 (style/colors)
'view': {'columns': [2, 3, 4]}
});
// Define a table.
// The table shows whatever is selected by the category pickers. It's here
// just for reference and debugging.
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '400px'
},
'view': {'columns': [0, 1, 2, 3]}
});
// Add state change event listeners
google.visualization.events.addListener(kpiPicker, 'statechange', stateChange);
google.visualization.events.addListener(regionPicker, 'statechange', stateChange);
// Draw controls
kpiPicker.draw();
regionPicker.draw();
// Draw charts
stateChange();
function stateChange() {
// Build data view, filter based on category filters
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{
column: 0,
value: kpiPicker.getState().selectedValues[0]
}, {
column: 1,
value: regionPicker.getState().selectedValues[0]
}]));
// Group data, calculate average
var groupData = google.visualization.data.group(
view,
[{column: 0, type: 'string', modifier: function () {return 'Average';}}],
[{
column: 3,
type: 'number',
label: 'Average',
aggregation: google.visualization.data.avg
}]
);
// Convert view to data table, add average row, sort
view = view.toDataTable();
view.addRow([kpiPicker.getState().selectedValues[0], regionPicker.getState().selectedValues[0], 'Peer Group Average', groupData.getValue(0, 1), '#757575']);
view.sort({column: 3, desc: true});
// Draw charts
barChart.setDataTable(view);
table.setDataTable(view);
barChart.draw();
table.draw();
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1" style='margin-top: 50px;'></div>
<div id="control2" style='margin-top: 10px;'></div>
</td>
<td style='width: 600px;'>
<div style="float: left; margin-top: 50px;" id="chart1"></div>
<div style="float: left; margin-top: 50px;" id="chart2"></div>
</td>
</tr>
</table>
</div>
注意::https://www.google.com/jsapi
不应再用于加载Google图表,
它是旧版本。
https://www.gstatic.com/charts/loader.js
应该代替使用。
这只会更改load
语句。
请参见上面的代码段...