javascript - 计算类似于excel的数字数组的颜色代码

Question

我有一个数字数组，想计算每个数字的颜色（如#559e43）：

var numbers = [322.5,256.0,209.0,309.0,493.0,261.0,313.0,228.0,376.0,322.0,327.5,332.0,272.0,387.0,451.0,247.0,329.0,314.0];

目标是有一个函数 getColorCode() 来检索数组中每个数字的颜色。

var maxval = Math.max(...arr);
var minval = Math.min(...arr);

for(var i=0;i<numbers.length;i++){
   getColorCode(numbers[i], minval, maxval);
}​

格式规则应与屏幕截图中显示的相同/相似（Excel）

标签： javascript

Answer 1

这有两个部分。

1. 计算范围内的分布
2. 在给定范围内的百分比内插颜色

如果仅使用百分比进行演示，则数字 1 很容易：

var min = Math.min.apply(null,numbers);
var max = Math.max.apply(null,numbers);
var numPct = numbers.map(value => ({value,pct: ((value - min) / (max - min))}))

Nuber 2 涉及更多一点，这个答案有帮助（有一些小的变化）。

请注意，为了简单起见，下面使用百分比，而 excel 使用百分位- 读者的练习会相应地分发。

var percentColors = [
    { pct: 0.0, color: { r: 0x00, g: 0xff, b: 0 }},
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0xff, g: 0x00, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
}  

var numbers = [322.5,256.0,209.0,309.0,493.0,261.0,313.0,228.0,376.0,322.0,327.5,332.0,272.0,387.0,451.0,247.0,329.0,314.0];

var min = Math.min.apply(null,numbers);
var max = Math.max.apply(null,numbers);
var numPct = numbers.map(value => ({value,pct: ((value - min) / (max - min))}))

var out = document.querySelector("#output");


for(var i=0;i<numPct.length;i++){
   var div = document.createElement('div');
  div.style.backgroundColor = getColorForPercentage(numPct[i].pct)
  div.innerHTML = numPct[i].value;
  out.append(div);
}

<div id="output">

</div>