Skip to content

Web業務システムの定番。HTML5×Canvasを使ったグラフライブラリ

by : 2014/08/14

HTML5で追加された新機能の一つにCanvasがあります。よく知られた使い方としてはブラウザゲームの描画がありますが、業務系システムとは縁遠い気がしてしまいます。そこで業務システムならではの活かし方としてチャート(グラフ)を紹介したいと思います。

Canvasタグを使ってグラフを描画するということは、Webブラウザだけで完結するということです。従ってサーバ側の準備は不要で、かつ負荷もありません。HTML5で業務システムを構築する上でCanvasを使ったグラフ描画は欠かせない存在と言えるでしょう。


Epoch


Epochはリアルタイムチャートに対応しています。描画できるグラフは、エリア・ヒートマップ・曲線、円グラフ、棒グラフ、散布図となっています。

Epoch by Fastly

Aristochart


Aristochartは折れ線グラフ専門のライブラリで、Canvasタグにグラフを描画します。負の値や0点を任意の場所に表示する、大量のデータを描画することができます。

Aristochart – Sophisticated Javascript charts.

Chart.js


曲線のグラフ、棒グラフ、レーダーチャート、円グラフ(パイまたはドーナッツ)、エリア円グラフに対応しています。

Chart.js | Open source HTML5 Charts for your website

envision – demos


Envision.jsは折れ線グラフに対応しています。Googleファイナンスのように一部だけをマウスでドラッグして拡大させると言った操作ができるようになっています。

envision – demos

flotr2


flotr2は実に多種多様なグラフが描けるようです。折れ線、某、積み上げ(縦横)、円グラフ、レーダーチャート、範囲、ローソク、曲線、タイムシリーズ、ガントチャートなどです。それらのグラフを組み合わせて使うこともできます。

flotr2

Yokul


YokulはGoogle Image Charts API互換のJavaScriptライブラリです。同じ指定でCanvasタグを使ってローカルだけでグラフを描画します。今のところ棒グラフのみ対応しているようです。

Yokul – Google Charts Reimplemented in a Local JS Canvas – Matt Greer

Smoothie Charts: A JavaScript Charting Library for Streaming Data


ストリーミングで入ってくるデータをリアルタイム描画するのに特化したグラフライブラリです。CPUやネットワークの状況をチェックしたりするのに使えそうです。

Smoothie Charts: A JavaScript Charting Library for Streaming Data

Protovis


Protovisは折れ線、積み上げ、円グラフなどに対応しています。なお開発は終了しており、現在はD3.js開発に移っているとのことです。D3.jsはグラフだけに留まらないデータビジュアル化ライブラリと言えます。

Protovis

nextreports/nextcharts


NextChartsは棒グラフ、円グラフ、エリアグラフ、円グラフなどに対応しています。表示する際にアニメーションするのが特徴です。

nextreports/nextcharts

rendro/easy-pie-chart


easy pie chartは名前の通りシンプルな円グラフです。インジケータになっていて、アニメーションしながら一つの数字を表示します。

rendro/easy-pie-chart


いかがでしたか。Canvasタグを使うことで高度なグラフを描画できるのが分かっていただけたかと思います。若干の難点としてはCanvasタグを使う場合、動作が重たくなってしまう場合があるということでしょうか。

なおhifiveではグラフ描画ライブラリを開発中です。

IE8などのHTML5非対応ブラウザでも利用できるライブラリもありますので、業務システム上でグラフを描画する際に役立ててください!

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

HTML5企業Webシステムのための開発プラットフォーム

From → まとめ, HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。