GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。

Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。


サンプルです。まず棒グラフ。


エリアグラフ。


積み上げ型のエリアグラフ。


こんな複雑な感じにも。


棒グラフ。


積み上げの棒グラフ。


横棒グラフ。


スパークライン。


棒型のスパークライン。


エリア型のスパークライン。

GraficoはPrototype.jsを使ってSVGでグラフを描いています。対応ブラウザはIE6以上、Firefox3以上、Google Chrome、Safari、Operaとなっています。単純に表示する他、マウスを載せた際に説明を出す機能もあります。

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

MOONGIFTはこう見る

JavaScriptを使ってグラフを描くメリットは多数あります(詳しくはこちらのプレミアム記事参照のこと)。対応ブラウザには注意が必要ですが、それさえ問題なければ積極的に使ってみるといいでしょう。

Graficoがお勧めなのはスパークラインに対応している点です。文章中にグラフを埋め込んで表示したいという時にテキストの回り込みを使わずに済みます。スパークラインは全体のトレンドを簡単に把握したいというニーズにはぴったりなので、そういった場面で試してみると良さそうです。

Grafico javascript charting library

デモ:Grafico javascript charting library documentation

Kilian/grafico