PeityはjQueryでSparklineグラフ(円、棒、折れ線)を描くJavaScriptライブラリ。

PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。


円グラフ

だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。

Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。


折れ線グラフ

タグの中に埋め込まれた文字を使ってグラフにしてくれるのが特徴だ。例えば2/10という文字であれば20%の円グラフになる。0.52/1.561のように割合は気にせず作れるのが便利だ。棒、折れ線グラフも数値は気にせず表記してしまえばPeityが自動的に良いグラフにしてくれる。使いどころは多そうだ。

[s2If current_user_can(access_s2member_level1)]


棒グラフ(プレミアム限定)

[/s2If]

MOONGIFTはこう見る

Peityは文章や表の中に埋め込んで使うと便利だ。例えば株価表示で、銘柄の横にPeityの折れ線グラフがあるといった感じだ。またユーザによる評価を円グラフにして、その設問の横に表示しても良い。いずれにしても複雑なグラフの描画には向かないので、割り切って使うのが重要だ。

グラフを使うと表面上には現れていない傾向や推移が追いかけられるようになる。見た目のインパクトも大きい。あまり多用するのは禁物だが、ここぞという場所に設置すると映えるはずだ。

Peity • progressive pie charts

benpickles/peity - GitHub