Angular中的條件格式

Question

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

無論如何，是否有使用CSS或JavaScript的HTML5來實現這一目標的？ 或者也可以使用其他Angular庫。

我正在考慮使用clip-path ，但可能並非所有瀏覽器都廣泛支持此功能

Answer 1

你是這個意思嗎

您可以在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)) + '%';
});