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. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

  2. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  3. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  4. Filterable Product Grid
  5. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  6. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP