Créer un joli cercle de compteur en HTML/CSS Jquery

Question

Je voudrais bien afficher mes données sur mon site.

I love this counter circle

J'ai fait quelques recherches, mais rien est aussi beau et aussi pratique que celui je l'ai mentionné ci-dessus ...

Le meilleur que je trouve est celui codepen

@import "compass/css3"; 

body { 
    font: 12px/1.4 'Helvetica','Arial', sans-serif; 
    color: #a1a7a6; 
    background: #e0e3db; 
} 
.panel{ 
    position: relative; 
    background: #fff; 
    width: 300px; 
    margin: 40px auto; 
    text-align: center; 
    @include border-radius(4px); 
    box-shadow: 1px 1px 3px rgba(0,0,0,0.15); 
} 
.chart{ 
    display: inline-block; 
    width: 110px; 
    margin: 40px auto 20px; 
    padding: 0 10px; 
} 
.easyPieChart { 
    position: relative; 
    text-align: center; 
    canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
} 
.percentage, 
.label { 
    margin-bottom: 0.5em; 
    text-align: center; 
    font-weight: 100; 
} 
.percentage{ 
    font-size: 17px; 
} 
sup{ 
    top: -0.2em; 
    margin-left: 1px; 
} 
.ctrl{ 
    position: absolute; 
    right: 10px; 
    top: 5px; 
    color: #c4cdcc; 
    word-spacing: 5px; 
    span{ 
    cursor: pointer; 
    @include transition(color .5s ease-in-out); 
    &:hover{ 
     color: #000; 
    } 
    } 
} 

.meta{ 
    margin: auto; 
    max-width: 280px; 
    border-top: 1px solid rgba(155,155,155,0.2); 
    text-align: center; 
} 

p{ 
    margin: 0; 
    padding: 20px; 
    color: lighten(#a1a7a6, 15%); 
    a{ 
    color: inherit; 
    text-decoration: none; 
    border-bottom: 1px solid currentColor; 
    } 
    +p{ 
    padding-top: 5px; 
    padding-bottom: 20px; 
    } 
} 

Cependant, je ne peux pas enlever les petites barres autour du cercle, je ne peux pas afficher un nombre de flotteur, je ne peux pas changer la couleur et la taille facilement etc ...

Est-ce que quelqu'un connaît un bon plugin qui est capable de faire cela? Ou pouvez-vous expliquer comment enlever les barres autour du cercle et afficher un flotteur à l'intérieur? (Par exemple 4 634).

Merci d'avance.

Answer 1

Vous pouvez supprimer les lignes d'échelle avec:

scaleColor: false 

Pour afficher flotteurs sans modifier le plug-in, vous devez stocker les valeurs initiales:

var v0 = $('.chart span:eq(0)'); 
var v1 = $('.chart span:eq(1)'); 

var values = [v0.text(), v1.text()]; 

$('.percentage').easyPieChart({ 
    scaleColor: false, 
    animate: 1000, 
    lineWidth: 4,  
    onStep: function(value) { 
    this.$el.find('span').text(Math.round(value)); 
    }, 
    onStop: function(value, to) {  
    v0.text(values[0]); 
    v1.text(values[1]); 
    } 
});