javascript - 根据值在气泡图上设置气泡颜色

Question

我必须根据数组上的数字设置气泡图上每个气泡的颜色。我唯一知道的是：

• 如果值等于3，颜色必须是"#a68500"
• 如果值等于0，颜色必须是"#fff79b"

因此，如果数组的一个元素的值为“2.5”，我必须在色标中找到代表该数字的颜色。

我正在使用 dojox.charting，但我不知道如何创建一个基于值返回颜色的函数。

任何想法都会有所帮助！！！！

Answer 1

所以在这里我认为你会想要对数值 rgb 值做一些基于百分比的数学运算。如果您有 rgb 到 hex 函数可用，请利用它们，如果没有：

var r,g,b,rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(color);

if( rgb.length == 5 ) { //argb hex format
    r = parseInt(rgb[2], 16);
    g = parseInt(rgb[3], 16);
    b = parseInt(rgb[4], 16);
    }
else {
    r = parseInt(rgb[1], 16);
    g = parseInt(rgb[2], 16);
    b = parseInt(rgb[3], 16);
}

因此，对于 r：0 是 ff，3 是 a6，您将转换为 0:255 和 3:166，这会将 2.5 置于 ~181 回到 Hex 会做181.toString(16);

Answer 2

function getInterpolation(x, min1, max1, min2, max2) {
    return Math.round(x/(max1-min1)*(max2-min2)+min2);    
}

getInterpolation(2.5, 0, 3, 0xff, 0xa6);对每个 RGB 组件使用此方法。如果您经常在循环中使用它，您可以将 min 和 max 更改为一些 const 值。