javascript - 3 个颜色维度与 Google Visualization Geochart Color Scale

Question

我的数据有三个不同的“向量”。对于数据中的每一行，我都知道喜欢狗的百分比、喜欢猫的百分比以及喜欢其他宠物的百分比。

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 渐变是否可以表示 3d 色彩空间。

所以我可以为以下内容创建渐变:

• 红转绿
• 绿转蓝
• 蓝色到绿色

这会涵盖颜色可能性的范围，还是只会让我控制色调，但不能控制饱和度或亮度？这是可行的，还是我最好采用解决方法？

Answer 1

我最终手动完成了它，因为它要容易得多。我最终得到了 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 部分。

结果是令人难以置信的丑陋，并且作为传达信息的方式完全不切实际。这些颜色不仅丑陋(青色、洋红色和黄色不是一个很好的颜色组合)，而且你真的无法分辨出到底是什么颜色，除非你是一个真正的颜色专家(我的观众不是)。

回到绘图板吧!