daikiojm’s diary

ブログを書くときがやってきたどん！

bitbankのCandlestick APIを使ってAngularでチャートを描画する

Angular TypeScript JavaScript 仮想通貨

多くの仮想通貨取引所では、APIトレーダー向けに取引のための注文APIや価格情報を取得するためのAPIが公開されている。
今回は、bitbankのpublic APIのうちcandlestickを使ってAngularと ngx-chartsを使ってチャートを描画してみたので、ポイントとサンプルコードを記録しておく。

f:id:daikiojm:20180929225952p:plain

Candlestickについて

f:id:daikiojm:20180929225821p:plain

今回使用するcandlestick APIは、ろうそく足チャートを描画するのに必要な情報を取得できるAPIで、以下の情報が含まれる。

  • 期間開始時の価格
  • 期間内の最高値
  • 期間内の最安値
  • 期間終了時の価格
  • 期間内の出来高合計

OHLCVデータ

CandlestickデータはOHLCVというフォーマット(フォーマットというより並び順)で配信されていて、それぞれは以下の情報とマッピングすることができる。
実際にはOHLCV + 期間を示すタイムスタンプが配信されている。
ちなみに、OHLVまでを 四本値 と呼んだりもするらしい。

  • open(O) :期間開始時の価格
  • high(H) :期間内の最高値
  • low(L) :期間内の最安値
  • close(C) :期間終了時の価格
  • volume(V) :期間内の出来高合計
  • ※timestamp :UnixTime

参考: https://docs.bitbank.cc/#!/Candlestick/candlestick

OHLCVとngx-chartsのseriesとのマッピング

今回作ったサンプルでは、ロウソクやヒゲは描画せず、単純なlineチャートとして表現したいので、OHLCVから必要な価格情報とtimestampのみを使用して、ngx-chartsのseriesの形にマッピングする。
といっても、以下のようなTypeScriptのインターフェースを定義して、RxJSのmapオペレータの中で単純なマップをするだけ。

// ngx-chartsに渡すデータのtype (nameがx,valueがy軸に対応する)
export interface Series {
  name: number;
  value: number;
}

次のようなマッピング用のメソッドを用意して、cnaclestickの6番目の要素とのtimestampと1番目の要素の開始時の価格でlineチャートを描画する情報を作っていく。

private mapSeries(candleStick: CandleStick): Series[] {
  return candleStick.ohlcv.map((data) => ({
    name: data[5],
    value: +data[0],
  }));
}

実際にはRxJsのmapオペレータの中で上記のマッピング用のメソッドを呼び出す。

  private fetchCandlestick(
    pair: string,
    unit: string,
    period: string
  ): Observable<Series[]> {
    const url = this.getCnadlestickUrl(pair, unit, period);
    return this.http.get<BbApiResponse<BbCandleStickResponse>>(url).pipe(
      map((data) => data.data.candlestick[0]),
      map((candlestick) => this.mapSeries(candlestick))
    );
  }

完成したもの

リポジトリはこれ
daikiojm/angular-bitbank-public-chart -GitHub

StackBlitzで動いてるやつ
daikiojm/angular-bitbank-public-chart -StackBlitz

通過ペアと期間を指定して、現在から1日前、1週間前、1ヶ月前、1年前それぞれの価格lineチャートが取得できるようになっている。
かなりざっくりな実装だが、価格推移の雰囲気を表現するのには十分じゃないかと思う。
各取引所でこういったpublicデータを配信するAPIがが公開されているので、リアルタイムデータと合わせてまとめサイトみたいなのを作ってみても面白そう。

参考