javascript - Google Charts:表格中列的自定义视图
问题描述
我正在尝试创建一个带有两个下拉按钮的Google Charts表,它们在选择一个下拉按钮以及所有KPI列之前将主KPI显示为一列。
For example, when the Main KPI 2 is selected and that column is shown, then also the KPI columns KPI 4, KPI 5, KPI 6 and KPI 7 should also be shown. 当您将下拉列更改为 Main KPI 3 时,应仅显示该列以及 KPI 9 和 KPI 10 列。
这可能吗?
我一直试图通过表格选项中的视图来解决这个问题。
{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
解决方案
为了显示每个单独的 kpi 列,
kpi 必须在数据表中具有自己的列。
目前,所有内容都在一个列中——'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/
推荐阅读
- python - 使用 csv.DictReader() 创建嵌套字典
- python - 运行保存在 gdrive 上的 python 脚本
- python - 分组数据框并计算单元格值和中值计算之间的比率
- sql - 采购订单号以履行客户订单号 - SQL
- arrays - 如何返回数组项的特定元素的计数?
- amazon-web-services - CloudFront 和 S3 网站托管 ip 限制存储桶策略不起作用
- html - TabScroll 加载部分一次,然后第二次刷新,看起来部分加载了两次
- javascript - 如何使用 Node JS Http/Https 模块获取 URL 参数
- angular - “事件”类型的参数不可分配给“HtmlInputEvent”类型的参数
- azure - 如何在 Azure Pipeline ForEach 循环中迭代 json 对象列表