Question

我使用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：＆＃34; style＆＃34;在变量数据中和使用如下测试分配颜色：

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

我还尝试添加颜色：[＆＃39;蓝色＆＃39;红色＆＃39;]并改变所有条形的颜色。

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

Answer 1

似乎google.charts.Bar组件不支持style role，但您可以使用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>

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

1 个答案: