如何在Google Charts条形图中绘制平均列？

Question

我正在尝试使用CategoryFilters创建GoogleCharts Bar Chart，它还显示每个类别/组的average。如何计算和显示平均值的其他条形/列？

类似这样的例子（示例）-> https://ibb.co/wQksgGN

我已经尝试在[图表]选项部分中使用trendlines，但它们只是线条，而不是条形/列，并且似乎不适用于我的代码。

trendlines: { 3: {}},

到目前为止我的所有代码-> https://jsfiddle.net/tototatutu/ktwr5jap/5/

Answer 1

因为您需要在绘制图表之前计算平均值，您将无法使用仪表板/绑定功能。

相反，您需要执行平均值计算并绘制图表，在控件的状态更改事件中。

首先，我们将数据表分配给控件，添加事件侦听器，然后绘制它们。

// Define category pickers for 'KPI', 'Peer Group'
var kpiPicker = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'control1',
  dataTable: data,               // <-- add data table
  options: {
    filterColumnLabel: 'KPI',
    ui: {
      labelStacking: 'vertical',
      allowTyping: false,
      allowMultiple: false,
      caption: 'Choose KPI',
      sortValues: true,
      allowNone: false
  }}
});

var regionPicker = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'control2',
  dataTable: data,               // <-- add data table
  options: {
    filterColumnLabel: 'Peer Group',
    ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        caption: 'Choose Peer Group',
        sortValues: true,
        allowNone: false
    }}
});

// Add state change event listeners
google.visualization.events.addListener(kpiPicker, 'statechange', stateChange);
google.visualization.events.addListener(regionPicker, 'statechange', stateChange);

// Draw controls
kpiPicker.draw();
regionPicker.draw();

接下来，在状态更改事件中，我们创建一个数据视图并根据所选类别过滤数据。

// Build data view, filter based on category filters
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{
  column: 0,
  value: kpiPicker.getState().selectedValues[0]
}, {
  column: 1,
  value: regionPicker.getState().selectedValues[0]
}]));

然后使用group方法查找视图的平均值。

// Group data, calculate average
var groupData = google.visualization.data.group(
  view,
  [{column: 0, type: 'string', modifier: function () {return 'Average';}}],
  [{
    column: 3,
    type: 'number',
    label: 'Average',
    aggregation: google.visualization.data.avg
  }]
);

然后，我们将数据视图转换回数据表，添加平均行并进行排序。

// Convert view to data table, add average row, sort
view = view.toDataTable();
view.addRow([kpiPicker.getState().selectedValues[0], regionPicker.getState().selectedValues[0], 'Peer Group Average', groupData.getValue(0, 1), '#757575']);
view.sort({column: 3, desc: true});

之后，我们将数据视图分配给图表并绘制...

// Draw charts
barChart.setDataTable(view);
table.setDataTable(view);
barChart.draw();
table.draw();

请参阅以下工作片段以获取完整示例...

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  // Prepare the data
  var data = google.visualization.arrayToDataTable([
    ['KPI', 'Peer Group', 'Products', 'Amount', { role: 'style' }],
    ['KPI 1', 'EMEA', 'Product A', 4, '#003E7D'],
    ['KPI 1', 'EMEA', 'Product B', 6, '#003E7D'],
    ['KPI 1', 'EMEA', 'Product C', 2, '#F46B1B'],
    ['KPI 1', 'Americas', 'Product A', 3, '#003E7D'],
    ['KPI 1', 'Americas', 'Product B', 8, '#003E7D'],
    ['KPI 1', 'Americas', 'Product C', 7, '#F46B1B'],
    ['KPI 2', 'EMEA', 'Product A', 9, '#003E7D'],
    ['KPI 2', 'EMEA', 'Product B', 1, '#003E7D'],
    ['KPI 2', 'EMEA', 'Product C', 4, '#F46B1B'],
    ['KPI 2', 'Americas', 'Product A', 4, '#003E7D'],
    ['KPI 2', 'Americas', 'Product B', 6, '#003E7D'],
    ['KPI 2', 'Americas', 'Product C', 7, '#F46B1B']
  ]);

  // Define category pickers for 'KPI', 'Peer Group'
  var kpiPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control1',
    dataTable: data,               // <-- add data table
    options: {
      filterColumnLabel: 'KPI',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        caption: 'Choose KPI',
        sortValues: true,
        allowNone: false
    }}
  });

  var regionPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control2',
    dataTable: data,               // <-- add data table
    options: {
      filterColumnLabel: 'Peer Group',
      ui: {
          labelStacking: 'vertical',
          allowTyping: false,
          allowMultiple: false,
          caption: 'Choose Peer Group',
          sortValues: true,
          allowNone: false
      }}
  });

  // Define a bar chart to show 'Amount' data
  var barChart = new google.visualization.ChartWrapper({
    chartType: 'BarChart',
    containerId: 'chart1',
    options: {
      width: 480,
      height: 300,
      legend: 'none',
      bar: {
          groupWidth: '50%'
      },
      animation: {
          duration: 600,
      },
      hAxis: {
            minValue: 0,
            maxValue: 1,
            ticks: [0, 2, 4, 6, 8, 10],
            gridlines: {
               color: '#F46B1B'
            },
            textStyle: {
               color: '#003E7D',
               fontSize: 15,
               fontName: 'Montserrat',
               bold: true,
            },
         },
      vAxis: {
               textStyle: {
                  fontName: 'Montserrat',
                  color: '#003E7D',
                  fontSize: 11,
                  bold: true
               },
            },
    },
    // Configure the barChart to use columns 2 (Products), 3 (Amount), and 4 (style/colors)
    'view': {'columns': [2, 3, 4]}
  });

  // Define a table.
  // The table shows whatever is selected by the category pickers. It's here
  // just for reference and debugging.
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '400px'
    },
    'view': {'columns': [0, 1, 2, 3]}
  });

  // Add state change event listeners
  google.visualization.events.addListener(kpiPicker, 'statechange', stateChange);
  google.visualization.events.addListener(regionPicker, 'statechange', stateChange);

  // Draw controls
  kpiPicker.draw();
  regionPicker.draw();

  // Draw charts
  stateChange();

  function stateChange() {
    // Build data view, filter based on category filters
    var view = new google.visualization.DataView(data);
    view.setRows(view.getFilteredRows([{
      column: 0,
      value: kpiPicker.getState().selectedValues[0]
    }, {
      column: 1,
      value: regionPicker.getState().selectedValues[0]
    }]));

    // Group data, calculate average
    var groupData = google.visualization.data.group(
      view,
      [{column: 0, type: 'string', modifier: function () {return 'Average';}}],
      [{
        column: 3,
        type: 'number',
        label: 'Average',
        aggregation: google.visualization.data.avg
      }]
    );

    // Convert view to data table, add average row, sort
    view = view.toDataTable();
    view.addRow([kpiPicker.getState().selectedValues[0], regionPicker.getState().selectedValues[0], 'Peer Group Average', groupData.getValue(0, 1), '#757575']);
    view.sort({column: 3, desc: true});

    // Draw charts
    barChart.setDataTable(view);
    table.setDataTable(view);
    barChart.draw();
    table.draw();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control1" style='margin-top: 50px;'></div>
        <div id="control2" style='margin-top: 10px;'></div>
      </td>
      <td style='width: 600px;'>
        <div style="float: left; margin-top: 50px;" id="chart1"></div>
        <div style="float: left; margin-top: 50px;" id="chart2"></div>
      </td>
    </tr>
  </table>
</div>

---

NOTE： https://www.google.com/jsapi应该不再用于加载Google图表，它是old版本。

https://www.gstatic.com/charts/loader.js应该代替。

这只会更改load语句。

请参见上面的代码段...