更改 google 图表中某些柱的颜色

Question

我用 Google 图表创建了一个水平条形图，我想更改属于某个范围的条形图的颜色，我尝试了很多方法但徒劳无功，这是我的代码：

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

我也尝试添加颜色：['blue','red']，它改变了所有条形的颜色。

P.S：请注意，我使用的图表是：Top X Chart 这是它的 link： https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#top-x-charts

Answer 1

似乎 google.charts.Bar 组件不支持 style role，但您可以使用 corechart 包中的 google.visualization.BarChart 组件来自定义栏样式，如下所示。

例子

      //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>

更改 google 图表中某些柱的颜色

Change the color of some bars in google chart

html

javascript

css

charts

google-visualization