このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第14回

アニメーションつき円グラフを簡単実装!Circliful

2014年08月01日 12時00分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

Circliful


 「Circliful」は、の円グラフをアニメーションつきで表示できる jQuery プラグインです。カスタムデータ属性に値を渡すだけでグラフを簡単に描画でき、豊富なオプションでデザインをカスタマイズできます。ランディングページで製品のシェアを訴える際などにいいでしょう。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、CirclifulをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

GitHubページの画像
GitHubページの画像

 Circliful は公式サイトでも配布されていますが、バージョンが古く、一部機能に不具合がありますので、必ず GitHubで公開されている最新版を利用しましょう。

Circliful 公式サイト
Circliful 公式サイト

 利用するWebページの body の閉じタグ直前で、jQuery本体と「Circliful のminifyファイル」、「jquery.circliful.min.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.circliful.min.js">
</body>
//(中略)

 次にCSSファイルをhead タグ内で読み込みましょう。


//(中略) 
<link rel="stylesheet" href="css/jquery.circliful.css">
</head>
//(中略)

 これで準備はOKです。

step2 円を表示する

 実際にプラグインの使い方を説明します。

 jquery.circliful.min.js を読み込んだ後、circliful() メソッドを実行します。circliful() メソッドは、使用したい要素をセレクターで指定し、.(ドット)繋ぎで指定します。下の例では「myStat」というclass名を指定しています。

JavaScript


//(中略)
<script src=" jquery.circliful.min.js"></script>
<script>
$(document).ready(function(){
    $('.myStat').circliful();
});
</script>
//(中略)

 HTMLは以下のように指定します。グラフを表示するためのdiv要素を用意し、circliful()で指定したclass名を設定します。

HTML


//(中略)
<div class="myStat"></div>
//(中略)

 下図のような円形が表示されれば、プラグインの導入は成功です。

step3 グラフの表示とアニメーション

 Circlifulは、グラフで表示するデータをカスタムデータ属性を利用して指定します。

数値を表示する

 最初に、グラフで表現したい数値を円の中央に表示してみましょう。グラフを描画するために記述したdiv要素に、「data-text」というカスタムデータ属性を指定し、値を「35%」とします。

HTML


//(中略)
<div class="myStat" data-text="35%"></div>
//(中略)

円の中央に数値が表示される
円の中央に数値が表示される

グラフにパーセンテージを描画する

 次に、グラフで表示するデータをパーセンテージで指定してみましょう。先ほどのdiv要素にさらに「data-percent」というカスタムデータ属性を指定し、値を「35」とします。

HTML


//(中略)
<div class="myStat" data-text="35%" data-percent="35"></div>
//(中略)

 下図のようなグラフが表示されれば成功です。

 これで基本的な円グラフが実装できました。

step4 オプションによるカスタマイズ

 グラフのデザインや表示方法を変更したいときは、オプションを指定してカスタマイズします。

data-totalオプション、data-partオプション

 Circlifulはデフォルトではパーセンテージで値を指定しますが、data-total/data-partオプションを利用すると、最大値と実際の値をもとにパーセンテージを計算してグラフを描画します。

 例えば 750MB のメモリのうち350MB を利用している状況を示す場合、data-total の値を 「750」、data-part の値を「350」とすると、46.7% が算出されます。

HTML


//(中略)
<div class="myStat" data-total ="750" data-part ="350" data-info="メモリ使用量"></div>
//(中略)

data-total/data-partオプションでグラフを作成
data-total/data-partオプションでグラフを作成

その他オプション

オプション名 説明 デフォルト値
data-dimension グラフの高さと幅を数値で指定します。 200
data-text グラフの中央に表示するテキストを指定します。 null
data-info グラフの中央にグラフの説明文を表示します。 null
data-width グラフの描画線の太さを px 数で指定します。 15
data-fontsize data-text の font-size を px 数で指定します。 15
data-percent グラフのパーセンテージを1から100の値で指定します。 50
data-fgcolor グラフのパーセンテージの色を RGB 値で指定します。 #556b2f
data-bgcolor グラフのパーセンテージ部分の背景色を RGB 値で指定します。 #eeeeee
data-fill グラフの背景色を RGB 値で指定します。 null
data-type グラフを半分の円形にしたい場合、値を 'half' とします。
null
data-total グラフの最大値を数値で指定できます。 null
data-part グラフの最大値を data-total で指定していた場合に、グラフで表示したい数値を指定します。 null
data-border グラフのパーセンテージを内側に指定したい場合は 'inline' 、外側に描画したい場合は 'outline' と指定します。 null

Step5 アイコンを表示する

 Circliful は「Font Awesome」というアイコンフォントサービスを利用して、パーセンテージの横にアイコンを表示できます。

Font Awesome の利用方法

 以下の手順で設定します。

  1. ダウンロードしたプラグインファイルにある「font-awesome.min.css」を head 内で読み込みます。
  2. カスタムデータ属性で読み込みます。

    HTML

    
    //(中略)
    <link rel="stylesheet" href="css/font-awesome.min.css">
    </head>
    //(中略)
    
  3. ダウンロードしたプラグインファイルの中にある「fonts」フォルダをルートディレクトリにコピーします。プラグインと同様のディレクトリ構成にできない場合は、「font-awesome.min.css」に書かれているパスを変更します。
  4. カスタムデータ属性で読み込みます。

    HTML

    
    //(中略)
    <div class="myStat" data-dimension="250" data- data-percent="35" data-text="35%" data-icon="user" data-iconsize="28" data-iconcolor="#ccc" data-fontsize="38">
    </div>
    //(中略)
    

 下図のようにアイコンが data-text で指定した文言の横に表示されます。

アイコンが表示される
アイコンが表示される

Font Awesome のオプション

オプション名 説明 デフォルト値
data-icon 読み込みたいアイコンを 「Font Awesome の Web サイト」を参照して指定します。
指定する際は 'fa-' という接頭辞を除きます。
null
data-iconsize アイコンのサイズを px 数で指定します。 20
data-iconcolor アイコンの色を RGB 値で指定します。 #999

 各オプションの実装はデモを参考にしてください。

 Circliful は、スクリプトが読み込まれたときにグラフを描画します。body の閉じタグ前に読み込んでいる場合は、スクリプトが読み込まれた段階で描画領域にグラフが出現するので、ページがガクンと動いてしまいます。

 この挙動を嫌うユーザーもいるので、CSS でグラフを描画する領域に高さを確保しておきましょう。

 いかがでしたか。グラフを表示する際に活用してください。

 プラグインを使わずにCSS でグラフ描画をする方法もあります。以下の記事を参考にしましょう。
[動くインフォグラフィックでサイトを楽しくするアイデア]


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング