cssでプログレスバーの塗りつぶしの色を変更するには

Question

私はHTMLテンプレートでカラーピッカーオプションを使用します。プログレスバーはjavascriptコードからの色の変化を埋めるので、私はプログレスバーの色をcssで変更しません。 どうすれば変更できますか？ 私は、チャートがキャンバスに描かれているように思え

$(document).ready(function ($) { 
    function animateElements() { 
     $('.progressbar').each(function() { 
      var elementPos = $(this).offset().top; 
      var topOfWindow = $(window).scrollTop(); 
      var percent = $(this).find('.circle').attr('data-percent'); 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
      var animate = $(this).data('animate'); 
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { 
       $(this).data('animate', true); 
       $(this).find('.circle').circleProgress({ 
        startAngle: -Math.PI/2, 
        value: percent/100, 
        thickness: 14, 
        fill: { 
         color: '#1B58B8' 
        } 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
        $(this).find('div').text((stepValue*100).toFixed(1) + "%"); 
       }).stop(); 
      } 
     }); 
    } 

    // Show animated elements 
    animateElements(); 
    $(window).scroll(animateElements); 
}); 

Demo Here

Answer 1

ここで、このプラグインが含まれています。したがって、CSSで塗りつぶしの色を指​​定することはできません。あなたはあなたのJSでそれをしなければなりません。

あなたdiv秒にいくつかの余分なデータを追加する気にしない場合は、迅速なハック（fiddle作業）以下のコードのようになります。

<!--           HERE ====| --> 
<div class="progressbar" data-animate="false" data-fill-color="#ff000"> 
    <div class="circle" data-percent="100"> 
    <div></div> 
    <p>Testing</p> 
    </div> 
</div> 
<!--       DIFFERENT COLOR HERE ====| --> 
<div class="progressbar" data-animate="false" data-fill-color="#000"> 
    <div class="circle" data-percent="30.5"> 
    <div></div> 
    <p>Testing</p> 
    </div> 
</div> 

$('.progressbar').each(function() { 
    // ... 

    value: percent/100, 
    thickness: 14, 

    fill: { 
    color: $(this).data('fill-color') // <===== HERE 
    } 

    }).on('circle-animation-progress', function(event, progress, stepValue) { 
    // ...