1

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

显示的初始值应适用于欧洲，通过 

'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。

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

谢谢

4

1 回答 1

1

正如文档所述，将过滤器绑定到两个图表很容易：

  // 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，因此如果您有两个图表，则一次只能更改一个）。

控制包装器

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

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

参考

如果您仍然感到困惑，请使用Google Playground for Dashboards 来了解它的工作原理。

于 2013-05-24T00:23:38.167 回答