我正在开发angularjs google charts。我想将数据库中的每个列数据显示为一个以行为堆栈的栏.Below表表示后端表中的数据。
ID SPvalue spstatus name
1 30 recent jtest
1 40 done jtest
1 55 inprogress jtest
2 80 recent mtest
2 9 done mtest
2 12 inprogress mtest
以下是我的js代码。
js code：
$scope.chart.data = {
"cols": [
{ id: "status", label: "Status", type: "string" },
{ id: "spValue1", label: "SPValue", type: "number"}
{ id: "spValue2", label: "SPValue2", type: "number"},
{ id: "spValue3", label: "SPValue3", type: "number"}
]
};
$scope.loadDataToDrawChart = function(){
myService.getResponseToDrawChart($rootScope.value).then(
function(response) {
$scope.myData = response;
var rows = [];
var spValue = 0;
var spstatus;
angular.forEach($scope.myData,function(value,key){
spValue = value.spValue;
spstatus = value.spStatus;
alert("spValue : " + spValue + "spStatus :" + spStatus);
var myData = { c : [{ "v" : spValue ,"f":spstatus }
]};
rows.push(myData);
});
$scope.chart.data.rows = rows;
}
}
答案 0 :(得分：1)
1）获得两个堆栈，将值分解为行...
e.g。
['Month', 'ID-0', 'ID-1', 'ID-2'],
['jtest', 30, 45, 55],
['mtest', 80, 9, 12]
请参阅以下工作代码段...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'ID-0', 'ID-1', 'ID-2'],
['jtest', 30, 45, 55],
['mtest', 80, 9, 12]
]);
var options = {
isStacked: true,
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
2）获取具有独特颜色的单独堆栈，使用单独的列/系列
每一行只应包含它所代表的系列的数据
用 - ＆gt;填写其余列null
e.g。
['Month', 'ID1-0', 'ID1-1', 'ID1-2', 'ID2-0', 'ID2-1', 'ID2-2'],
['jtest', 30, 45, 55, null, null, null],
['mtest', null, null, null, 80, 9, 12]
请参阅以下工作代码段...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'ID1-0', 'ID1-1', 'ID1-2', 'ID2-0', 'ID2-1', 'ID2-2'],
['jtest', 30, 45, 55, null, null, null],
['mtest', null, null, null, 80, 9, 12]
]);
var options = {
isStacked: true,
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
编辑
要创建上面 1）所需的数据，请参阅以下代码段...
这应该为ID中的每次更改创建一个新的行数组 如果是相同的ID，它应该添加到现有的行数组
function(response) {
$scope.myData = response;
var rows = [];
var spValue = 0;
var spstatus;
var row = null;
var id = null;
angular.forEach($scope.myData,function(value,key){
if (id !== value.spID) {
id = value.spID; // <-- had forgot this
if (row !== null) {
rows.push(row);
}
row = {c: [{v: value.spID}]};
}
row.c.push({v: value.spValue});
});
rows.push(row); // <-- don't forget last row
$scope.chart.data.rows = rows;
}
包含测试数据
请参阅以下工作代码段...
google.charts.load('current', {
callback: function () {
var jsonData = [{"spID":1,"spValue":30,"spStatus":"recent","name":"jtest"},{"spID":1,"spValue":40,"spStatus":"done","name":"jtest"},
{"spID":1,"spValue":55,"spStatus":"inprogress","name":"jtest"},{"spID":2,"spValue":80,"spStatus":"recent","name":"mtest"},
{"spID":2,"spValue":9,"spStatus":"done","name":"mtest"},{"spID":2,"spValue":12,"spStatus":"inprogress","name":"mtest"}];
var data = {
"cols": [
{ id: "status", label: "Status", type: "string" },
{ id: "spValue1", label: "SPValue", type: "number"},
{ id: "spValue2", label: "SPValue2", type: "number"},
{ id: "spValue3", label: "SPValue3", type: "number"}
]
};
var rows = [];
var row = null;
var id = null;
jsonData.forEach(function (value, key) {
if (id !== value.spID) {
id = value.spID;
if (row !== null) {
rows.push(row);
}
row = {c: [{v: value.spID}]};
}
row.c.push({v: value.spValue});
});
rows.push(row);
data.rows = rows;
var dataTable = new google.visualization.DataTable(data);
var options = {
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
使用新数据进行修改
google.charts.load('current', {
callback: function () {
var jsonData = [{"spID":1,"spValue":30,"spStatus":"recent","name":"jtest"},{"spID":1,"spValue":40,"spStatus":"done","name":"jtest"},
{"spID":1,"spValue":55,"spStatus":"inprogress","name":"jtest"},{"spID":1,"spValue":20,"spStatus":"done","name":"jtest"},
{"spID":1,"spValue":33,"spStatus":"donexx","name":"jtest"},
{"spID":2,"spValue":80,"spStatus":"recentxx","name":"mtest"},
{"spID":2,"spValue":9,"spStatus":"done","name":"mtest"},{"spID":2,"spValue":12,"spStatus":"inprogress","name":"mtest"},
{"spID":2,"spValue":59,"spStatus":"donexx","name":"mtest"},{"spID":2,"spValue":42,"spStatus":"inprogressxx","name":"mtest"}];
var data = {
"cols": [
{ id: "status", label: "Status", type: "string" },
{ id: "statusCount", label: "status1", type: "number"},
{ id: "statusCount2", label: "status2", type: "number"},
{ id: "statusCount3", label: "status3", type: "number"},
{ id: "statusCount4", label: "status4", type: "number"},
{ id: "statusCount5", label: "status5", type: "number"}
]};
var rows = [];
var row = null;
var id = null;
jsonData.forEach(function (value, key) {
if (id !== value.spID) {
id = value.spID;
if (row !== null) {
rows.push(row);
}
row = {c: [{v: value.spID}]};
}
row.c.push({v: value.spValue});
});
rows.push(row);
data.rows = rows;
var dataTable = new google.visualization.DataTable(data);
var options = {
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
},
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>