谷歌条形图数据准备——按列分组

Google Bar Chart data preparation -- Group by Column

本文关键字：条形图 数据 谷歌      更新时间：2023-09-26

我正在尝试从下面的数据创建一个谷歌图表。

        Year        Product Value
        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(data);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

将SQL server中的数据转换为图表首选的格式，
首先创建一个数据视图，为每个唯一的产品创建计算列

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

使用聚合数据表绘制图表

请参阅下面的工作代码片段…

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>

相关文章：