2016-10-02 86 views
0

我正在寻找一个选项,以使值为小于0时的“红色”为谷歌条形图的颜色。现在我尝试了很多东西。但没有工作。谷歌条形图颜色为负值或小于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); 
    } 

回答

0

我已经得到了我的问题的答案。只是增加了对酒吧的看法。

由于这个链接 - 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); 

    }