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

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

帖子中显示的数据应该可以与其他答案中的代码配合良好，
请参阅以下工作片段...

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>