2009年12月13日日曜日

Highcharts.js を使ってみた


最近IDEA*IDEAさんで取り上げられていたHighcharts.jsを試してみましたので、躓いた点などをメモしておきます。


■公式サイト
http://www.highcharts.com/
ダウンロード、更新履歴はこちらから見られます。ライセンスもこちらに記載があります。
個人利用、教育目的の利用、および非営利組織での利用については無料ですが、商用利用の際にはライセンスの購入（1サイト$80、複数サイト$360）が必要になるので注意です。


■公式リファレンス
http://www.highcharts.com/ref/
おそらく全部JSで実装されているのだと思いますが、凄いクオリティ高いです・・・


■実際に導入してみて躓いたポイント
以下、すべてバージョン1.0.2（2009/12/09）での気づきです。
グラフを描画する領域のサイズは、CSSでは定義できない、直接style属性に書く必要がある
たとえばCSSを使って、
<style>#chart_area {width:800px; height:400px;}</style>
<div id="chart_area" ></div>
のようにしても描画時に無視され、高さが0になります。必ず直接style属性を用いて
<div id="chart_area" style="width:800px; height:400px;"></div>
のように書く必要があります。

Zoom機能を使う際、画面のスクロールが発生すると選択領域がバグる
Mac OS X 10.6上のFirefox3.5.6とSafari4.0.4にて再現。他のブラウザは未チェックです。論より証拠、こちらのページを開いて、少し画面全体を下にスクロールしてから、チャートを縦にドラッグしてY軸ズームしようとしてみてください。まぁ、ひどいバグなのですぐに直るとは思いますが。

seriesに与えるデータは、必ずX軸方向の昇順にソートされている必要がある
特にxAxisにdatetimeを指定しているときが危険です。たとえばこのようなデータはNGです。
series: [{
        name: 'Plague Rider',
        data: [[Date.UTC(2009, 12, 4), 57.4],
        [Date.UTC(2009, 12, 3), 57.6],
        [Date.UTC(2009, 12, 2), 59.1]]
}]
かならずこのようにソートしなければなりません。
series: [{
        name: 'Plague Rider',
        data: [[Date.UTC(2009, 12, 2), 59.1],
        [Date.UTC(2009, 12, 3), 57.6],
        [Date.UTC(2009, 12, 4), 57.4]]
}]
ソートされていないと、チャートにマウスカーソルを合わせてもラベルが表示されなくなります。気づきにくいバグでした。

seriesに与えるデータにnullがあると、0として扱われる
そのため、たとえば12月1日は100、12月2日は110、12月3日はデータが分からないのでnull・・・とすると、12月3日のところだけいきなり0になってグラフが滅茶苦茶になります。回避方法としてはxAxisのtypeをdatetimeにするか、yAxisのminを自分で計算して指定してください。

xAxisのtypeがdatetimeのとき、連続していないデータがあるとsplineは使用できない（lineは使用できる）
原因は不明です。たぶんバグじゃないだろうかと思ってますが、公式のxAxisのtypeがdatetimeなサンプルを見てもsplineではなくてlineを使っているのでひょっとしたら仕様かもしれません。

■まとめ
公開されたのがつい先月の末ということで、まだちょっとBuggyな感じです。また、エラーメッセージがまともに表示されないため、JSファイルのどこでエラーになっているかはわかっても原因が何か分からないなど、デバッグが結構大変です。しかしながらデザイン美麗で機能豊富、カスタマイズも容易と、一通り優れた点は持ち合わせていると思います。PrototypeやjQueryなど他の外部ライブラリに依存しないのも良い点です。$80なら支払ってもよいのでは？


■Google Charts APIとの比較
やはり気になるのはGoogle Charts APIと比べてどちらが使えるかでしょう。ちょっと調べてみました。ただしGoogle Charts APIについては実際に試したことがないのであくまで公式ページのドキュメントを見て気づいた点のみです。間違っていたらごめんなさい。
Highcharts.jsの優れている点
  • 美麗なデザイン
  • ズームや特定データの一時消去、ラベル表示など、対話性に優れたUI
  • 単体のJSファイルなので外部のサーバに依存しない
  • Ajax対応が容易

Google Charts APIの優れている点
  • より多数のグラフに対応（レーダーチャートや地図など）
  • 商用利用でも完全に無料
投稿時間：