我正在尝试创建一个带有两个下拉按钮的Google Charts table,这些下拉按钮在选择其中一个下拉按钮时将主要KPI显示为一列,并在该按钮之前显示所有KPI列。
例如,当选择主KPI 2并显示该列时,还应该显示KPI列KPI 4,KPI 5,KPI 6和KPI 7。并且当您将下拉列更改为Main KPI 3时,该列以及KPI 9和KPI 10列应仅显示。
这可能吗?
我一直在尝试使用Table选项中的视图来解决。{type: 'number',label: data.getColumnLabel(2),calc: function (dt, row) {return dt.getValue(row, 3)}}
有什么想法或建议吗?
这里<< [JSFiddle:https://jsfiddle.net/tototatutu/zgy4h75c/5/
这里是整个HTML文件
:https://drive.google.com/file/d/10MicBrGMsIvhTAvr5PevV-G9bNYtgPzt/view?usp=sharing当前全部在一列-'KPIs'
我们可以使用数据视图来转换现有数据表。
这里,我们使用数据表方法getDistinctValues(colIndex)
构建唯一KPI的列表,然后为每个数据视图添加一个唯一列我们还汇总了数据视图,以便将所有值都放在同一行中。
// create data view with columns for each KPI
var view = new google.visualization.DataView(data);
var aggColumns = [];
var viewColumns = [0, 1];
data.getDistinctValues(2).forEach(function (kpi, index) {
// add view column for kpi
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 2) === kpi) {
return dt.getValue(row, 3);
}
return null;
},
label: kpi,
type: 'number'
});
// add agg column for id
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 2,
label: kpi,
type: 'number'
});
});
view.setColumns(viewColumns);
// aggregate data view
var aggData = google.visualization.data.group(
view,
[0, 1],
aggColumns
);
接下来,为了在过滤器更改时更改表格视图,我们将无法使用仪表板bind
方法。相反,我们使用原始数据表手动绘制过滤器。然后听
'statechange'
事件,为了建立表格视图,并绘制。
// Create a filter, passing some options var peergroupFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div', dataTable: data, options: { filterColumnLabel: 'Peer Group', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false, caption: 'Choose Peer Group', sortValues: false, allowNone: false, }} }); google.visualization.events.addListener(peergroupFilter, 'statechange', setKPI); peergroupFilter.draw(); // Create a filter, passing some options var kpiFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div2', dataTable: data, options: { filterColumnLabel: 'KPIs', values: ['Main KPI 1', 'Main KPI 2', 'Main KPI 3', 'Main KPI 4', 'Main KPI 5', 'Main KPI 6', 'Main KPI 7'], ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false, caption: 'Choose KPI', sortValues: false, allowNone: false, }} }); google.visualization.events.addListener(kpiFilter, 'statechange', setKPI); kpiFilter.draw();
'statechange'
事件在任一过滤器上触发时,我们得到选定的过滤器值-getState()
。我们使用对等组值来设置行,和kpi过滤器设置列。然后画桌子。
function setKPI() { // get filter values var peerGroup = peergroupFilter.getState().selectedValues[0]; var kpi = kpiFilter.getState().selectedValues[0]; // get rows var rows = aggData.getFilteredRows([{ column: 1, value: peerGroup }]); // get columns var cols = [0]; switch (kpi) { case 'Main KPI 1': cols.push(getColumnIndex('KPI 1', aggData)); cols.push(getColumnIndex('KPI 2', aggData)); break; case 'Main KPI 2': cols.push(getColumnIndex('KPI 4', aggData)); cols.push(getColumnIndex('KPI 5', aggData)); cols.push(getColumnIndex('KPI 6', aggData)); cols.push(getColumnIndex('KPI 7', aggData)); break; case 'Main KPI 3': cols.push(getColumnIndex('KPI 9', aggData)); cols.push(getColumnIndex('KPI 10', aggData)); break; case 'Main KPI 4': cols.push(getColumnIndex('KPI 12', aggData)); cols.push(getColumnIndex('KPI 13', aggData)); break; case 'Main KPI 5': cols.push(getColumnIndex('KPI 15', aggData)); cols.push(getColumnIndex('KPI 16', aggData)); cols.push(getColumnIndex('KPI 17', aggData)); break; case 'Main KPI 6': cols.push(getColumnIndex('KPI 19', aggData)); cols.push(getColumnIndex('KPI 20', aggData)); break; case 'Main KPI 7': cols.push(getColumnIndex('KPI 22', aggData)); cols.push(getColumnIndex('KPI 23', aggData)); break; } cols.push(getColumnIndex(kpi, aggData)); // format columns cols.forEach(function (colIndex) { if (colIndex === 0) { return; } formatNumber.format(aggData, colIndex); formatBar.format(aggData, colIndex); }); // set view, draw table Table.setView({ columns: cols, rows: rows }); Table.draw(); }
请参阅下面的工作jsfiddle ...https://jsfiddle.net/476kfovs/