javascript - 更新简易饼图

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

你可以使用easy-pie-chart的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>