在JavaScript中将一系列值（例如[0255]）映射到一系列颜色（例如彩虹：[红色，蓝色]）

我相信这一定是一个相当直截了当的问题，但这是一个很难回答的问题。我甚至不知道用谷歌搜索是为了什么

我不是在寻找任何复杂的解决方案。基本上，我是在画布上画线条，根据线条的长度，我想要不同的颜色。通常我只是缩放，比如说，红色通道（#ff0000*（测线长度）/（最大测线长度）），但这个解决方案并不理想。我只是在寻找一个方程，如果有意义的话，它会给出彩虹梯度上某个位置的#rrggbb值

---

感谢所有能帮上忙的人！非常感谢。

既然您使用的是画布，那么您可能可以使用HSL颜色空间（如果我错了，请纠正我）。这将使代码更加简单：

function rainbow(n) {
    n = n * 240 / 255;
    return 'hsl(' + n + ',100%,50%)';
}

如果您对0到240的范围感到满意，那么您甚至可以删除此函数的第一行。请参阅。

这描述了在JS中制作彩虹颜色的方法。基本上，它使用正弦函数来制作彩虹颜色。简而言之，你需要的方程式是这样的。看

---

我最终使用了类似于@rsp的答案

                var getColorAtScalar = function (n, maxLength) {
                    var n = n * 240 / (maxLength);
                    return 'hsl(' + n + ',100%,50%)';
               }

---

我喜欢@rsp的答案（+1'ed），但想提及的是，Prefuse/Flare可视化库使用术语编码器来描述将数据转换为可视属性的功能（如Color:ColorEncoder）：不确定该领域的标准化程度…我更改了示例，使用HSL颜色模型，使其更简单、更美观。我不确定240的范围是什么。当我在Chrome上测试时，它希望

hsl

函数的第一个参数是一个角度，角度从0到360度。@JimPivarski-Matthew问的是从红色到蓝色的彩虹，蓝色在hsl中是240度。360度将再次回到红色，这不是问题中提出的问题。

                var getColorAtScalar = function (n, maxLength) {
                    var n = n * 240 / (maxLength);
                    return 'hsl(' + n + ',100%,50%)';
               }