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

関連記事

  1. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  2. no-image

    JavaScript

    シンプルでカスタマイズもしやすいタブパネル実装「jquery-tab」

    jquery-tabはシンプルなタブパネルを実装することができるjQu…

  3. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  4. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  5. Babylon Grid
  6. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP