3

这里我有一个简单的演示：http: //jsfiddle.net/36yve/

function drawVisualization() {
  // Prepare the data
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Gender', 'Age', 'Donuts eaten'],
    ['Michael' , 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8],
    ['Miranda', 'Female', 33, 6]
  ]);

  // Define a slider control for the Age column.
  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Age',
    'ui': {'labelStacking': 'vertical'}
    }
  });

  // Define a category picker control for the Gender column
  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'Gender',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });

  // Define a Pie chart
  var pie = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart1',
    'options': {
      'width': 300,
      'height': 300,
      'legend': 'none',
      'title': 'Donuts eaten per person',
      'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
      'pieSliceText': 'label'
    },
    // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
    // from the 'data' DataTable.
    'view': {'columns': [0, 3]}
  });

  // Define a table
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '300px'
    }
  });

  // Create a dashboard
  new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Establish bindings, declaring the both the slider and the category
      // picker will drive both charts.
      bind([slider, categoryPicker], [pie, table]).
      // Draw the entire dashboard.
      draw(data);
}

一切正常。

我想知道什么？

如何在表格末尾添加行以求和列 [Age and Donuts eat] 以及在使用 filters-controls 时如何工作？

这个问题有什么解决办法吗？

4

1 回答 1

4

您需要从仪表板中取出表格并为 PieChart 创建一个“就绪”事件处理程序，该处理程序获取图表使用的数据，聚合它以获得总计，构建一个包含总计的新 DataTable，并使用绘制表格新数据：

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Name', 'Gender', 'Age', 'Donuts eaten'],
        ['Michael' , 'Male', 12, 5],
        ['Elisa', 'Female', 20, 7],
        ['Robert', 'Male', 7, 3],
        ['John', 'Male', 54, 2],
        ['Jessica', 'Female', 22, 6],
        ['Aaron', 'Male', 3, 1],
        ['Margareth', 'Female', 42, 8],
        ['Miranda', 'Female', 33, 6]
    ]);

    // Define a slider control for the Age column.
    var slider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Age',
            'ui': {'labelStacking': 'vertical'}
        }
    });

    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Gender',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    });

    // Define a Pie chart
    var pie = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'chart1',
        'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'title': 'Donuts eaten per person',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'label'
        },
        // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
        // from the 'data' DataTable.
        'view': {'columns': [0, 3]}
    });

    // Define a table
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart2',
        'options': {
            'width': '300px'
        }
    });

    google.visualization.events.addListener(pie, 'ready', function () {
        var dt = pie.getDataTable().toDataTable();
        var totals = google.visualization.data.group(dt, [{
            type: 'number',
            column: 0,
            // make all values the same
            modifier: function () {return 0;}
        }], [{
            type: 'number',
            column: 2,
            aggregation: google.visualization.data.sum
        }, {
            type: 'number',
            column: 3,
            aggregation: google.visualization.data.sum
        }]);
        dt.addRow(['Total', null, totals.getValue(0, 1), totals.getValue(0, 2)]);
        table.setDataTable(dt);
        table.draw();
    });

    // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Establish bindings, declaring the both the slider and the category
    // picker will drive both charts.
    bind([slider, categoryPicker], [pie]).
    // Draw the entire dashboard.
    draw(data);
}

请参阅此处的示例：http: //jsfiddle.net/asgallant/x8f7J/

于 2014-05-13T19:09:55.557 回答