更新简易饼图

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>

更新简易饼图

Updating Easy Pie Chart

javascript

easypie