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);
  }

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

Answer 1

设置单元格的“样式”属性不会改变条形图的颜色，您需要在DataTable中添加“样式”角色列：

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/

Answer 2

以防万一有人遇到与我相同的问题：

我有一个类似的问题，我无法更改条形图中特定条的颜色。我按照文档中的说明进行操作，然后在这里尝试了一下答案，但没有任何效果。

结果是，我只需要将google.charts.Bar更改为google.visualization.ColumnChart。

在谷歌列图中更改栏的颜色

2 个答案: