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

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

サイトのキャプチャ

EASY PIE CHART

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>

スクリプトのオプション

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

barColor
バーのカラー
trackColor
バーのカラー(トラック部分)
scaleColor
目盛りのカラー
lineCap
バーの終点の形状
lineWidth
ラインの幅
size
円グラフのサイズ
animate
アニメーションの有無
onStart
アニメーション開始時のコールバック
onStop
アニメーション終了時のコールバック

top of page

©2017 coliss