表現力の高さに驚き。HTML5/Canvasグラフライブラリ「Flotr2」
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。
これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。
たくさんのサンプルが用意されています。一気に紹介します。
線グラフです。
途中で途切れた曲線のグラフも描けます。
棒グラフです。
マウスオーバーで値を表示できます。
積み上げグラフです。
円グラフです。
レーダーチャート。
範囲グラフ。
ローソクチャートです。
滑らかな曲線のグラフです。
マウスオーバーでグリッドが表示されます。
マウスズームのデモです。
マウスで一部の範囲を指定できます。
折れ線グラフです。
マイナスの値にも対応。
クリックでリアルタイムにグラフを描きます。
画像ダウンロードにも対応しています。
データを表計算で見せる機能も。
タイトル部分もカスタマイズできます。
グラデーションもできます。
タイムライン表示です。
マーカーをつけることもできます。
Flotr2で表現できるグラフは基本として線、棒、ローソク、円、バブルとなっています。対応ブラウザはHTML5を利用できる必要があります。ただしIEについてはIE6からサポート対象になっています。もちろんスマートフォン対応です。
Flotr2はHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
HTML5でグラフを描くメリットとしては、今後モバイル対応のFlash開発が臨めない中でのグラフ描画に対応できること、外部ライブラリを使わない分、CPU負荷が少なくて済むこと、JavaScriptとの親和性が高いと言ったメリットが挙げられます。使われている技術はCanvasです。
HTML5の表現力の高さを支えているのはこのCanvasにこそあると言えるでしょう。それだけにCanvasを使えば何ができるのか、どんな可能性があるのかと言ったことを適切に把握しておくことをお勧めします。バイナリハックでも使われるので、Webデザイナー、プログラマーともにお勧めしたい技術です。