Charts 如何在谷歌图表条形图中绘制平均列？

我正在尝试创建一个带有CategoryFilters的GoogleCharts条形图，其中还显示了每个类别/组的平均值。如何计算并显示平均值的附加条/列

类似这样的内容（示例）-->

我已经尝试在图表选项部分中使用，但它们只是行，而不是条/列，而且似乎与我的代码不兼容

trendlines: { 3: {}},

---

这里是我迄今为止的所有代码-->

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

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

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

// 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();

然后使用

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'{
包：['controls']
}).然后（函数（）{
//准备数据
var data=google.visualization.arrayToDataTable([
['KPI'、'Peer Group'、'Products'、'Amount'、{role:'style'}]，
[‘KPI 1’、‘EMEA’、‘产品A’、‘4’、‘003E7D’]，
['KPI 1'，'EMEA'，'Product B'，6'，'003E7D']，
['KPI 1'、'EMEA'、'产品C'，2'，#F46B1B']，
['KPI 1'、'Americas'、'Product A'、'3'、'003E7D']，
['KPI 1'、'Americas'、'Product B'，8'#003E7D']，
[“KPI 1”、“美洲”、“产品C”、“7”、“F46B1B”]，
[‘KPI 2’、‘EMEA’、‘产品A’、‘9’、‘003E7D’]，
['KPI 2'、'EMEA'、'Product B'，1'、'003E7D']，
['KPI 2'、'EMEA'、'产品C'，4'，#F46B1B']，
['KPI 2'、'Americas'、'Product A'，4'、'003E7D']，
['KPI 2'、'Americas'、'Product B'，6'、'003E7D']，
[“KPI 2”、“美洲”、“产品C”、“7”、“F46B1B”]
]);
//为“KPI”、“对等组”定义类别选择器
var kpicker=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
集装箱：“control1”，
dataTable:data，//这太神奇了–非常感谢@WhiteHat！它可以工作！我不太熟悉“google.visualization.data.group”方法的工作原理–我将尝试阅读更多关于它的内容。最近刚开始使用google图表和JavaScript：）
// Draw charts
barChart.setDataTable(view);
table.setDataTable(view);
barChart.draw();
table.draw();