Monacaアプリにグラフを表示しよう。Plotlyレビュー

HTML5の浸透によってWeb技術の表現力は向上し、グラフやチャートなどの複雑な図形も描画できるようになりました。数値をただ羅列するだけでは分からないトレンドの変化も、グラフで可視化することによって見やすく、分かりやすくなります。

今回はJavaScriptベースで使えるグラフライブラリのPlotlyを紹介します。使いやすく多彩な表現が可能なので、多くの場面で役立ちそうです。

Plotlyとは

Plotly はオープンソースのデータ可視化ライブラリです。折れ線/棒/曲線/円/ドーナッツ/エリア/散布図のようなグラフに加えてローソクチャート、地図、ヒートマップ、3Dなどの表示にも対応しています。グラフの表示にはd3.js、3D表示にはstackglが用いられています。入力データはJavaScriptで指定する他に、CSVやJSONからの入力にも対応しています。

plotly/plotly.js: The open source JavaScript graphing library that powers plotly

Plotlyのインストール

PlotlyはCDNでも配信されていますが、MonacaであればJS/CSSコンポーネントの追加と削除からPlotlyを検索するのが良いでしょう。検索結果がたくさん表示されますが、plotly.js（plotlyではなく）を選んでください。

つづいて読み込むライブラリとして、 dist/plotly.min.js を選択します。

これでインストールは完了です。

基本的な使い方（折れ線グラフ）

まずグラフを描く領域を用意します。

<div id="graph" style="width:100%;height:250px;"></div>

次にJavaScriptで、グラフを描画するコードを記述します。

const graph = document.getElementById('graph');
Plotly.plot( graph, [{
  x: [1, 2, 3, 4, 5],
  y: [1, 2, 4, 8, 16] }], {
  margin: { t: 0 } 
});

これだけでXY軸を使った棒グラフが描けます。

機能

各グラフはズームイン/ズームアウトが可能です。指定した部分だけを表示させる機能もあります。デスクトップであれば画像保存もできるようですが、Monacaアプリからはできないのでご注意ください。

レスポンシブ対応

スマートフォンを回転させたタイミングで window.onresize イベントが実行されます。このタイミングでPlotlyの再描画を行うことでグラフをレスポンシブにできます。

window.onresize = function() {
    Plotly.Plots.resize(gd);
};

基本的なグラフ

その他の基本的なグラフです。

散布図

円グラフ

ドーナッツグラフ

エリアグラフ

棒グラフ

横向きの棒グラフ

ゲージチャート

複雑なグラフ

複雑な例として、複数のグラフを織り交ぜることもできます。

ボックスチャート

ヒストグラム

ヒートマップ

三角グラフ

ローソクチャート

これはファイナンス系で使えそうです。

全体を見ると折れ線グラフのように見えますが、拡大するとローソクになっているのが分かります。

地図

地図を利用するのは簡単です。以下のように指定するだけでヨーロッパのSVGデータが呼び出せます。

var layout = {
    'geo': {
        'scope': 'europe',
        'resolution': 50
    }
};

3Dグラフ

3Dグラフは描画に若干の時間がかかります。表示された後はタップ操作でぐりぐりと動かせます。

難点

一部のグラフについてはサイズが小さく表示されてしまうことがありました。オプションで調整できるのかもしれませんが、未検証です。タブレットなどの画面幅が広い環境であれば問題にはならないと思います。

Plotlyを使えばデータの可視化が手軽に実現できます。ぜひ皆さんのアプリ開発に役立ててください。

今回プロジェクトはこちらのURL で公開してあります。また、GitHub上でも goofmint/Monaca_Plotly_Demo にて公開しています。実装時の参考にしてください。