円グラフでカッコ良く見せるjQueryプラグインCirclifulを使ってみた!

 
ドドドのフリーランスエンジニアをたまたま発見頂きありがとうございます。
愛妻家代表の@pei_baboです。

データの「見せ方」や「見える化」って大事ですよね。
ただ単に数値の羅列を並べられても、ちょっと物寂しい…
しかもそれが何かの推移データだとしたら頭の中で一旦整理しないといけないし…
そもそもまずは、

 

CIRCLIFULプラグインに期待する老人
「まずは見た目からカッコよくしたいんだよ…」

 

とにかくオシャレにカッコよくして「女の子にモテたい!」という男特有の性がありますね。
WEBサイトも同じだと思います。
まずはこのブログのデザインを考えろと言われそうですが(´・ε・̥ˋ๑)

今日は管理画面などのダッシュボードで使いたい円形グラフを簡単にかっこ良くするjQueryプラグインを紹介したいと思います。

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

Circlifulプラグインの使い方とサンプル

まずは今日紹介する「Circliful」のサイトはこちら。

jQuery_Circliful_Plugin_-_Demos

 

①早速ダウンロード

それでは早速ソースをダウンロードしていきましょう。

まずはサイトトップ右上の「DOWNLOAD」と書かれたところをクリック。
01_jQuery_Circliful_Plugin_-_Documentation

 
GitHubに遷移するのでお馴染みの「Download ZIP」からソースをダウンロードしましょう。
02_pguso_jquery-plugin-circliful_·_GitHub

 
ダウンロードしたファイルで必要なのは

の二つですね。

03_jquery-plugin-circliful-master

 

②コードを書いていこう!

■ CSSとjsの読み込み宣言

コメントにも書きましたがjQueryは各自で別途入れてくださいね。
釈迦に説法ですが必ずcircliful jsより前でjQueryを読み込んで下さい。

■ HTML

■ js処理

見て頂けると分かるかと思いますが、divのid名をjavascriptで指定してcircliful()を呼ぶだけですね。
あとはhtmlのdata-○○の部分がオプションなのですが、ここを表示に合わせて変えていくという感じです。

 

③デモを見てみよう!

デモを作りましたが、なせかdata-infoの情報が入りませんでした…。
なぜだろう?
分かったら報告します!

 

注意点

data-iconというアイコンを入れられるオプションがあるのですが、それを使う場合はfont awesomeというフォントアイコンをダウンロードする必要がありますので、注意してくださいね。
本日もありがとうございました。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください