更改谷歌柱形图中条形的颜色

Question

我正在使用柱形图生成图表。下面是代码：

function drawActiveJobsChart() {
    var i=0;
    var j=0;

    var data = new google.visualization.DataTable();
    data.addColumn('string','Systems');
    data.addColumn('number', 'Counts');

    $.getJSON('SubSystemNumbers.action', function(json) {

        $.each( json.SysActNum, function( key, val ) {
            i++;
        });
        data.addRows(i);
        $.each( json.SysActNum, function( key, val ) {


            if (val>=30) {

            data.setProperty(j,1,'style','color:red');

            }
            data.setValue(j, 0,key);
            data.setValue(j, 1,val);
            j++;

          });
    });


    var options = {
      title: 'System Numbers',
      width:900, height:400,
      allowHtml: true,
      hAxis: {title: 'Systems', titleTextStyle: {color: 'red'},textStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById(chartDiv));
    chart.draw(data, options);
  }

现在我添加了逻辑，当 return val 大于 30 时将条形颜色更改为红色。我尝试在调试中运行，代码执行正常，但条形图未显示为红色。请建议！感谢帮助

Answer 1

设置单元格的“样式”属性不会改变条形的颜色，您需要向数据表添加“样式”角色列：

var data = new google.visualization.DataTable();
data.addColumn('string','Systems');
data.addColumn('number', 'Counts');
data.addColumn({type: 'string', role: 'style'});

并将样式信息添加到此列：

$.getJSON('SubSystemNumbers.action', function(json) {
    $.each( json.SysActNum, function( key, val ) {
        var style = (val >= 30) ? 'color: red' : null;
        data.addRow([key, val, style]);
    });
});

请参阅基于您的代码的工作示例：http ://jsfiddle.net/asgallant/dGYs7/