Animated_percentage_indicator_with_Snap_svg_with_interactive_legend_-_CodePen

【jQuery】かわいい動きの円グラフが簡単に作れるプラグイン!Donut animated

2014.09.19   909


チャート系jQueryプラグインは数知れずありますが、今回紹介するのは動きがとってもかわいい円グラフが作れるDonut animatedというjQueryプラグイン。
サイトがパッと華やぎます。


 

Donut animatedのデモ


 

Donut animatedプラグイン

 

Donut animatedの使い方

それではDonut animatedの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

CSSコード

JavaScriptコード

 

チェックポイント

javascriptのコード中に「snap.svg-min.js」とありますが、Donut animitedは「snap.svg」というJavaScript SVGライブラリを使用します。
別途、下記よりダウンロードしてご利用ください。

 
また、donut-animated.jsはcodepen中のjavascriptコードを任意で書き換えるbrowserStats配列部分のみを抜き取ったスクリプトをまとめたものです。

 

プラグインへ一言

グラフの動きがかわゆす。
ちなみにグラフとチャートという言葉はほぼ同じ意味だが、英語圏の方は円、棒、折れ線などはチャートと呼ぶ人が多いそう。

 

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております