【jQuery】Circlifulプラグインを使って簡単に素敵なパーセント表示

こんにちは。
今日はjQueryプラグインのご紹介です。

See the Pen JoXdEy by Tsukasa Nagata (@nt-uni) on CodePen.0

グラフや表などの描画もプラグインで

今回ご紹介するのはCirclifulというプラグインですが、有名なチャートプラグインだとChart.js | Open source HTML5 Charts for your websiteなどがあります。

  • Line Chart
  • Bar Chart
  • Radar Chart
  • Polar Area Chart
  • Pie & Doughnut Chart

などがお使いいただけます。
他にもGoogle ChartsやYUI Charts、jQPlotなどが有名ですね。

サクッとパーセントに特化したグラフならCircliful

冒頭のサンプルの通り、全体の中での達成率や占有率など1つの値をフォーカスするものでよい場合、Circlifulプラグインがおすすめです。

例えば、

  • 100点満点の取得点数
  • 営業ノルマの達成率
  • 全体ユーザーにおける新規ユーザーの割合
  • ディスク容量の使用率

などでしょうか。

HowTo

使い方はいたって簡単です。

以下からまずjsやCSSファイルをDLします。
pguso/jquery-plugin-circliful

そして、ヘッダーで以下3種類を読み込みます。

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

サンプルコード

<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>

ここではプロパティに値を埋めていくことでCircleを描画します。

値については:jQuery Circliful Plugin – Documentation

JSで定義

    $( document ).ready(function() {
        $('#myStat').circliful();
    });

簡単ですね!

まとめ

font-awesomeを導入すれば、Circle内にアイコン表示もできるようです。
javascriptで描画されるため動的なコンテンツにも使えるのがメリットですが、もちろん固定値の場合でもデザイン不要すぐ使える点は便利ですよね!是非お試しください!

参照:
jQuery Circliful Plugin – Documentation
Font Awesome, the iconic font and CSS toolkit

フォローして続編をチェック

@universionsをフォロー