他のグラフにも対応して欲しい！ 円グラフは複数の情報がどれくらいのシェアを占めているのかを表すのに向いています。そんな円グラフを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