【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

冒頭のサンプルの通り、全体の中での達成率や占有率など１つの値をフォーカスするものでよい場合、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

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。

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

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

HowTo

サンプルコード

JSで定義

まとめ

Author Profile

Latest entries

この記事を読んだ人にオススメ！

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