今回は、前回紹介した「【Monaca】D3.jsを使用してグラフに複数の折れ線を表示する」のコードに凡例を表示する処理を追加します。


チャートの上部に高値・安値という凡例を表示します。
getBBox()で凡例(circleやtext)のwidthを取得することで、可変長の文字列に対応が可能になります。

Monacaデバッガーの結果です。

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

style.css

d3chart.js

D3.jsを使用したグラフと、前回紹介したcordova-sqlite-storageプラグインを組み合わせれば、体重や収支などを管理するアプリを開発することができます。

私は、すべて独学による解釈で開発を行っております。
優れた技術者ではありませんが、MonacaやCordovaに関連するブログ記事やstackoverflowteratailなどを参考に試行錯誤し、現在に至ります。

【Monaca】D3.jsを使用したグラフに凡例を表示する
Tagged on: