Счетчик всех кругов, показывающий одни и те же данные (как сделать так, чтобы каждый круг отображал свое значение счетчика) - PullRequest
Новая
       11

Счетчик всех кругов, показывающий одни и те же данные (как сделать так, чтобы каждый круг отображал свое значение счетчика)

0 голосов
/ 02 октября 2019

hwllo Я хочу, чтобы мои счетчики кругов отображали значение счетчика, как я упомянул в своем классе, и data-процент , но в настоящее время все 4 счетчика отображают данные только 1-го счетчика, однако я упомянул данные-процентзначение каждого счетчика в его HTML-код. Пожалуйста, помогите мне понять, что не так и что я должен сделать, чтобы это исправить? любая помощь приветствуется, и код предоставляется для ясного понимания:

код, используемый ниже, показывает мне этот результат, как показано на рисунке:

enter image description here

В настоящее время я использую этот фрагмент кода js 

<script type="text/javascript">
  (function () {
  var bar, c, percent, r, range;

  percent = $('.pie').data('percent');

  bar = $('.pie').find('.bar');

  r = bar.attr('r');

  c = Math.PI * (r * 2);

  range = (100 - percent) / 100 * c;

  bar.css({
    'stroke-dashoffset': c,
    'stroke-dasharray': c });


  bar.animate({
    strokeDashoffset: range },
  1000, 'linear');

  $('.text').prop('Counter', 0).animate({
    Counter: percent },
  {
    duration: 1000,
    step: function (now) {
      return $(this).text(Math.ceil(now) + '%');
    } });


}).call(this);
</script>

и html это: 

<!--counter new -->
<div class="container-fluid counter"> 
  <div class="row">
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="99">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="32">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="44">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="22">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
</div>
</div>
<!--counter new end -->

используемый css также показан ниже: 


.svg-box {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 3em;
  letter-spacing: 3px;
  font-family: "Raleway", Calibri, sans-serif;
  color: #fff
}

svg {
  transform: rotate(-90deg);
  width: 200px;
  height: 200px;
  background: transparent;
  fill: none;
}
svg circle {
  stroke-width: 1;
  stroke: #999;
}
svg .bar {
  stroke-width: 3;
  stroke: #ffffff;
  stroke-linecap: round;
}

Я хочу отобразить счетчики, показывая

"data-процентный" интервал

, о котором я упоминал в html-коде. но все счетчики показывают значение данных 1-го счетчика.

как бы то ни было, чтобы отобразить данные выглядит так: enter image description here

1 Ответ

1 голос
/ 02 октября 2019

Я немного переработал ваш код, и я думаю, что он должен работать правильно. 

(function () {

 $('.pie').each(function(){

 let percent = $(this).data('percent');
 let bar = $(this).find('.bar');
 let r = bar.attr('r');
 let c = Math.PI * (r * 2);
 let range = (100 - percent) / 100 * c;
 bar.css({
  'stroke-dashoffset': c,
  'stroke-dasharray': c 
 });
 bar.animate({ strokeDashoffset: range }, 1000, 'linear');

$(this).prev().prop('Counter', 0).animate({ 
    Counter: percent 
  },                                 {
    duration: 1000,
    step: function (now) {
      return $(this).text(Math.ceil(now) + '%');
    }
  });  
 })
}).call(this);

А вот рабочая скрипка: https://jsfiddle.net/w2o7rt1L/

...