Question

我想创建一个带有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 }} );

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: