読者です 読者をやめる 読者になる 読者になる

JavaScriptでグラフ表示

Tech

YUI(Yahoo! UI Library)から、Chartライブラリがリリースされました。

  • 棒グラフ(縦/横)
  • 折れ線グラフ
  • 円グラフ
  • 積み上げ棒グラフ(縦/横)

など、基本的なグラフは一通り揃っているようです(動作には、Flash Player が必要となります)。


デモを見る限りでは、比較的簡単なコードでグラフを描画できていますね。


Javaにおけるグラフ表示と言えば、JFreeChartが有名ですが、サーバ側でゴリゴリな実装が必要です。そのため、私自身はあまり好きではなかったのですが、JavaScriptのグラフ表示ライブラリの場合、十数行程度でもグラフが描画できるものが多く、さらに、Ajaxなどでデータ転送量も少なくできるため、今後はこちらの方が利用シーンが多くなっていくような気がします。


また、以前に、グラフ表示のライブラリを調査したことがあるのですが、そのときの情報を以下にメモしておきます。
調べてみたら、結構数があるものなんだなと思いましたが、帯に短し襷に長し的なところがありました(w
それに比べると、YUIのChartライブラリは実案件に耐えうるモノという感じがします。

Prototype.jsをベースにしたライブラリも多いのですが、このときは、jQueryベースで考えていたので、それらのモノは調査対象外でした。また、Google Chart APIのように、インターネット経由でアクセスするようなものも対象外です。

WebFX

  • 棒グラフ(縦のみ)
  • 折れ線グラフ
  • 面グラフ


グラフの組み合わせができるのは良かったが、なぜか、棒グラフの場合のみ、軸ラベルが表示されず。

JSGraph

  • 棒グラフ(縦/横)
  • 折れ線グラフ
  • 円グラフ


こちらも、グラフの組み合わせが可能。
でも、デザイン的に、自分の好みではなかった・・・

HTML5.JP

  • 折れ線グラフ
  • 円グラフ
  • 積み上げ棒グラフ(縦のみ)
  • レーダーチャート


日本人が開発しているライブラリで、デザイン性も良かったのだが、ASP.NETでは、IE用のcanvas機能がうまく動作せず。IE6/IE8(beta)では、軸やプロット値だけが表示され、グラフ自体が表示されない状態になってしまう(IE7では表示できた)。

ASP.NETExplorerCanvasの相性が悪いようで、問題は解決できず。ExplorerCanvasを利用しているグラフライブラリは多いが、それらも同様の現象になる可能性あり。
また、棒グラフが、積み上げしかできず、複数の系列を表示できないのが注意点。

Flot

  • 棒グラフ(多少強引にやればできる)
  • 折れ線グラフ


ブラウザ上で、グラフのズームや系列の表示/非表示切り替え、2軸プロットなどができるのはすごいのだが、折れ線グラフに特化している。多少強引にやれば棒グラフの表示もできるのだが、実装に手間がかかる。

折れ線グラフしか利用しないのであれば、高機能であるため、利用価値は高そう。

jQuery Chart Plugin

  • 棒グラフ
  • 折れ線グラフ
  • 面グラフ


シンプルではあるが、基本的な機能が揃っている。
単純なグラフしか利用しないのであれば、これで十分かも。