将 data.group 用于 Google 可视化仪表板
Posted
技术标签:
【中文标题】将 data.group 用于 Google 可视化仪表板【英文标题】:Using data.group for Google Visualization Dashboards 【发布时间】:2018-02-03 13:47:27 【问题描述】:我有一个有两个键的表,如下所示:
+------+------+-------+
| key1 | key2 | value |
+------+------+-------+
| abc | 123 | 5 |
| abc | 456 | 7 |
| abc | 789 | 9 |
| xyz | 123 | 2 |
| xyz | 456 | 4 |
| xyz | 789 | 6 |
+------+------+-------+
我希望能够通过 key2 过滤这个表,所以我创建了一个google.visualization.Dashboard
,如下所示:
var dashboard = new google.visualization.Dashboard();
dashboard.bind([
new google.visualization.ControlWrapper(
"controlType": "CategoryFilter",
"containerId": "...",
"options":
"filterColumnIndex": 1
);
], [
new google.visualization.ChartWrapper(
"chartType": "Table",
"containerId": "...",
"options": ...
);
]);
现在问题来了:我希望在此表中添加一个饼图按 key1 聚合数据。因此,如果没有任何过滤,饼图将显示如下内容:
abc = 21
xyz = 12
但如果我过滤到“456”,那么它应该显示:
abc = 7
xyz = 4
现在,如果我不使用仪表板,我可以像这样完成这个聚合:
var graph = new google.visualization.PieChart();
var aggregatedData = google.visualization.data.group(
data,
[0],
[
"column": 2,
"aggregation": google.visualization.data.sum,
"type": "number"
]
);
graph.draw(aggregatedData);
但我不知道如何在仪表板中执行此聚合
【问题讨论】:
【参考方案1】:保存对表格图表的引用,
使用其'ready'
事件绘制饼图
只要过滤器发生变化,'ready'
事件就会触发
您可以从表格图表中拉出过滤后的数据表格, 用于您的聚合
它将与用于绘制仪表板的数据表相同, 应用任何过滤器
请务必指定 'ready'
事件,
在绘制仪表板之前
类似下面的 sn-p...
var chartTable = new google.visualization.ChartWrapper(
"chartType": "Table",
"containerId": "...",
"options": ...
);
var dashboard = new google.visualization.Dashboard();
dashboard.bind([
new google.visualization.ControlWrapper(
"controlType": "CategoryFilter",
"containerId": "...",
"options":
"filterColumnIndex": 1
);
], [
chartTable
]);
google.visualization.events.addListener(chartTable, 'ready', function ()
var graph = new google.visualization.PieChart(needContainer);
var aggregatedData = google.visualization.data.group(
chartTable.getDataTable(),
[0],
[
"column": 2,
"aggregation": google.visualization.data.sum,
"type": "number"
]
);
graph.draw(aggregatedData);
);
dashboard.draw(data);
注意:仪表板还有一个'ready'
事件,
但它会为每个绑定控件和图表触发,
所以在这种情况下两次
您还需要从某个地方提取过滤后的数据表, 因此保存对表格图表的引用...
【讨论】:
以上是关于将 data.group 用于 Google 可视化仪表板的主要内容,如果未能解决你的问题,请参考以下文章
将数据从 Google 表格流式传输到 BigQuery 以在 Tableau 中进行可视化
将 Google 可视化折线图 hAxis 原点设置为其初始值
Google 可视化库 Facets:如何将 python 模块“facets”输出 html 离线保存到本地驱动器?