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