Javascript
【Javascript】SVGのアニメーション円形グラフCreate circular SVG charts with Circles
December 17, 2015
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+
Demo/Download
