根据Google散点图的值更改点颜色 [英] Change point colour based on value for Google Scatter Chart

问题描述

我正在创建Google散点图.我有一个数据系列，看起来像:

I am creating a Google scatter chart. I have one data series which looks something like:

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

我希望根据每个点的值"在散点图上的点的颜色在绿色和红色之间变化.

I want the colour of the points on the scatter chart to vary, between green and red, based on the 'Value' of each point.

即点ID = 1的颜色应为绿色，而点ID = 8的颜色应为红色！

i.e. the colour of point ID=1 should be green, however ID=8 should be red!

这可能吗?

推荐答案

向角色表添加额外的列，其角色样式为:

Add an extra column to your DataTable, with the role style :

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

现在将样式添加到每一行以获得所需的效果:

Now add styling to each of the rows to get the desired effect :

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/

demo -> http://jsfiddle.net/v92k8rty/

更新.有一个(可能约有数百个)JavaScript库，可以很容易地提供具有可自定义的颜色和范围的渐变调色板- RainbowVis-JS .代替上面的方法，通过在与DataTable相同的范围内使用RainbowVis创建调色板，然后动态添加颜色:

Update. There is one (out of probably hundreds) javascript library that very easily can provide a gradient palette with customizeable colors and range - RainbowVis-JS. Instead of the above, create a palette by using RainbowVis in the same range as the DataTable, and then add the colors dynamically :

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

demo -> http://jsfiddle.net/ehgfwh8z/

这篇关于根据Google散点图的值更改点颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！