javascript - 一页上多个图表

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

问题在于您一次选择两个元素并尝试设置这些元素的属性。那是行不通的。我认为解决此问题的最佳方法是使用 .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，它将发挥作用!