「EASY PIE CHART」の使い方

「EASY PIE CHART」をダウンロード

「EASY PIE CHART」のダウンロードはこちら

ライブラリを読み込む

ダウンロードしたファイルのうち以下のファイルを外部ファイルとして、HTMLに読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="graph/jquery.easy-pie-chart.js"></script>
<link rel="stylesheet"type="text/css" href="graph/jquery.easy-pie-chart.css">

スクリプトを実行する

headタグ内に以下のコードを記述します。

<script type="text/javascript">
$(function() {
    $('.chart').easyPieChart({
        //your configuration goes here
    });
});
</script>

HTMLに記述する

HTMLに以下のように記述すると88％のグラフが表示されます。

<div class="chart" data-percent="88">88%</div>

オプションを設定して、デザインをカスタムする

「EASY PIE CHART」のオプションを設定することで、円グラフのデザインをカスタムできます。 以下のデモページのをご覧ください。工夫すれば、色々な表現が可能だと思います。

オプションは以下のものがあります。

barColor

グラフのバーの色を指定します。

trackColor

グラフの背景色を指定します。

scaleColor

スケース（目盛り）の色を指定します。

lineCap

バーの先端の形をしていします。butt, round, square の3種類を指定できます。

lineWidth

バーの幅を指定します。

size

円グラフ全体サイズを指定します。

animate

バーがアニメーションします。そのスピードを指定します。

onStart

アニメーション開始時のコールバック指定

onStop

アニメーション終了時のコールバック