javascript - Google ComboChart 中当前数据的平均线

Question

大家好，目前正在使用组合图表，我正在尝试获取所有值的平均值并在图表上显示一条线来表示每个代理的平均值。

我进行了一些挖掘，我确实尝试使用一种资源，但它抛出了错误，我一直在努力寻找解决方案。

下面是一个 JSFiddle 示例，展示了我的图表的外观，但我需要为每个代理的所有值绘制一条平均线，并为每个代理显示一条平均线。

JSFiddle

下面是 JS Fiddle 的 JS 代码:

jQuery(function($) {
  google.charts.load('current', {
    callback: drawChartAverage,
    packages: ['corechart']
  });

  function drawChartAverage() {
    var result = [
      ['Agents', 'Minutes'],
      ['1', 44],
      ['2', 22],
      ['3', 11],
      ['4', 34]];
    var options = {
      title: 'Average Minutes cross Agents',
      vAxis: {
        title: 'Minutes'
      },
      hAxis: {
        title: 'Agent'
      },
      seriesType: 'bars',
      series: {
        1: {
          type: 'line'
        }
      }
    };
    var chartdata = new google.visualization.arrayToDataTable(result);
    var chartAvg = new google.visualization.ComboChart(document.getElementById('chartAvg'));
    chartAvg.draw(chartdata, options);
  }
})

我需要它看起来像 example我曾尝试使用但并不喜欢这样做。

但是 at 让您了解我正在尝试做什么!

Answer 1

使用提供的示例...

google.charts.load('44', {
  callback: drawChartAverage,
  packages: ['corechart']
});

function drawChartAverage() {
  var result = [
    ['Agents', 'Minutes'],
    ['1', 44],
    ['2', 22],
    ['3', 11],
    ['4', 34]
  ];
  var chartdata = new google.visualization.arrayToDataTable(result);

  // Create a DataView that adds another column which is all the same (empty-string) to be able to aggregate on.
  var viewWithKey = new google.visualization.DataView(chartdata);
  viewWithKey.setColumns([0, 1, {
      type: 'string',
      label: '',
      calc: function (d, r) {
          return ''
      }
  }])

  // Aggregate the previous view to calculate the average. This table should be a single table that looks like:
  // [['', AVERAGE]], so you can get the Average with .getValue(0,1)
  var group = google.visualization.data.group(viewWithKey, [2], [{
      column: 1,
      id: 'avg',
      label: 'average',
      aggregation: google.visualization.data.avg,
      'type': 'number'
  }]);

  // Create a DataView where the third column is the average.
  var dv = new google.visualization.DataView(chartdata);
  dv.setColumns([0, 1, {
      type: 'number',
      label: 'average',
      calc: function (dt, row) {
          // round average up / down
          return Math.round(group.getValue(0, 1));
      }
  }]);

  var options = {
    title: 'Average Minutes cross Agents',
    vAxis: {
      title: 'Minutes'
    },
    hAxis: {
      title: 'Agent'
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    }
  };

  var chartAvg = new google.visualization.ComboChart(document.getElementById('chartAvg'));
  chartAvg.draw(dv, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartAvg"></div>