SVGで綺麗なグラフを描くライブラリ×10選

by moongift : 2016/06/24

HTML5でグラフを描く方法は幾つかあります。一つはCanvasを使った方法です。これは高度なグラフィックスが描ける一方、JavaScriptなどからインタラクティブに扱うのは複雑になっています。

そこで今回はSVGを使ったグラフライブラリを紹介します。SVGはXMLベースで軽量、かつJavaScriptとの親和性も高いものが多くなっています。

morris.jsは主に折れ線、棒、曲線、ドーナッツグラフをサポートしています。データをJSONで渡すだけで使えるので学習コストが低いのがメリットです。ライセンスは簡易BSD Licenseとなっています。

Chartistはレスポンシブであることをメリットとしています。曲線、棒、円、ドーナッツグラフをサポートしています。ブラウザはIE9以降を対象としています。アニメーション機能もあり、よりダイナミックなグラフを描けます。

リアルタイムに描画を変化させていくグラフをサポートしています。エリア、ヒートマップ、曲線/折れ線、ドーナッツ、棒、散布図など幅広いグラフに対応しています。ストリーム系のデータを表示するのに良さそうです。

PHPによるSVGグラフ出力ライブラリです。通常、JavaScriptでSVGを生成しますが、こちらはサーバサイドで生成します。3Dグラフもサポートしており、より見た目にこだわったグラフを描くのに良さそうです。

高度なグラフライブラリで、多数の表示方法に対応しています。折れ線/曲線、エリア、スパークライン、棒、円、散布図、3D、各グラフを合わせた複合グラフが描けます。それだけでなく、ゲージ、ヒートマップ、ツリーマップ、ピラミッドなど細かくカスタマイズしたチャートも描画できます。

円またはドーナッツグラフを描くためだけのライブラリです。レスポンシブに対応しています。特化型の分、それだけが目的であれば手軽に使えるでしょう。

折れ線グラフを描けます。ビルダーを用意しており、できあがったグラフを画像、SVG、JSONで出力できます。それらを埋め込むだけで表示できるので、ライブラリすら必要としないのは利点かも知れません。

折れ線グラフに特化したライブラリです。手書きでグラフを書いたり、ズームイン/アウトをサポートしています。関数を埋め込んでグラフ化したり、データの平均線を描くこともできます。

グラフは企業Webシステムにおいてレポーティングでよく使われる機能です。かつては表現力の低さが問題だったWebですが、HTML5によって大幅に改善されています。JavaScriptだけでできるとなれば、サーバへの追加ライブラリも不要ですぐに取りかかれることでしょう。

コメントは受け付けていません。

最近の投稿