Question

我在这里有一些不同的工作，但我正在努力将它们整合在一起。我目前有一个按健康状况排序的元素列表（值在0到100之间）。

对于每个元素，我想根据其健康状况为背景着色。所以，status = 0意味着我的填充颜色为红色;状态= 50黄色; status = 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之间的所有状态值，而不仅仅是处理任何一种情况。

例如：

项目1，状态为23（约为颜色：橙色）
第2项，状态为45（约为颜色：黄橙色）
项目3，状态为67（约为颜色：黄绿色）
第4项，状态为99（约为颜色：绿色）

等等。现在，我可以为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'});
}

});

使用AngularJS进行HSL到RGB自动颜色

2 个答案: