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