中津川篤司TwitterFacebookはてブPocket1LINEハイブリッドアプリは業務アプリでのニーズが強くあります。業務アプリは素早い改善と確実な動作が求められるので、手軽でかつ安定したWebベースの開発と相性が良いのでしょう。最近ではハイブリッドアプリ開発の実績とノウハウが積み重ねられてきたこともり、安定性には定評があります。そんな業務アプリにおいて求められるのがデータのビジュアル化、グラフです。組み合わせて利用する方法を紹介します。Tabbar」テンプレートを使っています。クラウドIDEのJS/CSSコンポーネントの管理からインストールします。chartjsで検索して、バージョン2.3.0をインストールしました。ロードするコンポーネントはChart.min.jsを指定しています。棒グラフを表示します。height="300"></canvas></div></ons-page></ons-template>グラフを描画する処理は、JavaScriptで実行します。円グラフを描く処理は次のようになります。config);}まずはグラフの設定を行います。グラフの詳細設定を指定します。引数に描画対象のキャンバスとグラフの設定を渡すことで、描画が行われます。棒グラフの場合は次のようになります。config);}あとは、タブバーの機能で各ページが表示されたタイミングで、対象の関数を呼び出すようにすれば完成です。'page2'){barChart();}});動作確認アプリを起動すると、次のように表示されます。グラフをタップするとデータのラベルであったり、数字が確認できます。棒グラフが表示されます。Chart.jsは手軽に導入できるライブラリで、データ部はアプリ内部や外部のサーバから取得するようにすればあっという間に見栄えの良いグラフが描けます。UIと組み合わせるのも簡単なので、ぜひMonacaアプリの中で使ってみてください。Chart.jsを組み合わせたデモです。アップロードしてあります。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。