Charts Google Visualization如何基于逻辑更改背景色柱状图

我有一个柱状图，如下图所示。我想风格优良的酒吧绿色，因为它是超过平均水平，非常好的蓝色和公平的红色。这可能吗

根据条形图/单元格的值，我想更改柱状图的背景色

---

由于所有条形图都由数据系列着色，因此必须将条形图拆分为不同的系列，以使其具有不同的颜色。您可以在DataView中使用计算列来完成以下操作：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['Foo', 2],
        ['Bar', 4],
        ['Baz', -3],
        ['Cud', 6],
        ['Waq', -8],
        ['Bat', -2],
        ['Cad', 5],
        ['Giv', 3],
        ['Muj', 9],
        ['Lof', -7],
        ['Duq', 5],
        ['Kaf', 1],
        ['Zij', 4]
    ]);

    var view = new google.visualization.DataView(data);
    // add as many different series as needed
    // make sure all possible values are covered, so you don't have any gaps where a data point can't be assigned to a series
    view.setColumns([0, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            // if the value is less than 0, add to the red series
            return (dt.getValue(row, 1) < 0) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            // if the value is greater than or equal to 0, add to the green series
            return (dt.getValue(row, 1) >= 0) ? dt.getValue(row, 1) : null;
        }
    }]);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, {
        legend: 'none',
        isStacked: true,
        height: 300,
        width: 800,
        // set the colors to use for the series (in the same order as the columns in the view)
        colors: ['red', 'green']
        /* or you can use the series.<series index>.color option to assign colors to specific series:
        series: {
            0: {
                color: 'red'
            },
            1: {
                color: 'green'
            }
        }
        */
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'number'，'Value'）；
data.addRows([
[Foo'，2]，
[Bar'，4]，
['Baz'，-3]，
[Cud'，6]，
[Waq'，-8]，
[Bat'，-2]，
[Cad'，5]，
[Giv'，3]，
[Muj'，9]，
[Lof'，-7]，
[Duq'，5]，
[Kaf'，1]，
[Zij'，4]
]);
var view=newgoogle.visualization.DataView（数据）；
//根据需要添加尽可能多的不同系列
//确保覆盖了所有可能的值，这样就不会出现无法将数据点指定给序列的间隙
view.setColumns（[0{
键入：“编号”，
标签：“值”，
计算：函数（dt，行）{
//如果该值小于0，则添加到红色系列
返回（dt.getValue（第1行）<0）？dt.getValue（第1行）：空；
}
}, {
键入：“编号”，
标签：“值”，
计算：函数（dt，行）{
//如果该值大于或等于0，则添加到绿色系列
返回（dt.getValue（第1行）>=0）？dt.getValue（第1行）：空；
}
}]);
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表。绘制（视图{
图例：“无”，
isStacked：是的，
身高：300，
宽度：800，
//设置系列使用的颜色（与视图中的列的顺序相同）
颜色：[‘红色’、‘绿色’]
/*也可以使用series..color选项为特定系列指定颜色：
系列：{
0: {
颜色：“红色”
},
1: {
颜色：“绿色”
}
}
*/
});
}
load（'visualization'，'1'，{packages:['corechart']，callback:drawChart}）；

---

看到这里了吗：

你想根据它们的数值给它们上色，还是“优秀”总是绿色，“非常好”总是蓝色，“一般”总是红色？@asgallant嘿，谢谢你回来，这是基于数值的。例如，如果“卓越”中的值低于80，它将变为黄色，高于80将变为绿色。那么NumericFormatter会工作吗？它不适用于meNo，数字格式不会执行您想要的操作。我写了一个通过值改变条颜色的方法，见下面我的答案。啊，现在我明白了，但是优秀的目标是80，这是由用户设定的。嗯，我应该开始适应tooThis更符合我的期望，只是我想要一个目标指示值100的红色虚线（因为它是目标）你能编辑小提琴以匹配它吗，我正在处理相同的TOO这里有一个调整过的小提琴：。如果你想画线，你需要超过1行的数据。我看不到目标线，但代码在那里。如果我需要做更多的事情来显示目标线，则至少需要两行数据来绘制该线。