Google 图表 Api:Set ColumnChart 单个条形图的条形颜色

Question

我们如何将下方 'Executed' 列的默认颜色更改为 'green' 并将 'Not Executed' 列的默认颜色更改为 'red'？我尝试使用 series/colors 但没有成功。

我尝试在选项和下面的视图中添加颜色参数、系列。没有任何效果。

代码：

<html>
       <head>
          <title>Google Charts Tutorial</title>
          <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
          </script>
          <script type = "text/javascript">
             google.charts.load('current', {packages: ['corechart']});     
          </script>
           <script language = "JavaScript">
             function drawChart(){
                // Define the chart to be drawn.
                var data = google.visualization.arrayToDataTable([
                   ['Status', 'Outcome', { role: 'style' }],
                   ['Executed', 70,'green'],
                   ['Not Executed', 5,'red']
                ]);

        var groupData = google.visualization.data.group(
        data,
        [{column: 0, modifier: function () {return 'total'}, type:'string'}],
        [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
      );

      var formatPercent = new google.visualization.NumberFormat({
        pattern: '#,##0.0%'
      });

      var formatShort = new google.visualization.NumberFormat({
        pattern: 'short'
      });

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, {
        calc: function (dt, row) {
          var amount =  formatShort.formatValue(dt.getValue(row, 1));
          var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
          return amount + ' (' + percent + ')';
        },
        type: 'string',
        role: 'annotation'
      }]);

            var options = { title: 'Google charts', 'legend':'none'}; 

            var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
            chart.draw(view, options);
         }
         google.charts.setOnLoadCallback(drawChart);
          </script>
       </head>

       <body>
     <table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;width: 100%'>
     <tr align='center' valign='top'>
    <td align='center' style='width:100px' valign='center' bgcolor='white'>
        <div id="container1" style="width:400; height:280"></div>
    </td>
     </tr>
    </table>
       </body>
    </html>

我需要做的就是将条形图的蓝色更改为绿色和红色。请检查和帮助。

Answer 1

在数据视图中，需要包含来自数据的样式角色的列索引table...

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {  // <-- include column index 2 for style role
  calc: function (dt, row) {
    var amount =  formatShort.formatValue(dt.getValue(row, 1));
    var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
    return amount + ' (' + percent + ')';
  },
  type: 'string',
  role: 'annotation'
}]);

请参阅以下工作片段...

google.charts.load('current', {packages: ['corechart']});
function drawChart(){
  // Define the chart to be drawn.
  var data = google.visualization.arrayToDataTable([
     ['Status', 'Outcome', { role: 'style' }],
     ['Executed', 70,'green'],
     ['Not Executed', 5,'red']
  ]);

  var groupData = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  var formatPercent = new google.visualization.NumberFormat({
    pattern: '#,##0.0%'
  });

  var formatShort = new google.visualization.NumberFormat({
    pattern: 'short'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: function (dt, row) {
      var amount =  formatShort.formatValue(dt.getValue(row, 1));
      var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
      return amount + ' (' + percent + ')';
    },
    type: 'string',
    role: 'annotation'
  }]);

  var options = { title: 'Google charts', 'legend':'none'};

  var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
  chart.draw(view, options);
}
google.charts.setOnLoadCallback(drawChart);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container1"></div>

Google 图表 Api:Set ColumnChart 单个条形图的条形颜色

Google Charts Api:Set ColumnChart Bar color for individual bars

html

javascript

charts

google-visualization