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 |
と定義されていることになる。