Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。

ピクチャ 12.png

JavaScriptのみでグラフを表示する

 

だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。

今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。

jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう(ぜひ試していただきたい)。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使えそうだ。

ピクチャ 15.png

オンマウスで値を表示

 

描画できるグラフは点のみのプロット、折れ線グラフ、曲線グラフ、棒グラフ(縦横)、トレンドグラフなどだ。さらにドラッグアンドドロップでプロット位置を変えたり、オンマウスで値を表示することもできる。

文字を横向きに表示することもできるなど、優秀なライブラリだ。jQueryを使っている方はチェックして欲しい。

 

jqPlot - Pure Javascript Plotting

 http://www.jqplot.com/