谷歌条形图数据准备——按列分组 [英] Google Bar Chart data preparation -- Group by Column

问题描述

我正在尝试根据以下数据创建一个谷歌图表.

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

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

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>

编辑

将sql server的数据转成图表喜欢的格式，
首先创建一个数据视图，为每个独特的产品计算列

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

然后使用 group() 方法聚合视图，按年份分组

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>

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