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

Create circular SVG charts with CirclesはSVGのアニメーション円形グラフを実装する、軽量JavaScriptライブラリ。
サンプルにはレスポンシブも準備されています。ライセンスはMIT。
<div class="circle" id="circles-1"></div>
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+
Demo/Download