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

回答

相關問題