Google图表 - JSON数据源项目为图例字段 - 堆积列

时间:2017-06-21 12:56:24

标签: javascript json charts google-visualization

我想创建一个带有JSON数据源的堆积柱形图,并使用我的JSON数据中的项目作为字段进行分组。我还没有找到任何有关如何做到这一点的资源,而且我没有JS经验。

如果您知道要分组的字段,我知道如何加入多个数据源。但在这种情况下,客户端字段是动态的。

这个堆栈问题类似于我想要完成的事情:JSON format for Google chart stacked column

我的数据如下:

[["2017/06/25", "Some Client A", 805.0], ["2017/07/02", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]

到目前为止,我有以下内容。这显然不起作用:

function drawStacked() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Week');
  data.addColumn('string', 'client');
  data.addColumn('number', 'Hours');
  data.addRows( {{ sbl1|safe }} );

1 个答案:

答案 0 :(得分:0)

帖子中显示的数据应与其他答案的代码一致,
请参阅以下工作代码段...



google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Week');
    data.addColumn('string', 'client');
    data.addColumn('number', 'Hours');
    data.addRows([["2017/07/09", "Some Client A", 805.0], ["2017/07/09", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]);
  
    // create data view
    var view = new google.visualization.DataView(data);

    // init column arrays
    var aggColumns = [];
    var viewColumns = [{
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 0);
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }];

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

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

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

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

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

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