JavaScriptでローソク足チャートをcanvasに描画【Apexchart.js】

JavaScriptのチャート描画ライブラリについて

色々あるけど一番便利なのがこれ

Apexchart.js

使い方が簡単でほぼ何でもできます。

▼ 描画できるチャートの種類

  • ローソク足チャート
  • 折れ線チャート
  • 棒状・円状グラフ
  • 対数表示チャート
  • 上記を混合させたチャート

ここでは一例としてローソク足を描画してみます。

まずApexchart.jsをCDNなどから読み込みする

ApexChartの公式サイトはこちら

▼ APEXCHARTS.JS

右上にある DOWNLOAD からzipがダウンロードできます。それを解凍したらdistフォルダの中にある apexcharts.min.js (+css) を読み込みすればOKです

▼ フッターなどで読み込みさせる

▼ あるいはCDNを利用することもできる

https://cdnjs.com/libraries/apexcharts

最新バージョンは3.33.1

このライブラリは公式を見ればわかるように、リファレンス・デモがとても充実してることですね。そしてチャート描画も特定形式のデータがあれば簡単に作れます

ビットコインの過去5年のOHLCデータを拝借

チャート描画の対象は何にしようかな…

ここではビットコインのOHLCを使うことにします

※ OHLC = Open, High, Low, Close

ここではbitFlyerのBTC/JPYをダウンロード

▼ BTC JPY bitFlyer過去データ

ここから時間枠を「週単位」に設定し、期間も2015年からにして「データをダウンロードする」を押すと月足OHLCのCSVがダウンロードできます

CSVをapexchartsに適合する形式に変換する

ダウンロードしたCSVはこんな風になってます

▼ ただしカラム名は任意で修正した

残念ながらApexCharts.jsにはCSVからチャート生成するメソッドなどはありません。CSVを配列に変換する必要があります

ここでは次のツールを使いました

ひとまず次のJSON形式に変換してください

▼ JSONに変換されたデータ例

これでPHLCデータの用意ができました

OHLCデータからローソク足チャート描画

いわゆるcandlestickタイプのチャートです

まず描画用のdiv要素を作ります

▼ 何の説明もいらないはず

そしたら先ほどのJSONをApexCharts用に変換します

▼ まずこのようなコードを書いた

OHLCからローソク足チャートを描画したい場合、キーxにDateオブジェクト・yキーにOHLCを配列化したものを渡したオブジェクト配列を作る必要があります

このように書くと複雑で手間のかかる作業に感じます。でも難しいのは既存データをApexChartsに適合するデータ形式に変換するまでです

そしたら実際にローソク足を描画

▼ 続けて次のコードを書いた

上記コードではキーseries内のキーdataに対してOHLCの配列を渡してます。あとチャートタイプを 'candlestick' にするのも忘れずに

▼ 完成したチャートがこちら

▼ もちろん拡大縮小もできる

データを渡すだけでキレイに描画してくれます

以上、Apexchart.jsでのチャート生成でした。ではまた

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください