使用带有两个表格的谷歌图表的仪表板答案

【问题标题】：Dashboard using google charts with two tables使用带有两个表格的谷歌图表的仪表板
【发布时间】：2022-03-26 06:37:14
【问题描述】：

我正在尝试在我的应用程序中创建一个带有柱形图和一些类别过滤器的仪表板，我有这样的数据：

['First name', 'City', 'Number of children'],
['Michael' , 'London', 2],
['Elisa', 'Paris', 3],
['Robert', 'Moskov', 3],
['John','LA', 1],
['Jessica', 'Kyiv', 3],
['Aaron', 'New York', 2],
['Margareth','Tokyo', 3 ]

但我必须可视化的不是这些数据，而是一个包含相同数量孩子的总人数的表格：

['1 个孩子', '2 个孩子', '3 个孩子'],

[1, 2, 4]

因此，当我对第一个表应用一些过滤器时，必须自动重新计算第二个表中的数据。我可以以某种方式将这些表和控件绑定在一起吗？或者我必须为每个过滤器放置一些处理程序并手动重新计算数据？

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

我假设给定您的数据：

['First name', 'City', 'Number of children'],
['Michael' , 'London', 2],
['Elisa', 'Paris', 3],
['Robert', 'Moskov', 3],
['John','LA', 1],
['Jessica', 'Kyiv', 3],
['Aaron', 'New York', 2],
['Margareth','Tokyo', 3 ]

您想按第二列（孩子的数量）进行分组以获得此结果：

[1, 1],
[2, 2],
[3, 4]

您可以使用数据表的group by 聚合功能轻松完成此操作。

这里是示例代码：

function drawJoin() {
  var dt = google.visualization.arrayToDataTable([
    ['First name', 'City', 'Number of children'],
    ['Michael' , 'London', 2],
    ['Elisa', 'Paris', 3],
    ['Robert', 'Moskov', 3],
    ['John','LA', 1],
    ['Jessica', 'Kyiv', 3],
    ['Aaron', 'New York', 2],
    ['Margareth','Tokyo', 3 ]
  ]);

  // Group dt by column 2, and count number of entries for each.
  var grouped_dt = google.visualization.data.group(
      dt, [2],
      [{'column': 0, 'aggregation': google.visualization.data.count, 'type': 'number'}]);


  var table = new google.visualization.Table(document.getElementById('table'));
  table.draw(dt, null);

  var grouped_table = new google.visualization.Table(document.getElementById('grouped_table'));
  grouped_table.draw(grouped_dt, null);
}

欢迎在Google Playground 上试用（只需复制粘贴上面的代码）。

您可以按原样绘制图表，也可以使用 javascript 函数转置它以转录数据表中的行/列。

所以你应该使用原始数据表上的控件进行过滤，然后创建一个分组函数，并在图表中绘制分组表。

如果您希望标签读取“1 个孩子”而不仅仅是数字 1，那么您需要使用 SetFormattedValue() 创建一个函数，因为该组的输出将是一个数字。您可以将其与上面的转置函数混合使用，因为您已经在处理数据表了。

【讨论】：

非常感谢您的回答，我不知道我是如何错过数据操作部分的，因为我在那个网站上花了一些时间玩图表......
对不起，我还有一个问题，你能帮我吗？因为实在是太大了，不想单独问，第一个问题我就问了，看下面我的留言

【解决方案2】：

假设我有相同的数据，将它们分组并根据分组数据构建柱形图。现在我想添加一些过滤器。我可以轻松地为我在分组数据中使用的列添加任何过滤器，但是当我为另一列添加一些过滤器时，我收到错误“无效的列标签”。例如，如果我添加：

var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', '选项'： { 'filterColumnLabel': '性能', 'ui'：{ 'labelStacking': '垂直', “允许打字”：假， 'allowMultiple'：真 } } });

一切都会好起来的，但我的目标是为“城市”和“名字”列添加过滤器，更改它们的值应该会影响我的带有分组数据的柱形图。如果这可能吗？

【讨论】：