google-visualization - 带有分组数据过滤器的 Google 仪表板 - 如何绘制分组数据图表

Question

我希望创建一个带有过滤功能的 Google 图表 API 仪表板，但我想根据分组数据绘制数据图表。例如，我可以创建如下数据表:

salesman  cust_age  cust_sex  quantity
Joe       21        Male      3
Joe       30        Female    10
Suzie     40        Female    2
Dave      15        Female    5
Dave      30        Male      10

我可以适本地创建一个仪表板，它创建两个控件(用于 cust_age 和 cust_sex)和任意数量的输出图形和表格，所有这些都从外部数据源中提取 - 这是非常有用的东西，请参阅 http://code.google.com/apis/chart/interactive/docs/gallery/controls.html

我遇到的问题是如何按分组值显示所有图表。以饼图为例，在没有任何过滤器的情况下，饼图有 5 个切片(Joe、Joe、Suzie、Dave、Dave)——我只想看到三个(Joe、Suzie Dave)。当然，当应用控件时，一切都应该更新。

换句话说，过滤器应该作用于原始数据表，但图表应该基于分组数据表。

我猜我们可以使用分组功能:
http://code.google.com/apis/ajax/playground/?type=visualization#group
但是我似乎无法将过滤器绑定(bind)到更大的数据表，更新分组表，然后根据分组表绘制图表。

有什么想法吗？

Answer 1

我找到了一种解决方法，您应该使用不带仪表板的 chartWrapper，因此您可以将 dataTable 作为参数传递:

var $pieChart  = new google.visualization.ChartWrapper({
  'chartType': 'PieChart',
  'containerId': 'pie_chart',
  'options': {
    'width': 300,
    'height': 300,
  },
  //group the data for the pie chart
  'dataTable' : google.visualization.data.group($dataTable, [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
});  
 $pieChart.draw();
 $tableWrapper =  new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': 'table_data'
});
var $genderPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'gender_filter',
  'options': {
    'filterColumnIndex': '2',
    'useFormattedValue' : true,
    'ui': {
      'allowTyping': false,
      'allowMultiple': false,
      'labelStacking': 'vertical'
    }
  }      
});
new google.visualization.Dashboard(document.getElementById('table_dashboard')).
   bind([$genderPicker], [ $tableWrapper]).
   draw($dataTable);

然后，您应该向控件添加回调，以便每当控件更改时，仪表板外部的图表都会更新，例如手动绑定(bind)，假设 cust_sex 的控件是 $genderPicker，ChartWrapper 表对象是 $tableWrapper:

google.visualization.events.addListener($genderPicker, 'statechange',
function(event) {
  // group the data of the filtered table and set the result in the pie chart.
  $pieChart.setDataTable( google.visualization.data.group(
    // get the filtered results
    $tableWrapper.getDataTable(),
    [0],
    [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
  ));
  // redraw the pie chart to reflect changes
  $pieChart.draw();
});

结果:无论何时选择男性、女性或两者，饼图都会反射(reflect)按名称分组的过滤结果。希望它对某人有所帮助，并对我的英语不好感到抱歉。