ハイブリッドアプリは幅広く使われていますが、特に需要が高いのが企業向けアプリです。マルチプラットフォームでの動作やWeb技術を使った素早い開発スタイルが好まれています。

 

そんな業務システムを作る上で欠かせないのがグラフやチャートではないでしょうか。膨大なデータも可視化することでトレンドを見いだしたり、経営判断をする上で大事な指標になることでしょう。

 

ということで今回は有償のチャート、UIライブラリであるWijmoをMonacaアプリ上で試したいと思います。

 

グラフの種類

 

まずは基本となる棒グラフです。グラフはSVGで描かれているので描画が高速です。

 

 

タップイベントによるドリルダウンに対応しており、インタラクティブなグラフが描けます。さらに描画はレスポンシブで縦向き、横向き両方に対応しています。

 

 

グラフをリアルタイムに切り替えることもできます。例えば円グラフに切り替えた場合。

 

 

複数の項目を並べることもできます。

 

 

別なグラフと組み合わせる表示もサポートしています。

 

 

グラフはSVGで表示されていますのでスタイルシートを使ってスタイルの変更ができます。

 

 

リアルタイムにデータを追加していくグラフも利用できます。

 

 

実際にデータが追加されている時にはこのように表示されます（画像をクリックすると再生されます）。監視系やストリーム系データを扱うときに重宝しそうです。

 

 

それ以外にも曲線グラフや、

 

 

エリアグラフもあります。

 

 

タブレットサイズにも対応

 

レスポンシブに対応しているということもあり、タブレットでの横型サイズでも問題ありません。SVGなのでサイズが大きくなってもグラフはぼやけることなく綺麗です。むしろ細部まで確認したい時にはタブレットサイズのが良さそうです。

 

 

曲線のエリアグラフも綺麗です。

 

 

プロットだけの描画。

 

 

このように2カラムとしてグラフとその説明を表示するのもタブレット向きです。

 

 

軸のラベルやヘッダー、フッターなどのラベルを変更するのも簡単です。

 

 

タップした時にイベントを実行できます。

 

 

---

 

多機能な分、読み込むファイルも多くなりますのでMonaca IDEでアップロードするよりもLocalKitで実行した方が良いかと思います。Wijmo自体はグラフだけでなく、UIライブラリも含んでいるのでExcelのような表計算表示であったり、日付時刻や色選択など多彩な入力コンポーネントが用意されています。Webブラウザで見られるデモが用意されていますので気になる方はチェックしてみてください。

 

WijmoとMonacaアプリの相性は良いように感じます。業務アプリで求められる機能が数多く提供されていますのでぜひ試してみてください。

 

HTML5／AngularJS／TypeScript対応JavaScriptライブラリ - Wijmo [ ウィジモ ] | グレープシティ株式会社