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

|| 我希望创建一个具有过滤功能的Google Charts 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 但是我似乎无法将过滤器绑定到更大的数据表，更新分组表，然后根据分组表绘制图表。有什么想法吗？

已邀请:

4 个回复

穗揣

我找到了一种解决方法，应该在没有仪表板的情况下使用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);

然后，您应该向控件添加回调，以便每当控件更改仪表板外部的图表时都将进行更新，例如手动绑定，我们假设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();
});

结果：无论您选择男性，女性还是两者同时选择，饼图都会反映按名称分组的过滤结果。希望它对某人有帮助，并为我的英语不好对不起。

死搭胯

另一种方法是使用仪表板对象的'ready \'事件，然后根据对仪表板主表进行的分组在其中创建图表或表。例如：

//create datatable, filter elements and chart elements for the the dashboard then:

dash=new google.visualization.Dashboard(document.getElementById(elId));
google.visualization.events.addListener(dash, \'ready\', function() {
        //redraw the barchart with grouped data
        //console.log(\"redraw grouped\");
        var dt=mainTable.getDataTable();
        var grouped_dt = google.visualization.data.group(
                          dt, [0],
                          [{\'column\': 7, \'aggregation\': google.visualization.data.sum, \'type\': \'number\'}]);

        var mainChart = new google.visualization.ChartWrapper({
              \'chartType\': \'ColumnChart\',
              \'containerId\': \'barChart\',
              \'options\': {
                \'height\':500,
                \'chartArea\':{\'left\':200}
              },
              //view columns from the grouped datatable
              \'view\': {\'columns\': [0, 1]},
              \'dataTable\':grouped_dt
            });
        mainChart2.draw();
    });

dash.bind(
        [lots,of,filter,elements], 
        [lots,of,chart,elements]
    );
dash.draw(data)

炉挤仙挟

经过长时间的研发，我找到了解决该问题的方法。为了解决此问题，我使用了两个事件侦听器，其中一个是ready事件，另一个是statechange事件，因为

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

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

在这里找到我的初始（问题）样本，在这里找到固定（解决）样本

纫合峭

阅读此主题：如何不显示数据表（至少阅读前两篇文章-其余部分仅在处理大型数据集时才真正重要）。基本上，您必须使用完全对用户隐藏的中间图表（表是一个不错的选择，因为它们相对于大多数图表而言，写入和渲染速度相对较快，并且占用的内存更少）。您将类别选择器绑定到仪表板中的此图表。然后，为选择器的\“ statechange \”事件设置一个事件处理程序，该事件处理程序获取数据，将其分组到新的DataTable中，并根据分组的数据绘制PieChart。

要回复问题请先登录或注册

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

4 个回复

发起人

dashboard

google_visualization

问题状态

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

与内容相关的链接

4 个回复

发起人

dashboard

google_visualization

问题状态