Google Bar Chart数据准备 - 按列分组 [英] Google Bar Chart data preparation -- Group by Column

问题描述

 年份产品价值
 2015 A 10 
 2015 B 20 
 2016 C 30 
 2016 D 40 
  

这是我的谷歌图表正确的数据，使用arrayToDataTable函数，但没有得到所需的输出。
我希望Product作为图例，Year作为xAxis值，值应该定义条形图。
谢谢

解决方案

每种图表类型都有一个特定的数据格式您可以查看

图表类型，除非您使用注释，工具提示或其他角色，否则第一个之后的所有列应该是数字

这样，数据需要看起来类似于...

  ['Year'，'A '，'B'，'C'，'D']，
 ['2015'，10,20，null，null]，
 ['2016'，null，null，30，40] ，
  

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

<

  google.charts.load（'current'，{callback：function（ ）{var data = google.visualization.arrayToDataTable（[''Year'，'A'，'B'，'C'，'D']，['2015'，10，20，null，null]，['' 2016'，null，null，30，40]，]）; var chart = new google.visualization.BarChart（document.getElementById（'chart_div'））; chart.draw（数据）; }，packages：['corechart']}）;   
 
  
  
 
  编辑 b 
将sql server中的数据转换为图表首选的格式，
 
首先创建一个数据视图，并为每个独特的产品计算列 
 
 
然后使用 group（）方法聚合年份中的视图，使用聚合数据表绘制图表
 
 
 
请参阅以下工作片段... 
 
 
 
 
 
 
  google.charts.load（'current'，{callback：function（）{// raw table data var data = g oogle.visualization.arrayToDataTable（[['Year'，'Product'，'Value']，[2015，'A'，10]，[2015，'B'，20]，[2016，'C'，30] ，[2016，'D'，40]]）; // format year as string var formatYear = new google.visualization.NumberFormat（{pattern：'0000'}）; formatYear.format（data，0）; //创建数据视图var view = new google.visualization.DataView（data）; // init列数组var aggColumns = []; //使用格式化的年份作为第一列var viewColumns = [{calc：function（dt，row）{return dt.getFormattedValue（row，0）; }，label：data.getColumnLabel（0），type：'string'}]; //建立视图& （1）.forEach（function（product，index）{//添加视图列viewColumns.push（{calc：function（dt，row）{if（dt.getValue（row，1） === product）{return dt.getValue（row，2）;} return null;}，label：product，type：'number'}）; // add agg column aggColumns.push（{aggregation：google.visualization。 data.sum，column：index + 1，label：product，type：'number'}）;}）; //设置视图列view.setColumns（viewColumns）; //年份的聚合视图var group = google.visualization.data.group（view，[0]，aggColumns）; //绘制图表var chart = new google.visualization.BarChart（document.getElementById（'chart_div'））; chart.draw（基）; }，packages：['corechart']}）;   
 
 
 
 
 
I am trying to create a google chart from the below data.
        Year        Product Value
        2015            A     10
        2015            B     20
        2016            C     30
        2016            D     40
Is this the right data for my google chart, using arrayToDataTable function, but not getting the desired output.
I want Product as the legends, Year as the xAxis value and the value should define the bars.
Thanks
解决方案
each chart type has a specific data format you can check  

typically, for most chart types, all columns after the first should be a number  

unless you're using annotations, tooltips, or some other role  

as such, the data would need to look similar to...  
      ['Year', 'A', 'B', 'C', 'D'],
      ['2015', 10, 20, null, null],
      ['2016', null, null, 30, 40],
see following working snippet...  



google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'A', 'B', 'C', 'D'],
      ['2015', 10, 20, null, null],
      ['2016', null, null, 30, 40],
    ]);

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages: ['corechart']
});

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





EDIT  

to transpose the data from sql server into the format preferred by the chart,

first create a data view, with calculated columns for each unique product  

then aggregate the view, grouping on year, using the group() method  

use the aggregated data table to draw the chart  

see following working snippet...  



google.charts.load('current', {
  callback: function () {
    // raw table data
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Product', 'Value'],
      [2015, 'A', 10],
      [2015, 'B', 20],
      [2016, 'C', 30],
      [2016, 'D', 40]
    ]);

    // format year as string
    var formatYear = new google.visualization.NumberFormat({
      pattern: '0000'
    });
    formatYear.format(data, 0);

    // create data view
    var view = new google.visualization.DataView(data);

    // init column arrays
    var aggColumns = [];

    // use formatted year as first column
    var viewColumns = [{
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 0);
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }];

    // build view & agg column for each product
    data.getDistinctValues(1).forEach(function (product, index) {
      // add view column
      viewColumns.push({
        calc: function (dt, row) {
          if (dt.getValue(row, 1) === product) {
            return dt.getValue(row, 2);
          }
          return null;
        },
        label: product,
        type: 'number'
      });

      // add agg column
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index + 1,
        label: product,
        type: 'number'
      });
    });

    // set view columns
    view.setColumns(viewColumns);

    // agg view by year
    var group = google.visualization.data.group(
      view,
      [0],
      aggColumns
    );

    // draw chart
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(group);
  },
  packages: ['corechart']
});

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





                        
这篇关于Google Bar Chart数据准备 - 按列分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！