HSL 到 RGB 自动着色 AngularJS

Question

我这里有几个不同的作品，但我正在努力解决如何将它们整合在一起的问题。我目前有一个按健康状况排序的元素列表（给定的值在 0 到 100 之间）。

对于每个元素，我想根据其健康状况为背景着色。所以，status = 0 意味着我的填充颜色是红色；状态=50 黄色；状态=100 绿色。

在类似 d3 的情况下，我将使用以下代码来完成（顺便说一下，这是一个很棒的技巧）：

    /*normalize input between 0 and 100 to hsl color scale -- so 0=0 and 100 = 120, where  hue=0 is red and hue=120 is green */    

var hueScale = d3.scale.linear().domain([0,100]).range([0,120]); 

    .style("fill", function(d){
        var hslColor = 'hsl(' + hueScale(d.status)) + ', ' + (100) + '%, ' + (50) + '%, ' + (1) + ')'; 
        return d3.rgb(hslColor).toString().toUpperCase(); })

但在这里，我处理的是普通列表，而不是 d3 图形。

我过去也使用过 ng-class 来指定动态颜色：

$scope.getClass = function(status) {
    if (status == (100)) {
        return "good-feed"; 
    } else {
        return "bad-feed";
    }
    };

和

   ng-class="[getClass(item.status)]"

我需要结合这两种技术。我认为以与我所拥有的类似的方式使用 ng-class 是我需要做的，但我不确定如何使颜色更改功能正常工作而不会不必要地复杂化。

有什么想法吗？

编辑我当前上面的两个代码片段都有效，但问题是我希望能够遍历 0 到 100 之间的所有状态值，而不仅仅是处理非此即彼的情况。

例如：

状态为 23 的项目 1（大约颜色：橙色）
状态为 45 的项目 2（近似颜色：黄橙色）
状态为 67 的项目 3（大约颜色：黄绿色）
状态为 99 的项目 4（大约颜色：绿色）

等等。现在，我可以为 ng-class 编写我的颜色函数，使其看起来像这样（更新：这不起作用）：

$scope.getClass = function(status) {
    if (status <= (10)) {
        return "dark-red"; 
    } else if (10 < status <= 20){
        return "red-orange"; 
// continue pattern for all intervals until 100 is reached
    } else {
        return "undefined-grey";
    }
};

但是像这样手动检查每个值似乎很笨拙。有什么方法可以使它更平滑（类似于 d3 解决方案）？

Answer 1

就用这个

ng-class="{'good-feed' : item.status == 100,'bad-feed' : item.status != 100 }"

Answer 2

好的，所以这个答案是我目前得到的最好答案。它仍然需要一些工作才能让它完全按照我的意愿进行，但它在正确的轨道上：

我最终使用 jquery 根据值分解颜色（就像我试图用我的 ng-class 函数做的那样）

有关详细信息，请参阅我的 JSFiddle。

$(document).ready(function () {

var cell = $('ul.list-view li');

cell.each(function() {
var cell_value = parseFloat($(this).html().slice(0, -1));

// Positief

if ((cell_value >= 0) && (cell_value <= 0.3)) {
    $(this).css({'background-color' : '#7FFF95'});   
} 
else if ((cell_value >= 0.31) && (cell_value <= 0.5)) {
    $(this).css({'background-color' : '#66FF7C'});
} 
else if ((cell_value >= 0.51) && (cell_value <= 0.7)) {
    $(this).css({'background-color' : '#4DFF63'});
} 
else if ((cell_value >= 0.71) && (cell_value <= 1)) {
    $(this).css({'background-color' : '#33F749'});
}
else if ((cell_value >= 1.01) && (cell_value <= 1.5)) {
    $(this).css({'background-color' : '#1ADE30'});
}
else if (cell_value >= 1.5) {
    $(this).css({'background-color' : '#00CC66'});
}

// Negatief

else if ((cell_value >= -0.01) && (cell_value <= -0.2)) {
    $(this).css({'background-color' : '#F6ADAC'});
}
else if ((cell_value >= -0.31) && (cell_value <= -0.5)) {
    $(this).css({'background-color' : '#F18483'});
}
else if ((cell_value >= 0.51) && (cell_value <= -0.7)) {
    $(this).css({'background-color' : '#EF706E'});
}
else if ((cell_value >= -0.71) && (cell_value <= -1)) {
    $(this).css({'background-color' : '#ED5B5A'});
}
else if ((cell_value >= -1.01) && (cell_value <= -1.5)) {
    $(this).css({'background-color' : '#EB4745'});
}
else if (cell_value >= -1.5) {
$(this).css({'background-color' : '#E93331'});
}

});

HSL 到 RGB 自动着色 AngularJS

HSL to RGB Auto-Color with AngularJS

d3.js

angularjs

ng-class