こんにちは。
今日は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
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事