谷歌柱圖有條件地設置顏色

Question

我希望能夠有條件地爲谷歌圖表柱狀圖中的給定列設置顏色，具體取決於其值。例如，如果條紋是< 50，則將其着色爲黃色或高於70，並將其着色爲綠色。如果解決方案是在API內部完成的，那將是非常好的，但這可能不會是這樣。

Answer 1

可以使用'style' column role上色特定列

風格的作用僅僅是在數據表中的列，
應遵循的一系列列應該樣式

如果你想要顏色的綠柱例如...

['A', 100, 'green'] 

指定顏色有條件，
我們可以使用一個DataView和setColumns method
，其允許我們添加計算列

見下述工作片斷，
陣列被用來存儲數值範圍，以及相關聯的顏色...

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y'], 
 
    ['A', 9], 
 
    ['B', 30], 
 
    ['C', 50], 
 
    ['D', 70], 
 
    ['E', 90] 
 
    ]); 
 

 
    var ranges = [ 
 
    [0, 10, '#e53935'], // red 
 
    [10, 50, '#fdd835'], // yellow 
 
    [50, 90, '#43a047'], // green 
 
    [90, null, '#1e88e5'] // blue 
 
    ]; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: function (dt, row) { 
 
     var rowValue = dt.getValue(row, 1); 
 
     var color; 
 
     ranges.forEach(function (range, index) { 
 
     if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) { 
 
      color = range[2]; 
 
     } 
 
     }); 
 
     return color; 
 
    }, 
 
    role: 'style', 
 
    type: 'string' 
 
    }]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(view, { 
 
    legend: 'none' 
 
    }); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>