HSL RGB自动颜色与AngularJS

我在这里有几个不同的工作，但我正在努力如何把他们所有在一起。我目前有一个按健康状态排序的元素列表（0到100之间的值）。HSL RGB自动颜色与AngularJS

对于每个元素，我想根据其健康状态对背景着色。所以，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图形。

，我也做了，在过去使用纳克级的指定动态颜色：

$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与
项目4与99的状态（约颜色：绿色）

等等：67（黄绿约色）的状态。现在，我可以写我的色彩功能NG-类看起来像这样（更新：这不起作用）：

$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解决方案）？

来源

2017-05-04 KateJean

好了，所以这个答案是我已经得到了现在最好的。它仍然需要一些工作来得到这个我想做的，但它是在正确的轨道上：

我最终使用jquery根据值分解颜色（就像我试图用我的ng-类功能）

有关详细信息，请参阅我的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'}); 
} 

});

来源

2017-05-09 15:00:21 KateJean

只是用这个

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

来源

2017-05-04 18:55:09

权利 - 这肯定适用于存在“无论 - 或”情况。我会确保将我的问题更新得更清楚。这不是我要做的。我的当前代码片段上面的工作（事实上，我上面的解决方案给出了与你的相同的结果），但问题是我想能够遍历0和100之间的所有状态值，而不仅仅处理 - 或情况。例如：项目1，状态= 23（颜色：橙色）项目2，状态= 45（颜色：黄橙色）项目3，状态= 67（颜色：黄 - 绿）项目4，状态= 99（色：绿色） – KateJean

HSL RGB自动颜色与AngularJS

回答

相关问题