【Javascript】SVGのアニメーション円形グラフCreate circular SVG charts with Circles

Create circular SVG charts with CirclesはSVGのアニメーション円形グラフを実装する、軽量JavaScriptライブラリ。
サンプルにはレスポンシブも準備されています。ライセンスはMIT。

HTML

<div class="circle" id="circles-1"></div>

JS

var myCircle = Circles.create({
id:                  'circles-1',
radius:              60,
value:               43,
maxValue:            100,
width:               10,
text:                function(value){return value + '%';},
colors:              ['#D3B6C6', '#4B253A'],
duration:            400,
wrpClass:            'circles-wrp',
textClass:           'circles-text',
valueStrokeClass:    'circles-valueStroke',
maxValueStrokeClass: 'circles-maxValueStroke',
styleWrapper:        true,
styleText:           true
});
id グラフID
radius 円の半径
value 円の値
maxValue 円の最大値
width リングの幅
colors
duration アニメーションの継続時間
wrpClass 生成要素に適用するクラス
textClass テキストコンテンツクラス
valueStrokeClass SVGパス要素に適用するクラス
maxValueStrokeClass SVGパス要素に適用するクラス
styleWrapper スタイルを追加するかどうか
styleText テキストスタイルを追加するかどうか
text テキスト
// Example 1
function(currentValue) {
return '$'+currentValue;
}
// Example 2
function() {
return this.getPercent() + '%';
}

Firefox 3+
Chrome 4+
Safari 3.2+
Opera 9+
IE9 +

iOS Safari 3.2+
Android Browser 3+
Opera Mobile 10+
Chrome for Android 18+
Firefox for Android 15+

 

【Javascript】SVGのアニメーション円形グラフCreate circular SVG charts with Circles

  • LATEST
  • RELATED
  • POPULAR