根据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添加一个额外的列：

return ("\t"+Tab(temp-1));

现在为每一行添加样式以获得所需的效果：

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

演示 - ＆gt;的 http://jsfiddle.net/v92k8rty/

<强>更新即可。有一个（大概数百个）javascript库可以很容易地提供具有可定制颜色和范围的渐变调色板 - RainbowVis-JS。而不是上述内容，使用与DataTable相同的范围内的RainbowVis创建调色板，然后动态添加颜色：

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

演示 - ＆gt;的 http://jsfiddle.net/ehgfwh8z/