I use jquery-asPieProgress to create a 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>

But the display can be either percent or just numbers. I am trying to divide and deduce by class, but for some reason it’s just a number.

Question: how to output in circle progress svg both a simple number and a percentage?

ps: in the first round there should be just a number - 257 , in the second one - 97% .

  • Please formulate the exact question, personally, I didn’t understand anything at all what you want to get, now running the example everything is calculated correctly and the "graph" is drawn exactly from the given values ​​in the figure: 257 from 300, and in percents: 97% from 100% - RifmaMan
  • ps: in the first round there should be just a number - 257, in the second percent - 97% - HamSter
  • Now everything has become very clear, you need to update the text in the count-number after the completion of plotting, for which you need to read the plug-in methods, now we ’ll try to figure it out ... - RifmaMan

1 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>