根據Google Scatter Chart的值更改點顏色

Question

我正在創建Google散點圖。我有一個數據系列它看起來像：

var data = new google.visualization.DataTable(); 
data.addColumn('number', 'ID'); 
data.addColumn('number', 'Value'); 

data.addRows([[1,100], [2,150], 
       [3,200], [4,250], 
       [5,300], [6,350], 
       [7,400], [8,450]]); 

我想散點圖上的點的色彩變化，綠色和紅色之間的基礎上，每個點的「值」。

即點ID = 1的顏色應爲綠色，但ID = 8應爲紅色！

這可能嗎？

Answer 1

添加一個額外的列到您的DataTable，與角色風格：

data.addColumn({'type': 'string', 'role': 'style'}); 

現在添加樣式到每一行，以獲得預期的效果：

data.addRows([[1,100, 'point {size: 14; fill-color: green'], 
       [2,150, 'point {size: 14; fill-color: green'], 
       .... 
       [8,450, 'point {size: 14; fill-color: red'] 
      ]); 

演示 - >http://jsfiddle.net/v92k8rty/

---

更新。有一個（可能有幾百個）javascript庫，非常容易提供具有可定製顏色和範圍的漸變色板 - RainbowVis-JS。取而代之的是上述，通過在相同範圍內的DataTable使用RainbowVis創建一個調色板，然後動態地添加顏色：

//create a gradient palette from green to red using RainbowVis 
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, data.getNumberOfRows()); 
rainbow.setSpectrum('green', 'red'); 

//alter the DataTable 
data.addColumn({'type': 'string', 'role': 'style'});  
for (var i=0;i<data.getNumberOfRows();i++) { 
    data.setCell(i, 2, 'point { fill-color:'+rainbow.colorAt(i+1)+'}'); 
}  

演示 - >http://jsfiddle.net/ehgfwh8z/