堆栈栏谷歌可视化

Question

我这里有这个查询：

select  RSP,DATEDIFF(HOUR,date,GETDATE()) as 'age'
from en_cours 
left join Base_Client 
on raison_sociale = Base_Client.Client or site_client = Base_Client.Client 
group by RSP,DATEDIFF(HOUR,date,GETDATE()),ticket_cp

它' 返回 ：

A | 1
A | 2
A | 10
A | 15
B | 1
B | 4
B | 9
C | 10
C | 10
C | 13

有没有办法使上面的值显示在条形图中，例如一个条形中的名称"A"，其他条形中的"B"，其他条形组中的名称"C"，以及条形中"A"中的颜色，我希望它有 4 种不同的颜色，就像您在查询中看到的每个数字和他的颜色一样 A 有"1,2,10,15"，所以柱 A 将有 4 种颜色 我正在使用谷歌图表，这是代码：

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Reparation par RSP',
width: '100%',
height: 500,
bar: { groupWidth: "75%" },
seriesType: 'bars',
series: { 5: { type: 'line' } },
colors: ['#ff7900'],
legend: 'right',
hAxis: { format: '###' },
titleTextStyle: {
fontSize: 32, 
},

};

$.ajax({
type: "POST",
url: "ReparationParRSP.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var view = new google.visualization.DataView(data);
view.setColumns([
0, 1, {
calc: 'stringify',
sourceColumn: 1,
role: 'annotation',
type: 'string'
}
]);

var chart = new google.visualization.BarChart($("#chart_div")[0]);
chart.draw(view, options);
updateChart();
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});

Answer 1

如果要使用样式和注释角色，
则需要两个计算列...

view.setColumns([
0, 1, {
calc: function (dt, row) {
var category = dt.getValue(row, 0);
var color;
switch (category) {
case 'encours':
color = '#ff7900';
break;
case 'gele':
color = '#50be87';
break;
case 'clos':
color = '#4bb4e6';
break;
}
return color;
},
type: 'string',
role: 'style'
}, {
calc: 'stringify',
sourceColumn: 1,
role: 'annotation',
type: 'string'
}
]);