jquery circle progress с разным значением

198

13 мая 2018, 07:20

Использую jquery-asPieProgress для создания circle progress svg:

if($('.pie_progress').length){ 
 
  $('.pie_progress').asPieProgress({ 
    namespace: 'pie_progress', 
    barsize: '6', 
    trackcolor: '#cbcbcb', 
    numberCallback: function(n) { 
 
 
      if($(this).hasClass('count-num')){ 
        console.log('num'); 
        return n; 
      } 
 
      if($(this).hasClass('count-percentage')){ 
        //const percentage = Math.round(this.getPercentage(n)); 
        console.log('pers'); 
        return n + "%"; 
      } 
    }, 
 
  }); 
 
  $('.pie_progress').asPieProgress('start'); 
}

.count { 
  width: 200px; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-asPieProgress@0.4.7/dist/css/asPieProgress.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/jquery-asPieProgress@0.4.7/dist/jquery-asPieProgress.min.js"></script> 
   
   
   
  <div class="pie_progress count-num count" role="progressbar" data-goal="257" aria-valuemin="0" aria-valuemax="300"> 
    <div class="pie_progress__number count-number">257</div> 
    <div class="pie_progress__label count-label"> 
      Просто число 
    </div> 
  </div> 
   
  <div class="pie_progress count-percentage count" role="progressbar" data-goal="97" aria-valuemin="0" aria-valuemax="100"> 
    <div class="pie_progress__number count-number">97</div> 
    <div class="pie_progress__label count-label"> 
      Данные в процентах 
    </div> 
  </div>

Но отображение может быть как процентов, так и просто цифры. Пытаюсь разделить и вывести по классу, но почему-то выводится просто число.

Вопрос: как вывести в circle progress svg как просто число, так и проценты?

p.s: в первом круге должно быть просто число - 257, во втором проценты - 97%.

Answer 1

if ($('.pie_progress').length) { 
 
  $('#pie_progress_number').asPieProgress({ 
    namespace: 'pie_progress', 
    barsize: '6', 
    trackcolor: '#cbcbcb', 
    numberCallback: function(n) { 
      return n; 
    }, 
  }); 
   
  $('#pie_progress_percent').asPieProgress({ 
    namespace: 'pie_progress', 
    barsize: '6', 
    trackcolor: '#cbcbcb', 
    numberCallback: function(n) { 
      'use strict'; 
      const percentage = Math.round(this.getPercentage(n)); 
      return `${percentage}%`; 
    }, 
  }); 
 
  $('.pie_progress').asPieProgress('start'); 
}

.count { 
  width: 200px; 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-asPieProgress@0.4.7/dist/css/asPieProgress.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/jquery-asPieProgress@0.4.7/dist/jquery-asPieProgress.min.js"></script> 
 
<div class="pie_progress count" role="progressbar" data-goal="257" aria-valuemin="0" aria-valuemax="300" id="pie_progress_number"> 
  <div class="pie_progress__number count-number"></div> 
  <div class="pie_progress__label count-label"></div> 
</div> 
   
<div class="pie_progress count" role="progressbar" data-goal="97" aria-valuemin="0" aria-valuemax="100" id="pie_progress_percent"> 
  <div class="pie_progress__number count-number"></div> 
  <div class="pie_progress__label count-label"></div> 
</div>