Javascript 更改谷歌图表中某些条形图的颜色

我用谷歌图表创建了一个水平条形图，我想改变属于某个范围的条形图的颜色，我尝试了很多方法 但这是我的代码，但毫无意义：

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

google.load（“可视化”、“1.1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.arrayToDataTable([
[‘代理人’、‘百分比’]，
]);
变量选项={
标题：“每个代理的EKMS使用情况”，
宽度：900，
图例：{位置：'无'}，
图表：{title:'每个代理的EKMS使用率'，
副标题：'按百分比'}，
条形图：“水平”，//物料条形图为必填项。
轴线：{
x:{
0:{侧面：“顶部”，标签：“百分比”}//顶部x轴。
}
},
条：{groupWidth:“90%”
}; 
var chart=new google.charts.Bar（document.getElementById（'top_x_div'）；
图表绘制（数据、选项）；
};

$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\'],';           
      } 
      ?>
    ]);

var data=new google.visualization.arrayToDataTable([
['Agents'，'Percentage'，{role:'style}]，
]);

我还尝试添加颜色：[‘蓝色’、‘红色’]，它会改变所有条的颜色

注意，我使用的图表是：Top X图表这里是它的链接：

---

似乎

google.charts.Bar

组件不支持，但您可以使用

corechart

包中的

google.visualization.BarChart

组件来定制条形图样式，如下所示

示例

//google.load（“可视化”、“1.1”、{packages:[“bar”]}）；
load（“可视化”、“1.1”{packages:[“corechart”]}）；
setOnLoadCallback（drawStuff）；
函数drawStuff（）{
var data=new google.visualization.arrayToDataTable([
['Opening Move'，'Percentage'，{role:'style}]，
[“国王的棋子（e4）”，44，“#b87333”]，
[“女王的棋子（d4）”，31，“银牌”]，
[“国王骑士3（Nf3）”，12，“黄金”]，
[“女王的主教兵（c4）”，10，“颜色：#e5e4e2”]，
[“其他”，3，“绿色”]
]);
变量选项={
标题:"国际象棋开局动作",，
宽度：900，
图例：{位置：'无'}，
图表：{标题：'国际象棋开局动作'，
副标题:"人气百分比",，
条形图：“水平”，//物料条形图为必填项。
轴线：{
x:{
0:{侧面：“顶部”，标签：“百分比”}//顶部x轴。
}
},
条：{groupWidth:“90%”
};
//var chart=new google.charts.Bar（document.getElementById（'top_x_div'）；
var chart=new google.visualization.BarChart（document.getElementById（“top_x_div”）；
图表绘制（数据、选项）；
};
我用了另一张图表来解决这个问题，谢谢