MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > Java script > EASY PIE CHARTで簡単に円グラフを作成【jquery】


EASY PIE CHARTで簡単に円グラフを作成【jquery】

 2012年12月2日   タグ: , ,

EASY PIE CHARTで簡単に円グラフを作成【jquery】
簡単に、円グラフを作成できるjqueryプラグイン「EASY PIE CHART」の使い方を紹介します。

「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

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

このエントリーをはてなブックマークに追加

  |  Blog TOP   |