Question

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

['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]

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

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

Answer 2

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

var categoryPicker = new google.visualization.ControlWrapper（{ 'controlType'：'CategoryFilter'， 'containerId'：'control2'， 'options'：{ 'filterColumnLabel'：'表现'， 'ui'：{ 'labelStacking'：'vertical'， 'allowTyping'：false， 'allowMultiple'：是的 } } }）;

一切都会好的，但我的目标是为列'City'和'First name'添加过滤器，更改它们的值应该会对我的柱形图产生分组数据。如果这可能吗？

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

2 个答案: