Charts 堆栈栏谷歌可视化

我有一个疑问：

  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种不同的颜色，就像你在查询中看到的一样，每个数字的颜色都是“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);
        }
    });

---

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

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'
  }
]);