Google 柱形图：如何改变负值柱形的颜色

Question

我正在尝试创建一个柱形图，我希望柱形在值为负时显示为红色。这是我的功能：

function drawChartFlows(data, title, id) {

if (googleAPILoaded != true)
    return;

var array = new google.visualization.DataTable();
array.addColumn('number', 'months');
array.addColumn('number', 'flows');
var flows = dataToArray(data);
var series = [];
for (var it = 0; it < flows.length; it++) {
    var flow = Number(flows[it]);
    if (flow <= 0) {
        series[it] = 'red';
        array.addRow([it, (flow*(-1))]);
    } else {
        series[it] = 'blue';
        array.addRow([it, flow]);
    }
}
var options = {
        title: 'Cash flows for '+title,
        width: 1400,
        height: 800,
        legend: { position: 'none' },
        chart: { subtitle: 'monthly flows' },
        axes: {
            x: {
                0: { side: 'top', label: 'Cash flows'}
            }
        },
        bar: { groupWidth: "50%" },
        colors: series
};

var chart = new google.visualization.ColumnChart($(id)[0]);
chart.draw(array, options); 
}

列显示正确，但都是蓝色的。我注意到所有列的颜色都取决于 series[0] 中的颜色。如果 series[0] 是 'blue'，所有的列都是蓝色的，不管我在 series[].

的其他槽中放什么颜色

我做错了什么？提前致谢！

Answer 1

使用样式 Column Role

array.addColumn('number', 'months');
array.addColumn('number', 'flows');
array.addColumn({role: 'style', type: 'string'});

然后...

if (flow <= 0) {
    array.addRow([it, (flow*(-1)), 'color: red;']);
} else {
    array.addRow([it, flow, 'color: blue;']);
}

Google 柱形图：如何改变负值柱形的颜色

Google column chart: how to change the color of columns with negative values

javascript

google-visualization

column-chart