Google 图表 - JSON 数据源项作为图例字段 - 堆积柱形图

Question

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

如果您知道要分组的字段，我知道如何联接多个数据源。但在本例中，"客户端"字段是动态的。

这个堆栈问题类似于我想要完成的：谷歌图表堆积柱形图的 JSON 格式

我的数据如下所示：

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