Javascript 在谷歌图表的仪表板中使用过滤器聚合数据

//过滤数据的谷歌图表

     google.charts.load('visualization', '1', {packages: ['controls']});
      google.charts.setOnLoadCallback(drawDashboard);

      function drawDashboard() {

        // Create our data table.
        var data = new google.visualization.DataTable();
      data.addColumn('string', 'Category');
      data.addColumn('string', 'Month');
      data.addColumn('number', 'coverage');
      data.addColumn('number', 'coverage_change');
      data.addColumn('number', 'depth');
      data.addColumn('number', 'depth_change');
      data.addColumn('number', 'breadth');
      data.addColumn('number', 'breadth_change');
      data.addRows([
        ['Restaurants','Jan',0.177,0,2.489329,0,112.019805,0],
        ['Hotels','Jan',0.3411,0,1.216445,0,52.307135,0],
        ['Movies','Jan',0.4748,0,0.312464,0,9.686384,0],
        ['Attractions','Jan',0,0,0,0,0,0],
        ['Destinations','Jan',0,0,0,0,0,0],
        ['Events','Jan',0,0,0,0,0,0],
        ['All','Jan',0.2092,0,4.018238,0,174.013324,0],
        ['Restaurants','Feb',0.177,0,2.489329,0,112.019805,0],
        ['Hotels','Feb',0.3411,0,1.216445,0,52.307135,0],
        ['Movies','Feb',0.4748,0,0.312464,0,9.686384,0],
        ['Attractions','Feb',0,0,0,0,0,0],
        ['Destinations','Feb',0,0,0,0,0,0],
        ['Events','Feb',0,0,0,0,0,0],
        ['All','Feb',0.2092,0,4.018238,0,174.013324,0]


      ]);



        // Create a dashboard.
        var dashboard = new      google.visualization.Dashboard(document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var filter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Category'},
            'ui': {
              'allowTyping': false,
              'allowMultiple': false,
              'labelStacking': 'vertical'
            }
        });

        // Create a pie chart, passing some options
        var Chart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart1_div',
          'options': {
            'width': 1000,
            'height': 300},
            'view': {'columns': [1,2]},
            'dataTable' : google.visualization.data.group(data, [0],
                [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
          });


         var Chart2 = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart2_div',
          'options': {
            'width': 1000,
            'height': 300,
            curveType:'function'},
            'view': {'columns': [1,3]} 
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.

         dashboard.bind(filter, [Chart2,Chart]);
       // Draw the dashboard.
        dashboard.draw(data);
      }
  </script>

google.charts.load（'visualization'，'1'，{packages:['controls']}）；
google.charts.setOnLoadCallback（drawDashboard）；
函数drawDashboard（）{
//创建我们的数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Category'）；
data.addColumn（'string'，'Month'）；
data.addColumn（'number'，'coverage'）；
data.addColumn（'number'、'coverage_change'）；
data.addColumn（'number'，'depth'）；
data.addColumn（'number'，'depth_change'）；
data.addColumn（'number'，'width'）；
data.addColumn（'number'，'width_change'）；
data.addRows([
[‘餐厅’、‘一月’、0.177,0,2.489329,0112.019805,0]，
[Hotels'，'Jan'，0.3411,0,1.216445,0,52.307135,0]，
[Movies'，'Jan'，0.4748,0,0.312464,0,9.686384,0]，
[‘景点’、‘一月’、0,0,0,0,0,0]，
[‘目的地’、‘一月’、0,0,0,0,0,0]，
['Events'，'Jan'，0,0,0,0,0]，
[All'，'Jan'，0.2092,0,4.018238,0174.013324,0]，
[餐厅'，'Feb'，0.177,0,2.489329,0112.019805,0]，
[Hotels'，'Feb'，0.3411,0,1.216445,0,52.307135,0]，
[Movies'，'Feb'，0.4748,0,0.312464,0,9.686384,0]，
[‘景点’、‘二月’、0,0,0,0,0,0]，
[‘目的地’、‘二月’、0,0,0,0,0,0]，
['Events'，'Feb'，0,0,0,0,0,0]，
[All'，Feb'，0.2092,0,4.018238,0174.013324,0]
]);
//创建一个仪表板。
var dashboard=newgoogle.visualization.dashboard（document.getElementById（'dashboard_div'））；
//创建一个范围滑块，传递一些选项
var filter=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“filter_div”，
“选项”：{
'filterColumnLabel'：'Category'}，
“用户界面”：{
“allowTyping”：false，
“allowMultiple”：false，
“标签固定”：“垂直”
}
});
//创建饼图，传递一些选项
var Chart=new google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱船”：chart1_div，
“选项”：{
“宽度”：1000，
“高度”：300}，
'视图'：{'列'：[1,2]}，
“dataTable”：google.visualization.data.group（数据，[0]，
[{'column'：2，“聚合”：google.visualization.data.sum，“type'：'number'}]）
});
var Chart2=新的google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱运输”：chart2_div，
“选项”：{
“宽度”：1000，
‘高度’：300，
curveType:'function'}，
'视图'：{'列'：[1,3]}
});
//建立依赖关系，声明“筛选器”驱动“pieChart”，
//这样，饼图将只显示通过的条目
//给定选定的滑块范围。
绑定（过滤器，[Chart2，Chart]）；
//绘制仪表板。
仪表盘.绘图（数据）；
}

---

//我能够用相同的过滤器得到两个图表。但这些值并不是聚合的。我使用了google.visualization.data.group函数。。但是，它似乎不起作用。

每个仪表板只能使用一个数据表

因此，当绘制仪表板时，

Chart

上的数据表将被忽略

因为它包含在仪表板中

---

为了使用仪表板中的聚合和过滤数据绘制图表

使用

Chart2

，
当

'ready'

事件触发时

由于

过滤器

---

请参阅以下工作片段

google.charts.load（'current'{
回调：drawDashboard，
包：['controls']
});
函数drawDashboard（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Category'）；
data.addColumn（'string'，'Month'）；
data.addColumn（'number'，'coverage'）；
data.addColumn（'number'、'coverage_change'）；
data.addColumn（'number'，'depth'）；
data.addColumn（'number'，'depth_change'）；
data.addColumn（'number'，'width'）；
data.addColumn（'number'，'width_change'）；
data.addRows([
[‘餐厅’、‘一月’、0.177,0,2.489329,0112.019805,0]，
[Hotels'，'Jan'，0.3411,0,1.216445,0,52.307135,0]，
[Movies'，'Jan'，0.4748,0,0.312464,0,9.686384,0]，
[‘景点’、‘一月’、0,0,0,0,0,0]，
[‘目的地’、‘一月’、0,0,0,0,0,0]，
['Events'，'Jan'，0,0,0,0,0]，
[All'，'Jan'，0.2092,0,4.018238,0174.013324,0]，
[餐厅'，'Feb'，0.177,0,2.489329,0112.019805,0]，
[Hotels'，'Feb'，0.3411,0,1.216445,0,52.307135,0]，
[Movies'，'Feb'，0.4748,0,0.312464,0,9.686384,0]，
[‘景点’、‘二月’、0,0,0,0,0,0]，
[‘目的地’、‘二月’、0,0,0,0,0,0]，
['Events'，'Feb'，0,0,0,0,0,0]，
[All'，Feb'，0.2092,0,4.018238,0174.013324,0]
]);
var dashboard=newgoogle.visualization.dashboard（document.getElementById（'dashboard_div'））；
var filter=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“filter_div”，
“选项”：{
'filterColumnLabel'：'Category'}，
“用户界面”：{
“allowTyping”：false，
“allowMultiple”：false，
“标签固定”：“垂直”
}
});
var Chart2=新的google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱运输”：chart2_div，
“选项”：{
“宽度”：1000，
‘高度’：300，
curveType:'function'}，
'视图'：{'列'：[1,3]}
});
google.visualization.events.addListener（图表2，'ready'，函数（）{
var Chart=new google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱船”：chart1_div，
“选项”：{
“宽度”：10