今回は、D3.jsを使用してドル円(USDJPY)の日足チャートを表示する方法について紹介します。
※D3.js関連記事のコードを流用します。

まず、ドル円の日足の四本値(始値、高値、安値、終値)のCSVデータを取得します。

セントラル短資FX データダウンロードからドル円の日足データCSVを取得し、2次元配列のデータを作成します。

app.js

ローソク足(Candlestick)は、以下の図のように、始値~終値の四角と高値~安値の縦線を組み合わせて表示します。

style.css

d3chart.js

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

株や為替の収支管理系アプリにさまざまなチャートを表示する機能があれば、より一層の注目が得られるかもしれませんね。
※アプリから直接データを取得する場合、データ提供サイトに利用許可など確認する必要があります。

【Monaca】D3.jsを使用してドル円の日足チャートを表示する
Tagged on: