Question

所以，我有这个“小部件”就像一个径向进度条。我现在工作得很好。当值变化很大时它会动画，但我想使用交通信号灯颜色方案，这样它越接近100％它越红，越接近0％它变得更绿，50％变黄

我对此的HTML看起来有点像这样：

        <div class="radial-progress" data-progress="{{ controller.progress }}">
        <div class="circle">
            <div class="mask full">
                <div class="fill"></div>
            </div>
            <div class="mask half">
                <div class="fill"></div>
                <div class="fill fix"></div>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="inset">
            <div class="percentage">
                <span id="progress">0</span>%
            </div>
        </div>
    </div>

    <div class="footer">
        <div>
            <div>
                <strong>Credit limit: </strong><span class="pull-right">{{
                    controller.data.currencyCharacter }}{{ controller.data.creditLimit |
                    number: 2}}</span>
            </div>
            <div>
                <strong>Available credit: </strong><span class="pull-right"
                    ng-class="{'lead text-danger': controller.data.availableCredit < 0 }">{{
                    controller.data.currencyCharacter}}{{
                    controller.data.availableCredit | number: 2}}</span>
            </div>
        </div>
    </div>

你可能已经注意到了，我正在使用角度js所以我没有使用jQuery，所以如果需要任何javascript则需要纯粹的javascript！

我已经设置了一个codepen，因此您可以看到我当前的版本：

https://codepen.io/r3plica/pen/JJpwRe

如果有人可以帮助我，那就太棒了。

Answer 1

参见here 我添加了以下javascript

var percentColors = [
{ pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
{ pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
{ pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
}

并修改了您的更新功能，以及我向transition:0.5s;添加了.fill css

具有变化颜色的径向动画

1 个答案: