jquery circle-progress中的動態顏色

我正在使用jquery circle-progress插件，並且我希望根據用法將顏色設置爲3種顏色，例如顏色應該是從0到10和從10到90的橙色，藍色和紅色如果100和代碼低於jquery circle-progress中的動態顏色

var c4 = $('.forth.circle'); 
c4.circleProgress({ 
    startAngle: -Math.PI/4 * 3, 
    value: 0.1, 
    size: 170, 
    fill: { color: '#fc5201' } 

});

來源

2016-02-17 user3153433

這個例子看起來並不完整。你可以編輯和添加更多的細節，如使用的HTML。 – Twisty

我已經從您引用的示例創建了一個小提琴：https：//jsfiddle.net/Twisty/yn6t6cvg/ – Twisty

您將不得不使用漸變，並且它不着色圓的段，但背景。我得到了這一點：https://jsfiddle.net/yn6t6cvg/3/

這不完全是你想要的，但也許它會讓你朝着正確的方向前進。

HTML

<div class="circles"> 
    <div class="forth circle"> 
    <strong></strong> 
    <span>custom angle, <br/> value update</span> 
    </div> 
</div>

CSS

.circle { 
    width: 100px; 
    margin: 6px 6px 20px; 
    display: inline-block; 
    position: relative; 
    text-align: center; 
    line-height: 1.2; 
} 

.circle canvas { 
    vertical-align: top; 
} 

body { 
    background-color: #444; 
    padding-top: 40px; 
    font: 15px/1.3 Arial, sans-serif; 
    color: #fff; 
    text-align: center; 
} 

.circle span { 
    display: block; 
    color: #aaa; 
    margin-top: 12px; 
}

JQuery的

$(document).ready(function() { 
    var c4 = $('.forth.circle'); 

    c4.circleProgress({ 
    startAngle: -Math.PI/4 * 3, 
    value: .75, 
    size: 170, 
    fill: { 
     gradient: [ 
     ["red", .3], 
     ["blue", .6], 
     ["orange", .3] 
     ], 
     gradientAngle: Math.PI/4 * 8.5, 
    } 
    }); 
});

來源

2016-02-17 20:03:14 Twisty

jquery circle-progress中的動態顏色

回答

相關問題