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