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を使用してアニメーションに合わせ値を変更しています。