blogトップ > Java script > EASY PIE CHARTで簡単に円グラフを作成【jquery】
2012年12月2日 タグ: Java script, jquery, デモ
「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に以下のように記述すると88%のグラフが表示されます。
<div class="chart" data-percent="88">88%</div>
「EASY PIE CHART」のオプションを設定することで、円グラフのデザインをカスタムできます。 以下のデモページのをご覧ください。工夫すれば、色々な表現が可能だと思います。
デモページはコチラオプションは以下のものがあります。
グラフのバーの色を指定します。
グラフの背景色を指定します。
スケース(目盛り)の色を指定します。
バーの先端の形をしていします。butt, round, square の3種類を指定できます。
バーの幅を指定します。
円グラフ全体サイズを指定します。
バーがアニメーションします。そのスピードを指定します。
アニメーション開始時のコールバック指定
アニメーション終了時のコールバック