javascript - 如何使用条件 CSS 更改此图的颜色？

Question

我不知道我是否需要在我的 css 中使用 js 来改变我的图表的颜色。图表的颜色必须取决于其中的数字。我想要的带有样式的数字：20<= 绿色，>20 或 ==30 黄色，>30 红色。我已经用绿色设置了图形的样式，但就像我说的那样，我想用条件 CSS 使这个动态变化。我也尝试过使用 ngClasses，但我不熟悉它们，也不知道如何使用它们。

类 ppc-progress-fill 的样式为绿色。

我的 HTML：

<div class="progressDiv">
            <div class="statChartHolder">
                <div class="progress-pie-chart"><!--Pie Chart -->
                    <div class="ppc-progress">
                        <div class="ppc-progress-fill" [ngClass="{'red' :colorStatus==1, 'yellow' :colorStatus==2, 'green' : colorStatus==3}"]></div>
                    </div>
                    <div class="ppc-percents">
                    <div class="pcc-percents-wrapper">
                        <span>49</span>
                        <span id="pending">projects pending</span>
                    </div>
                    </div>  
                </div><!--End Chart -->
            </div>    
        </div>

我的 CSS：这有圆圈的颜色：

    .ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: #81CE97;
  transform: rotate(90deg);
}

这具有文本的颜色：

    .ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}

在此处输入图像描述

标签： javascripthtmlcss