CREATOR BLOG

EASY PIE CHARTの使い方メモ

jQuery PIE CHAERの使い方メモ円グラフをアニメーションで見せる事ができるとっても便利なプラグインです。
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 円グラフのラインの端の形を指定出来ます 値: buttround 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にサンプルを置いておきます。

EASY PIE CHARTサンプル

 

 

    ▲ PAGE TOP