LoginSignup
7

More than 5 years have passed since last update.

円グラフに特化したjQueryプラグイン「Circliful.js」を使ってみた。

Posted at

Circliful.jsとは?

円グラフを描画してくれるプラグイン
GitHubからダウンロード

使い方

まずはサンプルを見てみる

以下、DLしたindex.htmlより抜粋

<div id="myStathalf" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>

~

<script>
$( document ).ready(function() {
    $('#myStathalf').circliful();

~

});
</script>

これだけで、円グラフが描画されている。jQuery側の記述は

$('要素').circliful();

たったこれだけ。

記述ルール

基本的にdivタグにdata-xxxxというカスタムデータ属性を定義すると、それに従って描画される。
属性と効果は以下を参考

data-xxxx 効果 記述例
dimension 円の高さと幅(px) 200
width 円の太さ(px) 20
text グラフの中、後述のinfo上に表示するテキスト 50%
fontsize textのフォントサイズ(px) 20
info text下に表示するテキスト、infoだけに説明文向け サンプルですよ
type half指定で半円 half
total データの最大値(後述のpartとセット) 300
part データの値(part/totalがグラフを占める割合) 150
percent データの割合(※part/totalが優先される) 50
fgcolor percentで定義した部分の色 #7ea568
bgcolor fgcolor以外に部分の色 #eee
fill 円の内側の背景色 #ddd
border 割合を表すラインを基準に対して内側(inline)、外側(outline)に表示 inline
animationstep アニメーション速度。0でアニメーション無し 2
startdegree 基準を0とした時の開始角度 45
bordersize borderの幅 20
icon text左にアイコンを表示 user
iconsize アイコンのサイズ(px) 20
iconcolor アイコンの色 #aaa

抜粋したサンプルのdivは、

<div id="myStathalf" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#7ea568" data-bgcolor="#eee" data-type="half" data-fill="#ddd"></div>

なので、

data-xxxx 効果 記述例
dimension 円の高さと幅(px) 250
width 円の太さ(px) 30
text グラフの中、後述のinfo上に表示するテキスト 35%
fontsize textのフォントサイズ(px) 38
info text下に表示するテキスト、infoだけに説明文向け New Clients
type half指定で半円 half
percent データの割合(※part/totalが優先される) 35
fgcolor percentで定義した部分の色 #7ea568
bgcolor fgcolor以外に部分の色 #eee
fill 円の内側の背景色 #ddd

と定義されていることになる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7