最近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>のようにしても描画時に無視され、高さが0になります。必ず直接style属性を用いて
<div id="chart_area" ></div><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の優れている点
- より多数のグラフに対応（レーダーチャートや地図など）
- 商用利用でも完全に無料
