[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART

シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。

EASY PIE CHART

[ad#ad-2]

EASY PIE CHARTの使い方

実装は、3ステップです。

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
外部ファイルはhead内に記述してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script>

<link rel="stylesheet"type="text/css" href="/path/to/jquery.easy-pie-chart.css">

Step 2: HTML

HTMLは非常にシンプルで、data属性に円グラフの値を記述します。

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

Step 3: JavaScript

あとは、jQueryのセレクタで指定し、スクリプトを実行するだけです。

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

[ad#ad-2]

スクリプトのオプション

オプションではバーのデザインが簡単に行えます。

barColor

バーのカラー

trackColor

バーのカラー（トラック部分）

scaleColor

目盛りのカラー

lineCap

バーの終点の形状

lineWidth

ラインの幅

size

円グラフのサイズ

animate

アニメーションの有無

onStart

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

onStop

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