图表部分问题

Question

我在尝试为模板编写图表部分时遇到问题。所需的结果是：

我得到的是：https://codepen.io/Kestvir/pen/GEwMGP

  $(document).ready(function() {

  $('.chart-blue').easyPieChart({
    //your options goes here
    barColor: '#30bae7',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0

  });
  $('.chart-pink').easyPieChart({
    //your options goes here
    barColor: '#d74680',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0

  });

  $('.chart-green').easyPieChart({
    //your options goes here
    barColor: '#17c2a4',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0

  });


  $('.chart-orange').easyPieChart({
    //your options goes here
    barColor: '#eb7d4b',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0

  });



});

我正在使用https://github.com/rendro/easy-pie-chart对图表进行编码。 此外，不仅它自己的图表，而且应该动画的过程（从0％到特定的％快速）。

Answer 1

可能不是最好的解决方案，但这应该有效。 给一个＆lt; span＆gt;到％值。

<div class="chart-blue" data-percent="90"><span>90%</span></div>

对其他颜色也一样。 添加此css：

.class-col-md-3 span {
    margin-left: 57px;
    margin-top: 68px;
    position: absolute;
}

https://codepen.io/anon/pen/eRQeGV

Answer 2

@Phoenixy是对的。这是一个js小提琴，我只编辑了第一张图表

https://codepen.io/carinlynchin/pen/zzMPEa

<div class="chart-blue" data-percent="90">
    <div id='test'>
    </div>
</div>