Google-Säulendiagramm: Wie ändere ich die Farbe von Spalten mit negativen Werten

Question

Ich versuche, ein Säulendiagramm zu erstellen, und ich möchte, dass die Spalten rot sind, wenn ihr Wert negativ ist. Hier ist meine Funktion:

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

Die Spalten werden korrekt angezeigt, aber sie sind alle blau. Ich habe bemerkt, dass die Farbe aller Spalten von der Farbe in der Reihe [0] abhängt. Wenn die Serie [0] "blau" ist, sind alle Spalten blau, egal welche Farbe ich in die anderen Slots der Serie [] einstelle.

Was habe ich falsch gemacht? Vielen Dank im Voraus!

Answer 1

verwenden, um einen Stil Column Role

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

dann ...

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