向您的数据表添加一个额外的列,其角色样式为:
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/
Update。有一个(可能有数百个)JavaScript 库可以非常轻松地提供具有可自定义颜色和范围的渐变调色板 -RainbowVis-JS。代替上面的方法,使用 RainbowVis 在与 DataTable 相同的范围内创建调色板,然后动态添加颜色:
//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)+'}');
}
demo -> http://jsfiddle.net/ehgfwh8z/