根据其值，为Google Column Bar着色

Question

我需要根据其值更改条形颜色。

有一个很好的解决方案TableFormatter for tables，但它不适用于我正在使用的柱形图。

我看到了这些主题：

• Google Chart, different color for each bar，
• Google Chart Color

我也看到了一个使用jQuery的解决方案，来改变iframe中的属性，但我想找到更好的解决方案。

我的代码位于http://jsfiddle.net/Xxn42/4/或此处：

google.load('visualization', '1', {packages: ['corechart', 'table']});  

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows(6);
data.setCell(0, 0, 'Shoes');
data.setCell(0, 1, 10700);
data.setCell(1, 0, 'Sports');
data.setCell(1, 1, -15400);
data.setCell(2, 0, 'Toys');
data.setCell(2, 1, 12500);
data.setCell(3, 0, 'Electronics');
data.setCell(3, 1, -2100);
data.setCell(4, 0, 'Food');
data.setCell(4, 1, 22600);
data.setCell(5, 0, 'Art');
data.setCell(5, 1, 1100);

// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(
  document.getElementById('visualization'));
var table = new google.visualization.Table(
  document.getElementById('table'));   

var formatter = new google.visualization.TableColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

chart.draw(data, {legend: 'none'});  
table.draw(data, {allowHtml:true, showRowNumber: true});