根据 Google 散点图的值更改点颜色

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]]);

我希望散点图上的点的颜色根据每个点的 'Value' 在绿色和红色之间变化。

即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/

根据 Google 散点图的值更改点颜色

Change point colour based on value for Google Scatter Chart

google-visualization

scatter-plot