Question

我在这里提到的例子中使用代码 Pie chart Example

JS

$(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+'%');
});

HTML：

<div class="progressDiv">
  <div class="statChartHolder">
     <div class="progress-pie-chart" data-percent="67"><!--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>
   <div class="statRightHolder">
      <ul>
         <li> <h3 class="blue">39.4k</h3> <span>Interactions</span></li>
         <li> <h3 class="purple">1.8k</h3> <span>Posts</span></li>
      </ul>                    
      <ul class="statsLeft">
         <li><h3 class="yellow">22%</h3> <span>Comments</span></li>
         <li><h3 class="red">37%</h3> <span>Cheers</span></li>
      </ul>
      <ul class="statsRight">
         <li><h3>18%</h3> <span>Tasks</span></li>
         <li><h3>23%</h3> <span>Goals</span></li>
      </ul>
   </div>
</div>

html，css和js与上面的链接完全相同。

我想在我的html（比如5）中以相同的格式使用多个饼图。如何识别在js中传递给$ fintion（）的id。

目前有相同的类名（progress-pie-chart），所以如果我在一个饼图上更改数据，它也会被复制到其他的..

Answer 1

您只需为每张图表提供一个ID。然后你可以从JS中选择ID。

请参阅下面的示例。

JS：

      var $chart1 = $('#chart1'),
        percent = parseInt($chart1.data('percent')),
        deg = 360 * percent / 100;
      if (percent > 50) {
        $chart1.addClass('gt-50');
      }
      $('#chart1-fill').css('transform', 'rotate(' + deg + 'deg)');
      $('#chart1-percents span').html(percent + '%');

HTML：

    <!--Pie Chart1 -->
<div class="progress-pie-chart" id="chart1" data-percent="10">
  <div class="ppc-progress">
    <div class="ppc-progress-fill" id="chart1-fill"></div>
  </div>
  <div class="ppc-percents" id="chart1-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>
<!--End Chart1 -->

我还编辑了示例，请参阅此处http://codepen.io/anon/pen/egqRPQ

Answer 2

您可以将不同的id="pie-chart-1"传递给多个饼图..就像这样......

<div class="progress-pie-chart" id="pie-chart-1" data-percent="67">
    <!--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 -->

同样，您可以为另一个id="pie-chart-2"

执行此操作

<div class="progress-pie-chart" id="pie-chart-2" data-percent="67">
    <!--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 -->

＆安培;你的JS就像这样

$(function(){
    var $ppc = $('#pie-chart-1'),
      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+'%');
});

同样适用于另一个var $ppc = $('#pie-chart-2'),

在php中使用多个饼图

2 个答案: