颜色范围 - 角度表值

Question

假设我们有以下设置（如下），我希望表格有 5 个单元格，但我希望 5 个单元格具有从绿色到红色的动态颜色范围（1 = 绿色， 3 = 黄色，5 = 红色等）

我可以使用的唯一技术是：CSS3 / HTML5 / Angular - 我可以使用任何角度库

在 excel 中这样做是微不足道的，但由于我对 angular 还很陌生，所以我确实有点迷路了。

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

这基本上是这个问题的角度版本：Coloring HTML table cells from "Low to High Color Shades" depending on Cell Value in Python HTML Email 和这个Color Cell Based on Value in Cell

我昨晚大部分时间都在搜索 StackOverflow，但找不到答案。

这是一个示例（来自 excel 的屏幕截图）

Answer 1

如果其他人偶然发现这一点，并且对提供的解决方案不满意，我会拼凑另一个解决方案。

我希望能够使用一组值并将它们的颜色从最低的红色缩放到最高的绿色，并将中点颜色用作黄色。

看看下面和小提琴，看看一个可行的解决方案。

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}`;
};

这里是fiddle

Answer 2

与 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";
}

我所做的小测试似乎运行良好。 JSFiddlehere

注意：这是专门为绿色到红色定制的。相同的数学可以应用于其他配色方案，但必须再次手动完成

Answer 3

纯 Angular 和 javascript。 Javascript 代码质量不好，但在这里只是为了让您了解一下。我写得真快……

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

HTML：

   <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 颜色模型中的 Hue 会在整个光谱范围内从 0 变为 1。您应该选择从第一个元素到最后一个元素想要达到的光谱范围，并相应地限制功能。尽管根据您的规范处理边缘情况（如 1 或 2 个元素）。

jsfiddle 中的工作示例

HSVToRGB() 的积分归 Paul S.https://stackoverflow.com/a/17243070/4573999