簡単!Easy Pie Chartでキレイな円グラフ作成

Easy Pie Chartを使用するとアニメーションのついた見やすい円グラフを表示することができます。

Chart.jsと違って円グラフしか作ることができませんが、プロパティも少ないので学習コストは高くありません。

円グラフを作ると決めている場合は、他ライブラリよりも使いやすいと思います。

 

スポンサードサーチ



Easy Pie Chartの仕様

 プロパティ デフォルト 説明
barColor #ef1e25 円グラフのバーの色を指定できます。
trackColor #f2f2f2 円グラフの背景の色を指定できます。
scaleColor#dfe0e0円グラフのメモリの色を指定できます。falseの場合はメモリは非表示になります。
lineCapround ラインの端の形を指定できます。
値:round、square、butt
lineWidth3円グラフのラインの太さを指定できます。
size110円グラフの大きさを指定できます。
animatefalse アニメーションの速度の秒数を指定することができます。単位はミリ秒です。Ex. 1000⇨1秒
onStart(from, to)$.noop アニメーションが始まった時に呼び出されるコールバック関数です。アニメーションがfalseの場合は機能しません。
onStop(from, to)$.noopアニメーションが終わった時に呼び出されるコールバック関数です。アニメーションがfalseの場合は機能しません。
onStep(from, to, currentValue)$.noop アニメーションの最中に呼び出されるコールバック関数です。
アニメーションがfalseの場合は機能しません。

 

サンプル:アニメーション付きの円グラフ

onStepのcurrentValueを使用してアニメーションに合わせ値を変更しています。

See the Pen jwdGgg by laha (@laha) on CodePen.