根据值改变甘特聊天栏的颜色

没有任何标准的选项来改变栏的颜色

但是你可以手动更改图表元素

建议使用MutationObserver，因为在任何交互操作(如悬停或选择

条的顺序应遵循data

请参阅下面的工作代码片段…

google.charts.load('current', {
  callback: drawChart,
  packages: ['gantt']
});
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent done');
  data.addColumn('string', 'Dependencies');
  data.addRows([
  ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null],
  ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null],
  ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null],
  ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null]
  ]);
  var options = {
    width: '100%',
    hAxis: {
      textStyle: {
        fontName: ['Roboto Condensed']
      }
    },
    gantt: {
      labelStyle: {
        fontSize: 12,
        color: '#757575'
      }
    }
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gantt(container);
  // monitor activity, change bar color
  var observer = new MutationObserver(function (mutations) {
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) {
      if (data.getValue(index, 6) > 100) {
        bar.setAttribute('fill', '#a52714');
      }
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });
  chart.draw(data, options);
}

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

编辑

部分补全时出现，"bar"用两种颜色分割
较浅的颜色由'rect'元素表示
你可以把它改成浅红色
使用'path'的Y坐标来找到正确的'rect'

还需要按照图表中显示的顺序对数据进行排序…

请参阅下面的工作代码片段…

google.charts.load('current', {
  callback: drawChart,
  packages: ['gantt']
});
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent done');
  data.addColumn('string', 'Dependencies');
  data.addRows([
    ['C10', 'C10', 'Xa', new Date(2016, 2, 23), new Date(2016, 10, 30), null, 94.84, null],
    ['C15', 'C15', 'Xa', new Date(2016, 4, 1), new Date(2016, 11, 29), null, 82.64, null],
    ['C20', 'C20', 'Xa', new Date(2016, 7, 1), new Date(2016, 10, 25), null, 93.1, null],
    ['C25', 'C25', 'Xa', new Date(2016, 3, 11), new Date(2016, 10, 25), null, 96.49, null],
    ['C30', 'C30', 'Xa', new Date(2016, 9, 3), new Date(2017, 1, 28), null, 30.41, null],
    ['C35', 'C35', 'Xa', new Date(2016, 3, 8), new Date(2016, 5, 24), null, 113.78, null]
  ]);
  data.sort([{column: 3}]);
  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    xWidth = w.innerWidth || e.clientWidth || g.clientWidth,
    yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
  var options = {
    height: 600,
    width: "100%",
    hAxis: {
      textStyle: {
        fontName: ["Roboto Condensed"]
      }
    },
    gantt: {
      labelStyle: {
      fontName: ["Roboto Condensed"],
      fontSize: 12,
      color: '#757575'
      }
    }
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gantt(container);
  // monitor activity, change bar color
  var observer = new MutationObserver(function (mutations) {
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) {
      var barY;
      if (data.getValue(index, 6) > 100) {
        bar.setAttribute('fill', '#b71c1c');
        barY = bar.getAttribute('d').split(' ')[2];
        Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
          if (bar.getAttribute('y') === barY) {
            bar.setAttribute('fill', '#f44336');
          }
        });
      }
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });
  chart.draw(data, options);
}

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