在Google柱形图中按年份汇总类别 [英] Summarize categories by year in Google Column Chart

问题描述

我有一个数据表，在过去的三年里有汽车销售数量。我想创建一个列图，每年有租用，融资和现金出售列。

我的表格有两列，

到目前为止，我有：

  var groupedData = google.visualization.data.group（
 googleDataTable，
 [{column：0，modifier：getYearForRow，type：'string'，label：'Year'}]，
 [{column：1，type：'string'，label：'Type'}]）; 
  

这不起作用，我得到一个错误TypeError：Can not read property'call'of未定义。关于如何让这个工作成功的建议？

首先，为每个销售类型创建一个DataView

然后使用group方法来聚合视图

请参阅以下工作片段...

google.charts.load（'current'，{callback：drawChart， package：['corechart']}）; function drawChart（）{var data = google.visualization.arrayToDataTable（[['Sale Date'，'Sale Type']，[new Date（2016，0，16） （2016,0,16），'现金出售']，[新日期（2016,0,16），'出租']，[新日期（2016,0,16）'，'出租' '，[新日期（2016,0,16），'融资']，[新日期（2017,0,16），'现金出售']，[新日期（2017,0,16），'现金出售]， [新日期（2017,0,16），'现金出售']，[新日期（2017,0,16），'融资']，[新日期（2016,0,17），'现金出售']， [新日期（2016,0,17），'融资']，[新日期（2016,0,17），'现金出售']，[新日期（2016,0,17），'租用']，新日期（2016,0,17），'融资']，[新日期（2017,0,17），'融资']，[新日期（2017,0,17），'融资']，[新日期（2017,0,17），'现金出售']，[新日期（2017,0,17），'融资']，[新日期（2016,0,18），'出租']，[新日期'现金出售']，[新日期（2017,0,18），'现金出售']，[新日期（2017,0,18），'现金出售']]）; //构建视图和聚合列var viewColumns = [{label：'year'，type：'string'，calc：function（dt，row）{return dt.getValue（row，0）.getFullYear（）。toString（） ; }}]; var aggColumns = []; var saleTypes = data.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;}}）; aggColumns.push（{aggregation：google.visualization.data.sum，column：colIndex - 1，label：saleType，type：'number'}）;}）; var view = new google.visualization.DataView（data）; view.setColumns（排列viewColumns）; var summary = google.visualization.data.group（view，[0]，aggColumns）; var container = document.body.appendChild（document.createElement（'div'））; var chart = new google.visualization.ColumnChart（container）; chart.draw（summary，{legend：{position：'top'}}）;}

 < script src =https://www.gstatic.com/charts/loader.js>< / script>  

I have a data table with number of car sales in the last 3 years. I want to create a column chart that has columns for "leased", "financed", and "cash sale" in each year.

My table is has two columns, one for sale date and one for sale type.

So far I have:

var groupedData = google.visualization.data.group(
    googleDataTable,
    [ { column: 0, modifier: getYearForRow, type: 'string', label: 'Year'} ],
    [ { column: 1, type: 'string', label: 'Type'} ] );

That doesn't work, I am getting an error "TypeError: Cannot read property 'call' of undefined". Any suggestions on how I can get this to work?

解决方案

first, build a DataView with columns for each sale type

then use the group method to aggregate the view

see following working snippet...

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

function drawChart() {
  var data = 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']
  ]);

  // build view and aggregation columns
  var viewColumns = [{
    label: 'year',
    type: 'string',
    calc: function (dt, row) {
      return dt.getValue(row, 0).getFullYear().toString();
    }
  }];
  var aggColumns = [];
  var saleTypes = data.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;
      }
    });
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: colIndex - 1,
      label: saleType,
      type: 'number'
    });
  });

  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var summary = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var container = document.body.appendChild(document.createElement('div'));
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(summary, {
    legend: {
      position: 'top'
    }
  });
}

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

这篇关于在Google柱形图中按年份汇总类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！