Circliful

JavaScript

円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

CirclifulというjQueryプラグインを使えば、統計情報を伝えるための円グラフを表示させることができます。画像を必要とせずに、HTML5のcanvasとjQueryがベースになっています。どのくらいの割合を占めているかをシンプルに視覚化したい時に役立ちますね。

[ads_center]

Circlifulの使い方

実際に使ってみると、こんな感じの円グラフを実装することができます。スタイリッシュなデザインでとても見やすいですね。

Circlifulの使い方

使い方は、まずhead内にダウンロードしたプラグインファイルを読み込みます。

<link href="jquery.circliful.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.circliful.js"></script>

続いて、円グラフを表示するためのHTMLを記述していきます。dataオプションに各項目の値を指定します。

<div id="myStat" data-dimension="250" data-text="35%" data-info="サンプル" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

最後にCirclifulをセッティングして完了です。

<script>
$( document ).ready(function() {
    $('#myStat').circliful();
});
</script>

dataオプションにはテキスト、%値、カラーなどたくさんの項目が用意されています。使い方自体とてもシンプルなので、手軽に使用できるところがいいですね。

pguso/jquery-plugin-circliful · GitHub

Macのシリアル番号を調べるための確認方法前のページ

WebデザインのためCSSエフェクトを実装できる5つのライブラリ次のページ

最近の記事

  1. SILENT HILL 2
  2. FUNLOGY スピーカー
  3. 聖剣伝説 VISIONS of MANA
  4. エルデの追憶
  5. コーヒー豆
PAGE TOP