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

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

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

Apexchart.js

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

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

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

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

このページの目次

まずApexchart.jsをCDNなどから読み込みする
ビットコインの過去5年のOHLCデータを拝借
CSVをapexchartsに適合する形式に変換する
OHLCデータからローソク足チャート描画

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

ApexChartの公式サイトはこちら

▼ APEXCHARTS.JS

ApexCharts.js

ApexCharts.js - Open Source JavaScript Charts for your website

https://apexcharts.com

ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

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

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

<script src="apexcharts.min.js"></script>
<link rel="stylesheet" href="apexcharts.css" />

1 2	<script src="apexcharts.min.js"></script> <link rel="stylesheet" href="apexcharts.css" />

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

https://cdnjs.com/libraries/apexcharts

最新バージョンは3.33.1

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

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

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

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

※ OHLC = Open, High, Low, Close

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

▼ BTC JPY bitFlyer過去データ

Investing.com 日本

Bitcoin - ビットコイン過去データ - Investing.com

https://jp.investing.com/crypto/bitcoin/historical-data

Bitcoin - ビットコイン価格の過去の価格データ。Bitcoin - ビットコイン価格履歴は日・週・月ごとに見ることができます。ダウンロードも可能です。分析・予想にご活用ください。

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

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

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

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

date,close,open,high,low,volume
2022/02/13/,44023.7,42205.5,44722.6,41591.3,134.69K
2022/02/06/,42205.2,41411.9,45755.2,41176.3,473.29K
2022/01/30/,41412.1,38167.5,41899.8,36297.3,451.36K
2022/01/23/,38170.8,35072.9,38862.6,32985.6,630.11K
2022/01/16/,35075.2,43079.2,43487.1,34116,541.76K

date,close,open,high,low,volume

2022/02/13/,44023.7,42205.5,44722.6,41591.3,134.69K

2022/02/06/,42205.2,41411.9,45755.2,41176.3,473.29K

2022/01/30/,41412.1,38167.5,41899.8,36297.3,451.36K

2022/01/23/,38170.8,35072.9,38862.6,32985.6,630.11K

2022/01/16/,35075.2,43079.2,43487.1,34116,541.76K

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

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

csvjson.com

CSV to JSON - CSVJSON

https://csvjson.com/csv2json

Online tool for converting CSV to JSON. Convert Excel to JSON. Transpose data. Output array or hash.

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

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

[{"date":"2022/02/13/","close":44023.7,"open":42205.5,"high":44722.6,"low":41591.3,"volume":"134.69K"},{"date":"2022/02/06/","close":42205.2,"open":41411.9,"high":45755.2,"low":41176.3,"volume":"473.29K"},{"date":"2022/01/30/","close":41412.1,"open":38167.5,"high":41899.8,"low":36297.3,"volume":"451.36K"},{"date":"2022/01/23/","close":38170.8,"open":35072.9,"high":38862.6,"low":32985.6,"volume":"630.11K"},{"date":"2022/01/16/","close":35075.2,"open":43079.2,"high":43487.1,"low":34116,"volume":"541.76K"},...

[{"date":"2022/02/13/","close":44023.7,"open":42205.5,"high":44722.6,"low":41591.3,"volume":"134.69K"},{"date":"2022/02/06/","close":42205.2,"open":41411.9,"high":45755.2,"low":41176.3,"volume":"473.29K"},{"date":"2022/01/30/","close":41412.1,"open":38167.5,"high":41899.8,"low":36297.3,"volume":"451.36K"},{"date":"2022/01/23/","close":38170.8,"open":35072.9,"high":38862.6,"low":32985.6,"volume":"630.11K"},{"date":"2022/01/16/","close":35075.2,"open":43079.2,"high":43487.1,"low":34116,"volume":"541.76K"},...

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

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

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

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

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

<div id="chart"></div>

1	<div id="chart"></div>

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

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

/// 先ほどのJSONをそのまま張り付ける
const rawOhlcList = [{"date":"2022/02/13/","close":44023.7,"open":42205.5,"high":44722.6,"low":41591.3,"volume":"134.69K"},{"date":"2022/02/06/","close":42205.2,"open":41411.9,"high":45755.2,"low":41176.3,"volume":"473.29K"}, ... 

/// ApexChartsに適合する配列に変換
const ohlcList = []
for(let i=0; i<rawOhlcList.length; ++i){
  const rawOhlc = rawOhlcList[i]
  ohlcList.unshift({
    x: new Date(rawOhlc['date']),
    y: [
      rawOhlc['open'],
      rawOhlc['high'],
      rawOhlc['low'],
      rawOhlc['close']
    ]
  })
}

/// 先ほどのJSONをそのまま張り付ける

const rawOhlcList = [{"date":"2022/02/13/","close":44023.7,"open":42205.5,"high":44722.6,"low":41591.3,"volume":"134.69K"},{"date":"2022/02/06/","close":42205.2,"open":41411.9,"high":45755.2,"low":41176.3,"volume":"473.29K"}, ...

/// ApexChartsに適合する配列に変換

const ohlcList = []

for(let i=0; i<rawOhlcList.length; ++i){

const rawOhlc = rawOhlcList[i]

ohlcList.unshift({

x: new Date(rawOhlc['date']),

y: [

rawOhlc['open'],

rawOhlc['high'],

rawOhlc['low'],

rawOhlc['close']

]

})

}

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

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

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

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

const options = {
  series: [{
    data: ohlcList
  }],
  chart: {
    type: 'candlestick',
    height: 350
  },
  title: {
    text: 'BTC/JPY 月足チャート',
    align: 'left'
  },
  xaxis: {
    type: 'datetime'
  },
  yaxis: {
    tooltip: {
      enabled: true
    }
  }
}

const chart = new ApexCharts(
  document.querySelector("#chart"), options
)
chart.render()

const options = {

series: [{

data: ohlcList

}],

chart: {

type: 'candlestick',

height: 350

title: {

text: 'BTC/JPY 月足チャート',

align: 'left'

xaxis: {

type: 'datetime'

yaxis: {

tooltip: {

enabled: true

}

const chart = new ApexCharts(

document.querySelector("#chart"), options

)

chart.render()

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

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

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

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

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

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

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

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

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

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

関連記事

プロフィール

人気記事

検索してみる