使用Google Visualization Geochart Color Scale实现3种颜色尺寸

时间:2013-10-08 06:55:34

标签: javascript colors google-visualization

我的数据有三个不同的'向量'。对于我的数据中的每一行,我有百分之几的狗,百分之百像猫,百分之百与其他宠物一样。

A  20, 40, 40
B  10, 20, 70
C  80,  0, 20
D  90, 10,  0
...

我想使用Google Visualization Geochart根据他们喜欢的宠物颜色来表示国家/地区。我想通过分配一个RGB值来做到这一点,这取决于该国家中某些类型宠物的百分比。

所以100,0,0将是100%红色。 0,100,0将是100%绿色。 0,0,100将是100%蓝色。以及介于两者之间的一切。

如果手动编码颜色,使用javascript like this很容易。我遇到的问题是每一行都有不同的组合(我有很好的关于宠物偏好的数据,直到几个小数点),这需要我为每一行分配一个颜色值,我有大约200他们。

虽然这是最后的手段,但我更倾向于使用内置于Geochart的渐变来为我做繁重的工作。

问题是颜色渐变仅允许2d渐变。我可以有多个渐变,但我无法确定是否只使用2d渐变,我可以代表3d色彩空间。

所以我可以为:

创建一个渐变
  • 红色到绿色
  • 绿色到蓝色
  • 蓝色到绿色

这是否涵盖了色彩范围的可能性,还是只是让我控制色调,而不是饱和度或亮度?这是可行的,还是我最好还是采用解决方法?

1 个答案:

答案 0 :(得分:0)

我最终手动操作,因为它非常容易。我最终为我的数据添加了4个向量,因此我使用CMYK颜色模型对它们进行着色。对于每个向量,我计算了%作为颜色的C,M,Y或K分量的一部分。

然后我使用以下逻辑(伪代码)将其转换为RGB:

C' = C * (100% - K) + K
M' = M * (100% - K) + K
Y' = Y * (100% - K) + K

R = 255 - 255 * C'
G = 255 - 255 * M'
B = 255 - 255 * Y'

我将它们转换为HTML颜色代码并将它们放在一个数组中。然后,我为每个对应于数组中元素的行分配了一个值,并将其放在选项的colorAxis.colors部分中。

结果是令人难以置信的丑陋,并且作为一种传达信息的方式完全不切实际。不仅颜色太可怕了(青色,洋红色和黄色不是很好的颜色组合),但除非你是一个真正的色彩专家(我的观众不是),否则你真的不知道混合是什么。 / p>

回到绘图板!