2013年4月23日火曜日

Highcharts 3.0で追加された Axis.toPixels() が色々捗る件


Highchartsという、jQueryベースのグラフ描画ライブラリが有ります。
グラフ描画に特化したライブラリの中では、一番、かっこよくてダサくなく実用的なライブラリだと個人的には思っています。
商用利用時は有料ですが、個人利用であれば無料で使えます。
http://www.highcharts.com/
公式サイトはこちら。

最近?だと、PHPMyAdminのグラフ描画なんかでも使われてますね。
※データベースの「状態」や、クエリのプロファイリングで見れます。

ライセンスがどうしても気に食わない、とか
もっとスゲー事やりたい!って人は
D3.jsをどうぞ。
グラフ化よりもう少し上、データビジュアライゼーションのためのライブラリです。
http://ja.d3js.node.ws/
※jQueryに依存してません。

さて。
Highcharts、2013/03/22に3.0にバージョンがあがりました。
パッと見一番解りやすいのは、デフォルトのグラフの色が変わったことなんですが
その他にも、バブルチャートが追加されたり、色々追加されています。
http://www.highcharts.com/component/content/article/2-news/54-highcharts-3-0-released
大きな変更点はこちらの公式ニュースを読んでください。

細かいところでも、いくつかAPIに追加があるのですが、
今回は、タイトルに有るとおり、3.0で追加されたAxis.toPixels()のお話です。

http://api.highcharts.com/highcharts#Axis.toPixels()
公式APIドキュメントが上記です。
APIドキュメント上にサンプルが無いので、
公式デモの一番最初のグラフのソースをベースに紹介しますね。

グラフの下に、謎の数字が出ているかと思います。
これが、「X軸が3の値をプロットするときのX座標」を表しています。
このグラフだと、X軸にcategoryで名前を与えているので、ちょうどAprの所になります。
2にするとMarの所のX座標になります。
小数点でもOKなので、例えば2.5なんて入れると、MarとAprの中間点の座標が取れます。

コレが、もー本当に捗るんですよ!
こいつが後1ヵ月遅ければ、今の私はデスマっていたかもしれないレベルで。

…先ほどのサンプルだけだと何が捗るかよーわからんと思うので、説明しますね。

例えば、先ほどのグラフで、東京の5月の気温をうまくとることが出来ず、データ上0になってしまったとします。
グラフ上すごいV字になってしまいます。
大体の人は「なんか障害があって取れなかったのかな?」と思ってくれるでしょうが、気持ち悪いので、
ちゃんと理由を吹き出しで明示したくなりました。

グラフの下に、HTMLで普通に記述しても良いのですが、
せっかくなので、Excel(笑)のオートシェイプみたいに吹き出しを上に乗せたい!

という時に、こんな感じで書けるんです。

重要なポイントは、chart.events.loadとchart.events.redrawで描画ファンクションを呼ぶ事。
特に、redrawが重要で、ここで再描画するようにしておく事で、
画面のサイズ変更時にも適切な位置に配置してくれます。
Edit in JSFiddleをクリックして、新しいウィンドウででデモ表示して横幅を変えると解りやすいです。
jQueryのwindow resizeのイベントにバインドして再描画しようとしても、上手くできないので注意。

後、y軸の値、今回のケースでは0だと解り切っていましたが、
場合によっては変動する可能性もあるので、4行目のようにして取得すると良いです。

今回、吹き出しのCSSが面倒だったんでAAにしちゃいましたが、
#textのCSSを弄れば、イケてる吹き出しにももちろん出来ます。
widthとかmargin-leftも、動的に取るようにすれば本当に自由に吹き出しが表示出来ますね。
また、#textはただのDIV要素なので、onclick等のイベントも設定出来ます。
「吹き出しをクリックしたら、具体的な障害内容が出る」とかも、jQueryの知識だけで簡単に出来ますね!

というわけで、Highcharts 3.0で追加されたAPIがすごく捗るお話でした。

0 件のコメント:

コメントを投稿