円グラフでカッコ良く見せるjQueryプラグインCirclifulを使ってみた!
ドドドのフリーランスエンジニアをたまたま発見頂きありがとうございます。
愛妻家代表の@pei_baboです。
データの「見せ方」や「見える化」って大事ですよね。
ただ単に数値の羅列を並べられても、ちょっと物寂しい…
しかもそれが何かの推移データだとしたら頭の中で一旦整理しないといけないし…
そもそもまずは、
「まずは見た目からカッコよくしたいんだよ…」
とにかくオシャレにカッコよくして「女の子にモテたい!」という男特有の性がありますね。
WEBサイトも同じだと思います。
まずはこのブログのデザインを考えろと言われそうですが(´・ε・̥ˋ๑)
今日は管理画面などのダッシュボードで使いたい円形グラフを簡単にかっこ良くするjQueryプラグインを紹介したいと思います。
プログラミングやWordPressを習得するのに一番近道な方法とは?
目次
Circlifulプラグインの使い方とサンプル
まずは今日紹介する「Circliful」のサイトはこちら。
①早速ダウンロード
それでは早速ソースをダウンロードしていきましょう。
まずはサイトトップ右上の「DOWNLOAD」と書かれたところをクリック。
GitHubに遷移するのでお馴染みの「Download ZIP」からソースをダウンロードしましょう。
ダウンロードしたファイルで必要なのは
- jquery.circliful.css
- jquery.circliful.min.js
の二つですね。
②コードを書いていこう!
■ CSSとjsの読み込み宣言
1 2 3 4 5 6 7 | // circliful CSS <link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" /> // jQueryは各自入れてくださいね! <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> // circliful js <script src="js/jquery.circliful.min.js"></script> |
コメントにも書きましたがjQueryは各自で別途入れてくださいね。
釈迦に説法ですが必ずcircliful jsより前でjQueryを読み込んで下さい。
■ HTML
1 | <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> |
■ js処理
1 2 3 4 5 | <script> $( document ).ready(function() { $('#myStat').circliful(); }); </script> |
見て頂けると分かるかと思いますが、divのid名をjavascriptで指定してcircliful()を呼ぶだけですね。
あとはhtmlのdata-○○の部分がオプションなのですが、ここを表示に合わせて変えていくという感じです。
③デモを見てみよう!
デモを作りましたが、なせかdata-infoの情報が入りませんでした…。
なぜだろう?
分かったら報告します!
注意点
data-iconというアイコンを入れられるオプションがあるのですが、それを使う場合はfont awesomeというフォントアイコンをダウンロードする必要がありますので、注意してくださいね。
本日もありがとうございました。