EASY PIE CHARTの使い方メモ
円グラフをアニメーションで見せる事ができるとっても便利なプラグインです。
http://rendro.github.io/easy-pie-chart/
jQueryのプラグインとして以外にもVanilla JSやAngularJSのプラグインとしても機能します。
まずは基本的な設置から。
上記のリンク先から必要なファイル一式をダウンロードします。
解凍すると「rendro-easy-pie-chart-xxxx」というフォルダが出来ます。
その中の「dist」フォルダの中にある「jquery.easypiechart.min.js」を使います。
まず準備としてHTMLファイルに各スクリプトファイルを読み込むタグを</body>のすぐ上辺に記述します。
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="js/jquery.easypiechart.min.js"></script> <script src="js/my-script.js"></script>
今回は動きにイージングを付け加えたいので、「jQuery.easing」の使用しています。
そしてグラフを表示したい場所に以下のHTMLタグを記述します。
<div class="chart" data-percent="72"> <span class="percent">72</span> <div class="label">Sample 1</div> </div>
まずは各円グラフの大枠にclass=”chart”とします。
このクラス名は任意のものでOKです。
data-percent=”72″の部分が%で表示される数値となります。
<span class=”percent”>72</span>といれていますが、ここに”72″という数値が入っていなくとも、数値は表示されますが、JavaScriptが動作しない環境に対しての配慮となります。
CSSは以下の様にするのを基本として、デザインをカスタマイズしていくと良いでしょう。
.chart { position: relative; display: inline-block; width: 110px; height: 110px; margin-top: 50px; margin-bottom: 50px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; line-height: 110px; z-index: 2; } .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; } .angular { margin-top: 100px; } .angular .chart { margin-top: 0; } input { display: block; margin: auto; margin-bottom: 3em; } .btn { display: block; width: 200px; margin: 0 auto; padding: 10px 20px; background: #cccccc; color: #ffffff; text-transform: uppercase; cursor: pointer; font-size: 0.8em; -moz-box-sizing: border-box; box-sizing: border-box; } .btn:hover { background: #333333; color: #ffffff; }
easyPieChart()の初期化実行するスクリプトを記述します。
実行する際にはエレメントを指定するので、先ほどの.chartを指定します。
<script type="text/javascript"> $(function() { $('.chart').easyPieChart({ //ここに各設定パラメータを記述していきます。 }); }); </script>
各設定パラメーターは指定しなくとも初期値がはいっていますので、指定しなくともアニメーション円グラフが作成出来ます。
各パラメータは下の表の様になっています。
Property (Type) | Default | Description |
---|---|---|
barColor | #ef1e25 | 円グラフのバーの色を指定出来ます。ハッシュ( # )で始まる3桁のカラーコードやrgb( )やrbga()での指定が可能。 |
trackColor | #f2f2f2 | トラック(円グラフの背景部分)の色をして出来ます。 |
scaleColor | #dfe0e0 | メモリの色を指定出来ます。ここの値をfalseにするとメモリが非表示になります。 |
lineCap | round | 円グラフのラインの端の形を指定出来ます 値: butt , round and square . |
lineWidth | 3 | 円グラフのラインの太さを数値で指定出来ます。単位はpxとなります。 |
trackWidth | 3 | 円グラフの背景の太さを数値で指定出来ます。 |
size | 110 | 円グラフのサイズを指定出来ます。単位はpxとなります。 |
rotate | 0 | 円グラフの傾きを指定出来ます。 |
animate | object | アニメーションの速度を指定します。ミリ単位の数値のみや{ duration: 1000, enabled: true }等のObjectもしくはfalseでアニメーションなしなど指定出来ます。 |
onStart(from,to) | $.noop | アニメーションの開始時に呼び出されるコールバック関数。引数は2つで、fromが開始の数値(0)でtoが最終数値。 |
onStep(from,to, currentValue) | $.noop | アニメーションの開始時に呼び出されるコールバック関数。引数は3つ。currentValueが今表示されている数値 |
onStop((from, to) | $.noop | アニメーションの開始時に呼び出されるコールバック関数。引数は2つ。 |
バーの色やサイズなども設定できます。
また、onStepなどのコールバック関数を使って、実行時などに別の動きを加える事が出来ます。
例えばバーのアニメーションだけでなく、表示されている数値(%)も動かすように出来ます。
<script type="text/javascript"> $(function() { $('.chart').easyPieChart({ onStep: function(from, to, percent) { $(this.el).find('.percent').text(Math.round(percent)); } }); }); </script>
コールバック関数内からは$(this)はこの関数自体を参照してしまいます。
$(this.el)でDOM要素にアクセス出来るようになっています。
また、jQuery.easingを使ってアニメーションの動きを色々調整することが出来ます。
設定のオプションを含めたサンプル
$(function() { $('.chart').easyPieChart({ //your configuration goes here easing:'easeOutQuart', barColor:'rgba(169,199,255,1.0)', trackColor:'rgba(245,245,200255,1.0)', lineCap:'square', lineWidth: 20, trackWidth: 16, scaleLength:10, scaleColor:false, animate:{ duration: 5000, enabled: true }, rotate:30, onStep: function(from, to, percent) { $(this.el).find('.percent').text(Math.round(percent)); } }); });
以下のURLにサンプルを置いておきます。