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 个孩子', '2 个孩子', '3 个孩子'],

[1, 2, 4]

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

4

2 回答 2

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]

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

这是示例代码：

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()创建一个函数，因为该组的输出将是一个数字。您可以将其与上面的转置函数混合使用，因为您已经在处理数据表。

于 2013-01-25T05:04:03.073 回答
0

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

var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', 'options': { 'filterColumnLabel': 'Performance', 'ui': { 'labelStacking': '垂直'，'allowTyping'：假，'allowMultiple'：真}}}）；

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

于 2013-01-25T20:58:00.823 回答