もふもふ技術部

Titanium Mobileでグラフを描画


環境

Mac OS X 10.7.4
Titanium Mobile 3.0.0
iOS 6

あらすじ

Titanium Mobileを使用してグラフを描画したい(とりあえずiPhoneのみで検証)。そんな要件があるが、元来Titanium Mobileは描画系処理には強くないため、モジュールの追加だとかライブラリの利用なくして、標準の機能だけでは実現することができない。ではどのようなライブラリやモジュールがあるか探してみることにした。例として下記のような要件でグラフ描画を行う。

  • 15日間の体重の推移を示す
  • 目標体重と実績の2本の折れ線グラフ
  • ある程度見た目をカスタマイズできること

候補をあげる

  • flot.js
    jQueryプラグインの描画系のライブラリであり、グラフ以外にもガントチャートとか描画することが出来るらしい。今回はグラフが目的だからそこらへんは確かめない。

  • highcharts.js
    こちらもjQueryプラグインのライブラリ。グラフ描画に特化していて、デモを見た感じでは、折れ線グラフ、棒グラフの他にも散布図っぽいのもあった。

  • Titanium Plus+ Charts Module Plus
    Titaniumモジュール。月額使用料がかかるのでその時点でなしだ。ついでに言うと公式?っぽいページを見ようとすると「このサイトはコンピュータに損害を与える可能性があります。」と出るので詳しく調査する意欲が削がれた。

  • Charts Module
    Appcelerator公式モジュール。これまた有償。やる気でない。

というわけで、jQueryプラグインの2種類を試してみる。

flot.js

下記リンクのflot-0.7.zipをDLする。zipを解凍すると色々入っているが、今回はjquery.jsとjquery.flot.jsの2つを使用する。jQuery、flot.jsはWeb用のライブラリなのでWebViewを使用する必要がある。ソースコードを参照されたい。
http://code.google.com/p/flot/
公式API

Titanium側でWebViewを生成し、グラフ描画するHTMLを指定する。
Graph.js

flot.html

こんな感じになる。背景色にグラデーションを使用してるからか、結構見られる出来。

highcharts.js

表示時にリアルタイムでプロットを描いてくれるのが特徴。公式API見ればわかるけどカスタマイズ出来る項目が多い。かつパラメータ指定方法が非常にわかりやすい。英語だけど比較的簡単にやりたいことが見つかった。今回はDLしたデモの簡単な折れ線グラフに下記のようなカスタマイズをしてみた。

  • デフォルトで右下に表示される「highcharts.com」を非表示に。
  • x軸のラベルをtickと同じ位置にする(デフォルトtickの間)。
  • エクスポートボタンとプリントボタンを非表示に。

公式サイトのDownload画面へ。zipを展開するとjsファイルが色々入っているので、jquery.min.jsとhighcharts.jsの2つをプロジェクトへコピー。WebView生成は上記と同じだから割愛する。

highcharts.html


今回はiPhoneで使用することを想定しているが、そのままだとchartがイベントを持っていってしまうのでタッチスクロールすることができない。PCなら問題ないがスマートフォンではダメだ。divを画面全体にabsoluteで重ねて配置してchartにイベントを取られないようにした。おかげでtooltipが表示されなくなってしまったがしょうがない。たぶんイベントをうまくコントロールすれば両者を得ることができそうだが、時間的な都合であきらめることにする。この問題については下記StackOverflowの投稿が参考になった。ちょっと違うやり方にしてしまったが…。
StackOverflow – Scrolling over highcharts graph

結論は最後までもったいぶる

まずflot.jsについて。flot.jsは非常にシンプルですぐに実装できた点は良かった。見た目もそれなりのものが出来るし、デザイン要件が甘いときはこっちの方が手っ取り早いかも。対して、highcharts.jsはあえて言うなら、最も基本的なな折れ線グラフを描画するだけでも指定が多くちょっとコード量が多い気がしたが、正直微々たる差だと思う。それにhighcharts.jsの方がカスタマイズ性も高く、手をかければそこそこ視覚的にリッチなものを描画することも出来るし、逆にシンプルに書くのも容易。そして何よりも、公式APIが見やすく整理されて充実しているのは多大な評価に値すると思う。両者に共通した注意点を述べるとすると、グラフ描画にひと呼吸置いたようなラグが発生すること(iPhone4, iOS6で検証)。この辺はモバイル端末のスペックを鑑みると致し方ないのだろう。

ソースコードは原田敦のgithubからどうぞ。

The following two tabs change content below.
原田 敦

原田 敦

日本CAWのエンジニア。もふもふ部の部長。得意分野はRuby on Railsを使った小規模WEBアプリケーションを高速で開発すること。週末の楽しみは一人お菓子パーティー。三度の飯より小動物をもふもふするのが好きです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">