Question

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

        Year        Product Value
        2015            A     10
        2015            B     20
        2016            C     30
        2016            D     40

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

Answer 1

每种图表类型都有一个特定的data format，您可以检查

通常，对于大多数图表类型，第一个之后的所有列都应该是数字

除非您使用注释，工具提示或其他角色

因此，数据需要看起来类似于......

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

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

＆＃13;

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']
});

＆＃13;

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

＆＃13;

编辑

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

然后使用group()方法

聚合视图，按年度分组

使用聚合数据表绘制图表

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

＆＃13;

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']
});

＆＃13;

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

＆＃13;

Google条形图数据准备 - 按列分组

1 个答案: