使用多個餅圖

提到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）中使用超過1個餅圖，格式相同。如何識別在js中傳遞給$ fintion（）的id。

目前具有相同的類名（進度，餅圖），所以如果我改變數據在一個餅圖它是通過將不同的id="pie-chart-1"複製到其他以及..

來源

2017-02-21 AnujDubey

你只需要給每個圖表的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

來源

2017-02-21 10:59:21 Glen

你可以這樣做你多餅圖..這樣的..

<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'),

來源

2017-02-21 10:48:04

使用多個餅圖

回答

相關問題