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

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

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

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

 

スポンサードサーチ



Easy Pie Chartの仕様

 プロパティ  デフォルト  説明
barColor  #ef1e25  円グラフのバーの色を指定できます。
trackColor  #f2f2f2  円グラフの背景の色を指定できます。
scaleColor #dfe0e0 円グラフのメモリの色を指定できます。falseの場合はメモリは非表示になります。
lineCap round  ラインの端の形を指定できます。
値:round、square、butt
lineWidth 3 円グラフのラインの太さを指定できます。
size 110 円グラフの大きさを指定できます。
animate false  アニメーションの速度の秒数を指定することができます。単位はミリ秒です。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.