投稿者: 管理人

今回は、前回紹介した「【Monaca】D3.jsを使用して折れ線グラフを表示する」のコードを流用し、グラフに複数の折れ線を表示する方法について紹介します。日経平均の高値と安値を折れ線グラフに表示します。Monacaデバッガーの結果です。まず、2次元配列を以下のように変更します。app.js"use strict";ons.ready(function () { var data = , , , , , , , , , , , , , ]; window.fn.chart.createLineChart("chart", data);});CSSに以下のコードを追加します。style.css....

私が開発したアプリの折れ線グラフは、すべてD3.jsを使用しています。「どうやって折れ線グラフを表示しているのか」など問い合わせが多いため、今回はコピー＆ペーストすればアプリに使える、折れ線グラフを表示する方法について紹介します。d3.min.jsをフォルダにアップロードしてください。2次元配列dataに年月日と数値を設定し、window.fn.chart.createLineChart("chart", data)を実行すれば、折れ線グラフが表示されます。※見た目が少し変わるように、Google Fontsを使用しています。Monacaデバッガーの結果です。iOS版...