Question

让我们假设我们有以下设置（下图），我希望桌子有5个单元格，但我希望5个单元格的动态颜色范围从绿色变为红色（1 =绿色， 3 =黄色，5 =红色，等等）

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

在excel中这很简单，但由于我对角度很新，但我确实有点失落。

~ 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的截图） Example

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>

Controller 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 here

注意：这是专为绿色到红色量身定制的。这个相同的数学可以应用于其他颜色方案，但它必须在某种程度上再次手动完成

Answer 2

Pure 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

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

这里是fiddle

颜色范围 - 角度表格值

3 个答案: