堆栈栏Google可视化 [英] stack bar google visualisation

问题描述

我在这里有此查询:

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

is there any way to make this values above to show up in bar chart like the name "A" in one bar ,"B" in other bar , "C" in other bar group by the name , and the color like in the bar "A" i want it 4 different colors like you see in the query every number with his color like A has "1,2,10,15" so the bar A will have 4 color and i'm using google chart , this is the code :

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

推荐答案

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

if you want to use the style and annotation roles,
you need two calculated columns...

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可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！