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

2019-09-28 02:33:16 阅读：178 来源： 互联网

标签：javascript charts google-visualization google-chartwrapper

我想从下面的数据创建一个谷歌图表.

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

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

解决方法:

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

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

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

因此,数据需要看起来类似于……

      ['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>

标签：javascript,charts,google-visualization,google-chartwrapper
来源： https://codeday.me/bug/20190928/1825339.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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