IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ「Highcharts」
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。
Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。
折れ線グラフです。
Ajaxによるデータロード対応です。
グラデーションをかけることもできます。
滑らかな曲線です。
アイコンを貼付ける例です。
プロットのみで。半透明なドットを使っています。
エリアグラフです。
マイナスの値にも対応しています。
積み上げグラフです。
棒グラフです。
左右比較型の棒グラフです。
複数のデータを並べられます。
棒グラフもマイナス値を出せます。
こんな感じの棒グラフも。
さらにドリルダウン対応です。
HTMLのテーブルからデータを読み取っているサンプルです。
円グラフです。
二重の円グラフです。格好いい！
時間経過とともにデータが追加されていくリアルタイムグラフです。
クリックするとプロットされるサンプルです。
範囲を指定して拡大できるサンプルです。
複数のグラフをまとめて表示できます。
こちらは棒グラフと折れ線グラフを重ねています。Y軸が二つあります。
さらに複雑に。
近似値のグラフも描けます。
テーマを変えてこんな感じに。
背景に画像をあてるのもできます。
いかがでしょうか。HighchartsはiPhone/iPadといったデバイスにも対応し、さらにIE6でも利用できます。またSVGを使っているのでHTML5対応のブラウザであれば利用可能です。IEの場合はVMLを使っています。Pure JavaScriptであり、jQueryやMooToolsといったJavaScriptフレームワークとも組み合わせ可能です。
グラフはエクスポートに対応していて、PNG/JPEG/PDF/SVGでの出力ができます。Highchartsは非商用に限り無償で利用可能なJavaScriptライブラリとなっています。
MOONGIFTはこう見る
Webアプリケーションにおいてグラフの持つ威力はとても大きいです。あまり使うとごちゃごちゃしてしまう可能性がありますのでピンポイントで積極的に使っていくべきでしょう。Flashベースのグラフライブラリが有名ですが、最近になってJavaScriptのグラフライブラリものびてきています。
画像と違ってマウスのアクションやデータの更新などダイナミックにグラフを展開できるのが利点と言えます。ちょっとアニメーションしながら表示するだけでも随分インパクトが違うものです。Highchartsは対応しているグラフも機能も多く、WebブラウザもIE6から使えるといった具合に今後のプロジェクトで取り入れてみたいグラフライブラリと言えます。