颜色范围表的角值

Question

假设我们有以下设置(如下所示)，我希望表有5个单元格，它会这样做，但我希望这5个单元格具有一个从绿色到红色的动态颜色范围(1 =绿色，3=黄色，5=红色，等等)

唯一允许我使用的技术是: CSS3 / HTML5 /ar角--我可以使用任意的角库。

在卓越的琐碎做这件事，但由于我相当新的角度，我承认我有点迷失了。

~ Script
var arrayWith5Values = [1,2,3,4,5]
~
    <table>
        <tr>
           <td ng-repeat='numericValue in arrayWith5Values'>
              {{numericValue}}}
           </td>
        </tr>
    </table>

这是这个问题的角度版本：根据Python电子邮件中的单元格值，将HTML表格单元格从“低到高颜色阴影”着色和基于细胞价值的彩色细胞

昨天晚上，我一直在搜索StackOverflow，但一直找不到答案。

下面是一个示例(来自excel的屏幕截图)

​

Answer 1

与Kirill Slatin的回答相同，但这个答案要简单得多：

HTML：

<table>
    <tr>
       <td ng-repeat='numericValue in arrayWith5Values' style="background-color: rgb({{getColor($index)}})"
        ng-init="$parent.numValues = arrayWith5Values.length">
          {{numericValue}}
       </td>
    </tr>
 </table>

控制器JS：

$scope.arrayWith5Values = [1,2,3,4,5,6,7,8,9,10];
$scope.getColor = function(index) {
    var greenVal = Math.round(Math.min((255.0*2.0)*(index/($scope.numValues-1)), 255));
    var redVal = Math.round(Math.min((255.0*2.0)*(($scope.numValues-1-index)/($scope.numValues-1))));
    return "" + greenVal + "," + redVal + ",0";
}

我做的那些小测试似乎效果很好。JSFiddle 这里

注意：这是专为绿色到红色量身定做的。同样的数学也可以应用到其他配色方案中，但这需要再一次手工操作。

Answer 2

纯角和javascript。Javascript代码质量不是很好，但这里只是为了让您了解这个想法。我写得真快..。

IDEA：使用自定义函数(getColor())定义背景色或元素。请注意，{{}}在角加$watch表达式时要大括号。因此，我建议使用一次绑定通过{{::}}，如果你有足够的新鲜角度(v1.3+)。否则使用角库BindOnce

   <tr ng-repeat="arr in data">
        <td ng-repeat="value in arr" ng-attr-style="background: #{{::getColor(value, arr)}};">
            {{value}}
        </td>
    </tr>

Javascript

$scope.getColor = function(item, array){
    var h = item / array.length ;
    return RGBtoHex(HSVtoRGB(h, 1, 1))
};
function RGBtoHex(color){
    var r = color.r.toString(16);
    if(r.length < 2) r = '0' + r;
    var g = color.g.toString(16);
    if(g.length < 2) g = '0' + g;
    var b = color.b.toString(16);
    if(b.length < 2) b = '0' + b;
    return r + g + b;
}

function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    if (h && s === undefined && v === undefined) {
        s = h.s, v = h.v, h = h.h;
    }
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    return {
        r: Math.floor(r * 255),
        g: Math.floor(g * 255),
        b: Math.floor(b * 255)
    };

PS：getColor()是您需要根据调色板重新定义的函数。请注意，HSV颜色模型中的色调从0变化到1，涵盖了整个光谱。你应该选择你想要达到的光谱范围，从第一个到最后一个元素，并相应地限制功能。尽管根据您的规范处理边缘情况(如1或2个元素)。

本小提琴中的工作示例

HSVToRGB()的学分属于保罗S. https://stackoverflow.com/a/17243070/4573999

Answer 3

如果其他人无意中发现了这个问题，并没有我对所提供的解决方案感到满意，我就黑了另一个解决方案。

我希望能够使用一系列的值和颜色比例，从最低的红色到最高的绿色，以及使用中点颜色为黄色。

看看下面以及小提琴，看看一个有效的解决方案。

ctrl.getColor = function(value, min_value, max_value) {
    let [highMaxR, highMaxG, highMaxB] = [99, 190, 123];
    let [lowMaxR, lowMaxG, lowMaxB] = [248, 105, 107];
    let [midMaxR, midMaxG, midMaxB] = [255, 235, 132];

    if (Math.round(max_value - min_value) === 0) return `${highMaxR}, ${highMaxG}, ${highMaxB}`;

    let mid_point = (max_value + min_value) / 2;
    if (value > mid_point) {
      [lowMaxR, lowMaxG, lowMaxB] = [midMaxR, midMaxG, midMaxB];
      min_value = mid_point;
    } else {
      [highMaxR, highMaxG, highMaxB] = [midMaxR, midMaxG, midMaxB];
      max_value = mid_point;
    }

    let percentage = Math.abs((value - min_value) / (max_value - min_value));

    let redVal = Math.round(lowMaxR + ((highMaxR - lowMaxR) * percentage));
    let greenVal = Math.round(lowMaxG + ((highMaxG - lowMaxG) * percentage));
    let blueVal = Math.round(lowMaxB + ((highMaxB - lowMaxB) * percentage));

    return `${redVal}, ${greenVal}, ${blueVal}`;
};

这是小提琴