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 chart，这是代码：

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

堆栈栏Google可视化

1 个答案: