谷歌条形图颜色为负值或小于0的值

时间:2016-10-02 10:16:16

标签: google-visualization bar-chart

我正在寻找一个选项,当值小于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);
    }

1 个答案:

答案 0 :(得分: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);

    }