複数のチャートを1つのページ

Question

私は自分のプロジェクトダッシュボードで使用するためのjavascriptチャートを作成しましたが、複数のチャートと同じIDで動作するように苦労しています（PHP内にあるものと同じ名前でなければなりません各ループについて）。

あなたはこのペンで見ることができるように：、私は別の割合を定義しているが、それは唯一の両方のチャート上の最初の割合を表示している

http://codepen.io/assasinate66/pen/GrMBYp

   <div class="progress-pie-chart" data-percent="40"><!--Pie Chart --> 
       <div class="ppc-progress"> 
        <div class="ppc-progress-fill"></div> 
       </div> 
       <div class="ppc-percents"> 
       <div class="pcc-percents-wrapper"> 
        <span>%</span> 
       </div> 
       </div> 
      </div><!--End Chart --> 

      <div class="progress-pie-chart" data-percent="70"><!--Pie Chart --> 
       <div class="ppc-progress"> 
        <div class="ppc-progress-fill"></div> 
       </div> 
       <div class="ppc-percents"> 
       <div class="pcc-percents-wrapper"> 
        <span>%</span> 
       </div> 
       </div> 
      </div><!--End Chart --> 
<script> 
$(function(){ 
    var $ppc = $('.progress-pie-chart'), 
    percent = parseInt($ppc.data('percent')), 
    deg = 360*percent/100; 
    if (percent > 50) { 
    $ppc.addClass('gt-50'); 
    } 
    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)'); 
    $('.ppc-percents span').html(percent+'%'); 
}); 
    </script> 

それはJSを必要とするようにそれはそう/いくつかの並べ替えのJQueryループ。

ありがとうございます！

Answer 1

問題は、2つの要素を同時に選択し、それらの要素のプロパティを設定しようとしていることです。それはうまくいかないでしょう。私の考えでこれを修正する最も良い方法は、.each（）（ループ）を使うことです。

$(function(){ 
    var $ppc = $('.progress-pie-chart'); 
    $ppc.each(function(){ 
     var percent = parseInt($(this).data('percent')); 
     var deg = 360*percent/100; 
     if (percent > 50) { 
      $(this).addClass('gt-50'); 
     } 

     $(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)'); 
     $(this).find('.ppc-percents span').html(percent+'%'); 
     }); 
}); 

このJSを使用すると、魅力的に機能します。