谷歌條形圖顏色爲負值或小於0的值

Question

我正在尋找一個選項，以使值爲小於0時的「紅色」爲谷歌條形圖的顏色。現在我嘗試了很多東西。但沒有工作。

我還檢查colorFormater和功能colorNegative但僅適用於表，而不是與coreChart。以下是我正在使用的代碼。請建議。

google.charts.load('current', {'packages':['corechart','bar']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

     var data = new google.visualization.arrayToDataTable([ 
      ['', 'Cost'], 
      ['A', 20], 
      ['B', 30 ], 
      ['C', 50 ], 
      ['D', 60], 
      ['E', 90 ], 
      ['F', 24 ], 
      ['G', 40 ], 
      ['H', 0], 
      ['I', 0], 
      ['J', -30 ], 
      ['K', -54 ], 
      ['L', -60] 
     ]); 

     var options = { 

       width: 419, 

       colors: ['#bac405','#f95602'], 
      bars: 'horizontal', 
      legend:'bottom', 

     }; 

     var chart = new google.visualization.BarChart(document.getElementById('function')); 

     chart.draw(data,options); 
    } 

Answer 1

我已經得到了我的問題的答案。只是增加了對酒吧的看法。

由於這個鏈接 - http://jsfiddle.net/asgallant/QHJA6/

google.charts.load('current', {'packages':['corechart','bar']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

     var data = new google.visualization.arrayToDataTable([ 
      ['', 'Cost'], 
      ['A', 20], 
      ['B', 30 ], 
      ['C', 50 ], 
      ['D', 60], 
      ['E', 90 ], 
      ['F', 24 ], 
      ['G', 40 ], 
      ['H', 0], 
      ['I', 0], 
      ['J', -30 ], 
      ['K', -54 ], 
      ['L', -60] 
     ]); 

     var view = new google.visualization.DataView(data); 
    view.setColumns([0, { 
     type: 'number', 
     label: 'Value', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 1) < 0) ? dt.getValue(row, 1) : null; 
     } 
    }, { 
     type: 'number', 
     label: 'Value', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 1) > 0) ? dt.getValue(row, 1) : null; 
     } 
    }]); 

     var options = { 

       width: 419, 

      colors: ['red','#bac405'], 
      bars: 'horizontal', 
      legend:'none', 
      isStacked: true 

     }; 

     var chart = new google.visualization.BarChart(document.getElementById('function')); 

     chart.draw(view,options); 

    }