Измените цвет некоторых баров в google chart

Я создал горизонтальную линейчатую диаграмму с помощью Google Charts и хочу изменить цвет баров, принадлежащих к определенному диапазону, я пытался сделать это многими способами но напрасно, вот мой код: 

    google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.arrayToDataTable([
      ['Agents', 'Percentage' ],
      <?php 
      for($i=0;$i<sizeof($name);$i++){
          echo '[''.$name[$i].'','.$count[$i].'],';            
      } 
      ?>
    ]);
    var options = {
      title: 'EKMS Usage per agent',
      width: 900,
      legend: { position: 'none' },
      chart: { title: 'EKMS Usage per agent',
               subtitle: 'By percentage' },
      bars: 'horizontal', // Required for Material Bar Charts.
      axes: {
        x: {
          0: { side: 'top', label: 'Percentage'} // Top x-axis.
        }
      },
      bar: { groupWidth: "90%" }                  
    }; 
    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, options);
  };

$name и $count - это два массива, которые я извлек из своей базы данных и которые имеют одинаковую длину, я попытался добавить столбец { role: "style"} в переменные данные и назначение цветов с помощью теста, подобного этому: 

 var data = new google.visualization.arrayToDataTable([
      ['Agents', 'Percentage', { role: "style" } ],
      <?php 
      for($i=0;$i<sizeof($name);$i++){
     if($count[$i]<50)
             echo '[''.$name[$i].'','.$count[$i].','red'],'; 
     else
         echo '[''.$name[$i].'','.$count[$i].','blue'],';           
      } 
      ?>
    ]);

Я попытался также добавить цвета: ['синий', 'красный'] и он меняется цвет всех полосок.

P. S: обратите внимание, что диаграмма, которую я использовал: Top X Chart вот ее ссылка : https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#top-x-charts

1 2
javascript html css google-visualization

1 ответ:

Похоже, что компонент google.charts.Bar не поддерживаетроль стиля , но вы можете использовать компонент google.visualization.BarChart из пакета corechart вместо этого, чтобы настроить стили баров, как показано ниже.

Пример 

      //google.load("visualization", "1.1", {packages:["bar"]});
      google.load("visualization", "1.1", {packages:["corechart"]});
      google.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage', { role: "style" }],
          ["King's pawn (e4)", 44, "#b87333"],
          ["Queen's pawn (d4)", 31, "silver"],
          ["Knight to King 3 (Nf3)", 12, "gold"],
          ["Queen's bishop pawn (c4)", 10, "color: #e5e4e2"],
          ['Other', 3,"green"]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

          //var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        var chart = new google.visualization.BarChart(document.getElementById("top_x_div"));
        chart.draw(data, options);
      };
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
2