ITエンジニア/デザイナ向けにオープンソースを毎日紹介

他のグラフにも対応して欲しい!

円グラフは複数の情報がどれくらいのシェアを占めているのかを表すのに向いています。そんな円グラフをWeb上で手軽に扱えるようにしたJavaScriptライブラリがPizza Pie Chartsです。

さらに円グラフはSVGで作られており、Retinaなどの高画質ディスプレイやもちろんスマートフォンにも対応できるようになっています。

使い方はまずHTMLを用意します。例えば下のような感じ。

<ul data-pie-id="svg">
  <li data-value="60">Water Buffalo (60)</li>
  <li data-value="20">Bison (20)</li>
  <li data-value="12">Sheep (12)</li>
  <li data-value="32">Goat (32)</li>
  <li data-value="50">Shetland Pony (50)</li>
</ul>
<div id="svg"></div>

そしてPizzaのメソッドを実行します。

Pizza.init();

これで円グラフが描かれます。

できました!
できました!

マウスオーバーによるアニメーションもついています。

特定の部分がハイライト。
特定の部分がハイライト。

中央が抜けたドーナッツ版もあります。

ドーナッツ型。
ドーナッツ型。

そして画面幅を縮めた場合も問題なく表示されます。

レスポンシブサポート。
レスポンシブサポート。

Pizza Pie ChartsはZURB Frameworkから機能を抜き出したもののようですが、依存していないので使い勝手が良いです。SVGという利点からレスポンシブに使えたり、Retinaディスプレイでもぼやけずに表示ができます。

Pizza Pie ChartsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Pizza Pie Charts | Playground from ZURB

zurb/pizza

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2