HTML/CSS Jqueryで素敵なカウンターサークルを作成

Question

私のウェブサイトにデータをうまく表示したいのですが、

私はこのcounter circle

を愛する私が見つけた最高のはこの1つ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; 
    } 
} 

ある

...私はいくつかの研究をしたが、何ものように美しく、私は上記1と同様に実用的ではありません

しかし、私は円の周りの小さなバーを削除することはできません、私は浮動小数点数を表示することはできません、私は簡単に色やサイズを変更することはできません...

誰もこれを行うことができる良いプラグインを知っていますか？ 円の周りのバーを削除し、フロートを内側に表示する方法を説明できますか？ （例えば、4,634）。

ありがとうございます。

Answer 1

あなたがして、スケールの行を削除することができますプラグインを変更せずに山車を表示するには

scaleColor: false 

、あなたは初期値格納する必要があります：

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]); 
    } 
});