Обновление Easy Pie Chart

Question

Мне удалось обновить легкую круговую диаграмму, но я не знаю, как отображать процент и обновлять его, например, от 1% до 25%, число за номером, по мере обновления диаграммы. Любая помощь?

Это блок кода, где я обновляю свой график:

var chart = new EasyPieChart(existing, {
  lineWidth: '6',
  barColor: '#fff',
  trackColor: 'rgba(255, 255, 255, 0.5)',
  scaleColor: false,        
});
chart.update(25);

Answer 1

Вы могли бы использовать легкую круговую диаграмму onStep функция обратного вызова, которая будет вызываться на каждом шаге для обновления номера где-то на странице.

Кроме того, вы, вероятно, хотите округлить число с помощью Math.round

var element = document.querySelector('.chart');
var chart = new EasyPieChart(element, {
  lineWidth: '6',
  barColor: '#000',
  trackColor: 'rgba(255, 255, 255, 0.5)',
  scaleColor: true,
  onStep: function(from, to, currentValue) {
    // Inside the callback, 'this.el' refers to 
    // the element that EasyPieChart was created with 
    // - `.chart`
    this.el.querySelector('.number').innerText = `${Math.round(currentValue)}%`;
  },
});

chart.update(25);

.chart {
  display: inline-block;
  position: relative;
}

.number {
  font-size: 1.8rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="chart">
  <span class="number"></span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/easypiechart.min.js"></script>