今回は、前回紹介した「【Monaca】D3.jsを使用して折れ線グラフを表示する」のコードを流用し、グラフに複数の折れ線を表示する方法について紹介します。


日経平均の高値と安値を折れ線グラフに表示します。
Monacaデバッガーの結果です。

まず、2次元配列を以下のように変更します。

app.js

CSSに以下のコードを追加します。

style.css

複数の折れ線を表示する場合の注意点は、ハイライト行の箇所です。
折れ線の点を表示するselectAll()circleを指定すると、2本目の点が表示されません。
1本目の点をselectAll(“circle.red”)、2本目の点をselectAll(“circle.green”)と指定すると表示することができます。

d3chart.js

もしお役に立ちましたら、投げ銭ではありませんが、以下のバナーなどから会員登録をお願いします。





【Monaca】D3.jsを使用してグラフに複数の折れ線を表示する
Tagged on: