Question

我有以下数据表：

var dataTableSales = google.visualization.arrayToDataTable([
    ['Sale Date', 'Sale Type'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'financed'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'leased'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'cash sale'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2016, 0, 18), 'leased'],
    [new Date(2016, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale']
]);

我想要做的是绘制每年“现金销售”销售类型的平均数量。我可以轻松地获得每年所有销售类型的总销售数量的dataTable，如下所示：

var groupedData = google.visualization.data.group(
    dataTableSales,
    [ { column: 2, modifier: getYearForRow, type: 'string', label: 'Year' } ],
    [ { column: 6, aggregation: google.visualization.data.count, type: 'number', label: 'Total Sales' } ] );

这可以通过使用组来实现吗？如果不是，最好的方法是什么？

Answer 1

一旦您按年度计算了数量，group数据使用...

google.visualization.data.avg

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages:['controls']
});

function drawChart() {
  var dataTableSales = google.visualization.arrayToDataTable([
    ['Sale Date', 'Sale Type'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'financed'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'leased'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'cash sale'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2016, 0, 18), 'leased'],
    [new Date(2016, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale']
  ]);
  dataTableSales.sort({column: 0});

  // build view and aggregation columns
  var viewColumns = [{
    label: 'Year',
    type: 'string',
    calc: function (dt, row) {
      return dt.getValue(row, 0).getFullYear().toString();
    }
  }];
  var avgColumns = [];
  var sumColumns = [];
  var saleTypes = dataTableSales.getDistinctValues(1);
  saleTypes.forEach(function (saleType) {
    var colIndex = viewColumns.push({
      label: saleType,
      type: 'number',
      calc: function (dt, row) {
        return (dt.getValue(row, 1) === saleType) ? 1 : 0;
      }
    });
    avgColumns.push({
      aggregation: google.visualization.data.avg,  // <-- avg aggregation
      column: colIndex - 1,
      label: saleType,
      type: 'number'
    });
    sumColumns.push({
      aggregation: google.visualization.data.sum,
      column: colIndex - 1,
      label: saleType,
      type: 'number'
    });
  });

  var view = new google.visualization.DataView(dataTableSales);
  view.setColumns(viewColumns);

  var sum = google.visualization.data.group(
    view,
    [0],
    sumColumns
  );

  var avg = google.visualization.data.group(
    sum,
    [{column: 0, type: 'string', modifier: function () {return 'Average';}}],
    avgColumns
  );

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div',
    dataTable: avg
  });
  table.draw();
}

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

编辑

按年度类型获得平均销售额......

google.charts.load('current', {
  callback: drawChart,
  packages:['controls']
});

function drawChart() {
  var dataTableSales = google.visualization.arrayToDataTable([
    ['Sale Date', 'Sale Type'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'financed'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'leased'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'cash sale'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2016, 0, 18), 'leased'],
    [new Date(2016, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale']
  ]);
  dataTableSales.sort({column: 0});

  // build view and aggregation columns
  var viewColumns = [{
    label: 'Year',
    type: 'string',
    calc: function (dt, row) {
      return dt.getValue(row, 0).getFullYear().toString();
    }
  }];
  var sumColumns = [];
  var saleTypes = dataTableSales.getDistinctValues(1);
  saleTypes.forEach(function (saleType) {
    var colIndex = viewColumns.push({
      label: saleType,
      type: 'number',
      calc: function (dt, row) {
        return (dt.getValue(row, 1) === saleType) ? 1 : 0;
      }
    });
    sumColumns.push({
      aggregation: google.visualization.data.sum,
      column: colIndex - 1,
      label: saleType,
      type: 'number'
    });
  });
  var colIndex = viewColumns.push({
    label: 'total',
    type: 'number',
    calc: function (dt, row) {
      return 1;
    }
  });
  sumColumns.push({
    aggregation: google.visualization.data.sum,
    column: colIndex - 1,
    label: 'total',
    type: 'number'
  });

  var view = new google.visualization.DataView(dataTableSales);
  view.setColumns(viewColumns);

  var sum = google.visualization.data.group(
    view,
    [0],
    sumColumns
  );

  var avgColumns = [0];
  for (var i = 1; i < sum.getNumberOfColumns() - 1; i++) {
    // use function to lock the value of --> i
    addAvgCol(i);
  }

  function addAvgCol(colIndex) {
    avgColumns.push({
      label: sum.getColumnLabel(colIndex),
      type: sum.getColumnType(colIndex),
      calc: function (dt, row) {
        var typeAvg;
        if (dt.getValue(row, sum.getNumberOfColumns() - 1) !== 0) {
          typeAvg = dt.getValue(row, colIndex) / dt.getValue(row, sum.getNumberOfColumns() - 1);
        } else {
          typeAvg = null;
        }
        return typeAvg;
      }
    });
  }

  var viewAvg = new google.visualization.DataView(sum);
  viewAvg.setColumns(avgColumns);

  var tableSum = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_sum',
    dataTable: sum
  });
  tableSum.draw();

  var tableAvg = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_avg',
    dataTable: viewAvg
  });
  tableAvg.draw();
}

div {
  padding: 4px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Sum</div>
<div id="table_sum"></div>
<div>Avg</div>
<div id="table_avg"></div>

Google可视化图表按年度平均销售类型数

1 个答案: