在php中使用多个饼图答案

【问题标题】：use multiple pie chart in php在php中使用多个饼图
【发布时间】：2017-02-21 10:26:23
【问题描述】：

我正在使用此处提到的示例中的代码 Pie chart Example

$(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 中以相同格式使用 1 个以上的饼图（比如 5 个）。 js中如何识别传给$fintion()的id。

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

【问题讨论】：

标签： javascript php html

【解决方案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

【讨论】：

【解决方案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'),也类似

【讨论】：