Angular中的條件格式

Question

這是Microsoft Excel中的條件格式設置功能，其中彩條表示與最高值相比較的百分比。

反正是有使用HTML5無論是CSS或JavaScript來實現這一目標？或者也可以使用額外的Angular庫。

我正在考慮使用clip-path至但是這個功能可能不會獲得廣泛支持所有瀏覽器

Answer 1

你的意思是this？

你可以在vanillaJS中做到這一點。你必須得到所有元素

const elNodes = document.querySelectorAll('.element'); 
const elements = [...elNodes]; 

獲取他們的價值觀，並找到最大值

const elementsValues = elements.map((el) => parseFloat(el.children[1].textContent)); 
const maxValue = Math.max(...elementsValues); 

最後更改元素的寬度基於價值：

elements.forEach((el) => { 
    el.children[0].style.width = 100/(maxValue/parseFloat(el.children[1].textContent)) + '%'; 
});