使用一个控制过滤器同时控制两个谷歌图表 - 可能吗？

Question

我正在尝试将两种类型的图表添加到一个仪表板中并按国家/地区过滤它们，如下所示：

显示的初始值应该是针对欧洲的，通过

完成

'state': {'selectedValues': ['Europe']}

图表 1 是一个饼图，应该显示欧洲和每个国家/地区的两个变量之间的拆分，比如 2012 年，如下所示：

['Country',  'Speciality', 'Amount'],
['Europe', 'XYZ', 20441],
['Europe', 'ABC', 5355],
['Austria', 'XYZ', 477],
['Austria', 'ABC', 153],         
['BeNeLux', 'XYZ', 1512],
['BeNeLux', 'ABC', 298],
['France', 'XYZ', 3080],
['France', 'ABC', 792],

等等

图表 2 应引用相同的两个变量，但添加了季度，即 Q1、Q2、Q3 和 Q4。理想情况下，我希望将其作为 100% 堆积柱形图。列是 Q1 Q2 Q3 Q4。

问题是：如果我选择法国，如何将两个图表添加到仪表板并让控件过滤两个图表？

谢谢

Answer 1

将过滤器绑定到两个图表很容易，如the documentation says：

  // One-to-many binding where 'ageSelector' drives two charts.
  dashboard.bind(agePicker, [ageVsSalaryScatterPlot, ageBarChart]);

这意味着如果您选择“欧洲”，它将更改两个图表的过滤器。从您的问题来看，您似乎不太清楚如何实际设置它（因为您的数据格式不正确）。

你需要 5 样东西：

1. DataTable 包含所有图表的信息（因此，如果您想要季度信息，它也需要在 DataTable 中
2. Dashboard 包含图表和控件的对象
3. ChartWrapper 饼图对象。
4. ChartWrapper 堆积柱形图对象
5. ControlWrapper 选择器对象

数据表

目前您的数据只有 3 列：

['Country',  'Speciality', 'Amount'],
['Europe', 'XYZ', 20441],
['Europe', 'ABC', 5355],
['Austria', 'XYZ', 477],
['Austria', 'ABC', 153],         
['BeNeLux', 'XYZ', 1512],
['BeNeLux', 'ABC', 298],
['France', 'XYZ', 3080],
['France', 'ABC', 792],

由于您还需要宿舍，因此您也需要添加该信息。

['Country',  'Speciality', 'Amount', 'Q1', 'Q2', 'Q3', 'Q4'],
['Europe', 'XYZ', 20441, 1, 2, 3, 4],
['Europe', 'ABC', 5355, 1, 2, 3, 4],
['Austria', 'XYZ', 477, 1, 2, 3, 4],
['Austria', 'ABC', 153, 1, 2, 3, 4],         
['BeNeLux', 'XYZ', 1512, 1, 2, 3, 4],
['BeNeLux', 'ABC', 298, 1, 2, 3, 4],
['France', 'XYZ', 3080, 1, 2, 3, 4],
['France', 'ABC', 792, 1, 2, 3, 4],

仪表板对象

仪表板对象指向一个<div> 元素，该元素包含图表和控件的其他<div> 元素。所以在你的情况下，类似：

然后您使用如下代码创建仪表板：

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

图表包装器

所以你有两个图表，你需要创建两个单独的包装器。包装器基本上提供了需要创建图表的所有详细信息：

• 它在页面上的位置（<div>）
• 它将从哪里获取数据
• 它将使用什么类型的图表/选项

饼图仅使用第 0、1、2 列，因此您设置对象的“视图”属性以将数据限制在这些列中。

对堆叠柱形图执行相同的操作，使用第 0、1、3、4、5、6 列。

不过，两个图表都需要从同一个DataTable 获取数据，否则过滤一个图表不会影响另一个图表（过滤器将应用于 DataTable，因此如果您有两个图表，您只能在一次）。

ControlWrapper

与 ChartWrapper 一样，您需要创建一个 ControlWrapper 对象，其中包含有关您使用的控件的所有详细信息。

设置完所有对象后，您可以绘制仪表板并将控件绑定到两个图表，代码位于此答案的顶部。

参考文献

如果您仍然感到困惑，请尝试使用Google Playground 了解仪表板的工作原理。