【Monaca】CSVデータを取得して日足チャートを表示する

今回は、セントラル短資FX データダウンロードからCSVデータを取得して、日足チャートを表示する方法を紹介します。

info.ctfx.jp
データダウンロード（CSV）│外国為替取引　セントラル短資FX
https://info.ctfx.jp/service/market/data_download.html
セントラル短資FXが提供。外国為替情報・経済指標ならマーケット・ファインダー

※公開を目的としたアプリから直接データを取得する場合、予めデータ提供サイトに利用許可など確認する必要があります。

Continue reading

【Monaca】D3.jsのグラフの背景をグラデーションに変更する

今回は、「【Monaca】D3.jsを使用したグラフの特定の軸の色を変更する」で使用したコードを流用し、グラフの背景をグラデーションに変更する方法を紹介します。

otak-lab
2020.10.21
【Monaca】D3.jsを使用したグラフの特定の軸の色を変更する
https://otak-lab.com/archives/3683
D3.jsを使用した折れ線グラフです。このままでは少し味気がないので、縦軸の土曜日を青・日曜日を赤・ボーダーラインとして横軸の500をオレンジに変更したいと思います。「Onsen UI V2 JS Minimum」というテンプレートを使用します。日付の処理にMoment.jsを使用します。以下のようにファイルを配置します。index.html<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalabl...

Continue reading

【Monaca】D3.jsを使用してドル円の日足チャートに指数平滑移動平均線を表示する

今回は、前回の「【Monaca】D3.jsを使用してドル円の日足チャートに単純移動平均線を表示する」のコードを流用して、指数平滑移動平均線を表示しようと思います。
Continue reading

【Monaca】D3.jsを使用してドル円の日足チャートに単純移動平均線を表示する

今回は、「【Monaca】D3.jsを使用してドル円の日足チャートを表示する」のコードを流用して、単純移動平均線を表示する方法について紹介します。

otak-lab
2020.06.26
【Monaca】D3.jsを使用してドル円の日足チャートを表示する
https://otak-lab.com/archives/3432
今回は、D3.jsを使用してドル円(USDJPY)の日足チャートを表示する方法について紹介します。※D3.js関連記事のコードを流用します。まず、ドル円の日足の四本値(始値、高値、安値、終値)のCSVデータを取得します。セントラル短資FX データダウンロードからドル円の日足データCSVを取得し、2次元配列のデータを作成します。app.js"use strict";ons.ready(function () { var data = , , , , , , , , , , , , , , , , , , ]; window.fn.chart.createChart("chart...

Continue reading

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

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

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

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

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

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

Continue reading

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

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

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

Continue reading

【Monaca】D3.jsを使用して棒グラフを表示する

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

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

Continue reading