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>