Monacaアプリにグラフを表示しよう。ーモナカプレス技術情報Monacaアプリにグラフを表示しよう。PlotlyレビューMonacaアプリにグラフを表示しよう。中津川篤司Twitter2Facebook11はてブ1Pocket7LINEHTML5の浸透によってWeb技術の表現力は向上し、グラフやチャートなどの複雑な図形も描画できるようになりました。数値をただ羅列するだけでは分からないトレンドの変化も、グラフで可視化することによって見やすく、分かりやすくなります。今回はJavaScriptベースで使えるグラフライブラリのPlotlyを紹介します。使いやすく多彩な表現が可能なので、多くの場面で役立ちそうです。オープンソースのデータ可視化ライブラリです。折れ線/棒/曲線/円/ドーナッツ/エリア/散布図のようなグラフに加えてローソクチャート、地図、ヒートマップ、3Dなどの表示にも対応しています。グラフの表示にはd3.js、3D表示にはstackglが用いられています。入力データはJavaScriptで指定する他に、CSVやJSONからの入力にも対応しています。plotlyPlotlyのインストールPlotlyはCDNでも配信されていますが、MonacaであればJS/CSSコンポーネントの追加と削除からPlotlyを検索するのが良いでしょう。検索結果がたくさん表示されますが、plotly.js(plotlyではなく)を選んでください。これでインストールは完了です。基本的な使い方(折れ線グラフ)まずグラフを描く領域を用意します。style="width:100%;height:250px;"></div>次にJavaScriptで、グラフを描画するコードを記述します。}});これだけでXY軸を使った棒グラフが描けます。各グラフはズームイン/ズームアウトが可能です。指定した部分だけを表示させる機能もあります。デスクトップであれば画像保存もできるようですが、Monacaアプリからはできないのでご注意ください。イベントが実行されます。このタイミングでPlotlyの再描画を行うことでグラフをレスポンシブにできます。{Plotly.Plots.resize(gd);};基本的なグラフその他の基本的なグラフです。円グラフドーナッツグラフエリアグラフ棒グラフ横向きの棒グラフゲージチャート複雑なグラフ複雑な例として、複数のグラフを織り交ぜることもできます。ボックスチャートヒストグラムヒートマップ三角グラフローソクチャートこれはファイナンス系で使えそうです。全体を見ると折れ線グラフのように見えますが、拡大するとローソクになっているのが分かります。地図を利用するのは簡単です。以下のように指定するだけでヨーロッパのSVGデータが呼び出せます。50}};3Dグラフ3Dグラフは描画に若干の時間がかかります。表示された後はタップ操作でぐりぐりと動かせます。一部のグラフについてはサイズが小さく表示されてしまうことがありました。オプションで調整できるのかもしれませんが、未検証です。タブレットなどの画面幅が広い環境であれば問題にはならないと思います。Plotlyを使えばデータの可視化が手軽に実現できます。皆さんのアプリ開発に役立ててください。