javascript - 如何创建具有一定梯度分布的 HTML 颜色数组？

Question

JavaScript。我有一个数字数组 var values = [1,20,12,6,9];

我需要创建一个相同大小的新数组，以便：

1. 对应于第一个数组中最大元素的元素是 ALWAYS"#3E296B"
2. 与第一个数组的最小元素对应的元素是 ALWAYS "#FFFFFF"。
3. 其他元素应该获得与其值"#3E296B"成"#FFFFFF"比例的渐变颜色

即我的新数组应该大致如下：（var colors = [white, blue, less_blue, less_less_blue, less_blue]我用文字写了以简化）

Answer 1

这是一个解决这个确切问题的库：

https://github.com/anomal/RainbowVis-JS

因此，在包含它之后，您将执行以下操作：

var rainbow = new Rainbow();
rainbow.setSpectrum('#ffffff', '#3E296B');
rainbow.setNumberRange(1, 20); 
rainbow.colourAt(number); // based on the numbers from your array, this would return the color you want