Bootstrap jQeuryプラグインサンプル

Bootstrapで利用できるjQueryプラグイン グラフ

Posted 6月 17 2015 by 小野 茂  , ,

Bootstrapで利用できるjQueryプラグイン グラフ

Bootstrapで簡単に利用可能なjQueryのプラグインをご紹介します。
今回はグラフ編です。

グラフ表示はデータの見える化などと言われて色々突っ込まれます。
Excel並みのグラフを表示しろ!とかなんだかんだ言われます。

最近はSVGdomをガリガリといじるプラグインなど増えてきたので、かなり見やすくはなっています。
操作感なども5年前と比べると早くなったかと思います。(自分のPCが早くなったからかも。。。)

EASY PIE CHART

http://rendro.github.io/easy-pie-chart/

EASY PIE CHART →

簡単円グラフ!
簡単です。そう簡単なんです。うにうに動きます。
前年対比とか先週対比などの数字などに利用すると盛り上がります。
出来れば100%に集約するような数字が良いですが。。。

Flot

http://www.flotcharts.org/

Flot →

良く使われている折れ線グラフです。
アニメーションは得意ではないのですが、小さいグラフなどには威力があります。
まずは試すのをお勧めします。

JustGage

http://justgage.com/

JustGage →

ゲージ表示です。デフォルトでアニメーションします。
dashboardに投入すると威力絶大です。
簡単な数字をより効果的に見せることが出来ます。

morris.js

http://morrisjs.github.io/morris.js/

morris.js →

SVGでグラフを描画します。
線、エリア、棒グラフ、ドーナツチャートなどの描画が出来ます。
描画されるまでの時間はFlotの方が早いですが、Flotより表現力があるグラフがかけます。
一度描画されると、動きはスムーズでいい感じです。

Rickshaw

http://code.shutterstock.com/rickshaw/

Rickshaw →

そういえば最近あまり話題に上がっていないような気がする「d3.js」を利用したグラフ描画プラグインです。
d3.js好きにはたまらないと思うのですが、そうでもなければ morris.js でも良い感じがします。
ただ、d3.js好きにはたまりません。特にコードが簡単です。

jQuery Sparklines

http://omnipotent.net/jquery.sparkline/#s-about

jQuery Sparklines →

インライン要素にグラフを描画します。
ちょっとした小さいグラフを描画するのに最適です。管理系のサイトでは結構頻繁に使っているのを見ています。
使い方もとても簡単で、サイトにコードジェネレータもついています。
jsの部分をデータで更新すれば簡単に利用可能です。

graphtable

http://github.com/sithmel/graphTable

graphtable →

HTMLのtableからグラフを作成してくれる優れものです。
表現力が欲しい場合は別に作る必要があるのですが、簡易的なもので良いのであればお勧めです。


Bootstrap HTML5 jquery



  未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





メールアドレス
ご質問・問い合わせ等、ご自由にお書きください。