时间戳

首页 > 解决方案 > 堆栈栏谷歌可视化

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 种不同的颜色，就像你在查询中看到的那样，每个带有他颜色的数字，比如 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);
        }
    });

标签： chartsgoogle-visualization

解决方案

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

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

推荐阅读