はじめに

Vue でローソク足(OHLC)チャートをプロットする方法。

TL;DR

  • npm i chart.js vue-chartjs vue-chartjsfinancial でインストール
  • JS ファイルと Vue ファイルに分けて実装するのが良い
    • リアクティブにグラフを更新できる (癖があるので注意)
  • 全部 from 'vue-chartjs-financial' で import するのが安全そう
  • 細かい設定は chart.js 本家のドキュメントを参照
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. プロット方法
      1. サンプル実装
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls vue
vue@2.6.12 | MIT | deps: none | versions: 301

$ npm ls chart.js
chart.js@2.9.3 | MIT | deps: 2 | versions: 38

$ npm ls vue-chartjs
vue-chartjs@3.5.1 | MIT | deps: 1 | versions: 77

$ npm ls vue-chartjs-financial
vue-chartjs-financial@1.0.1 | ISC | deps: 1 | versions: 2

詳細

以下のライブラリを使用する。

上記の通り、vue-chartjs, vue-chartjs-financial は Vue 用の Wrapper なので、チャートそのものの細かい設定方法などは chartjs 本家の方のドキュメントを参照。

セットアップ

npm i でインストール

1
$ npm i chart.js vue-chartjs vue-chartjsfinancial

プロット方法

参考:

Vue での実装例は vue-chartjs-financial/Candlestick.vue at master · ehajri/vue-chartjs-financial を見るのが分かりやすい。

xxxx.vue の mounted で renderChart としても描画はできる(ドキュメント Vue Single File Components にも最初の例はそう書かれている)が、Reactive にしたい(データセットの変更に合わせてグラフを 再描画/更新 したい)場合は Updating Charts に書かれているように JS ファイルと Vue ファイルとを分けるのが良い。

なお、グラフ更新には癖があるので注意が必要。

OHLC, Candlestick を使いたい場合は vue-chartjs-financial から import する必要があるので注意。
vue-chartjs-financial を使うプロジェクトの場合は全て from 'vue-chartjs-financial' とするのが安全そう。

1
2
3
4
5
6
7
8
9
// ↓ は OK
import { Candlestick } from 'vue-chartjs-financial';

// ↓ は NG
// import { Candlestick } from 'vue-chartjs';

// Line など vue-chartjs から import できるものは vue-chartjs-financial からも import できるため、
// vue-chartjs-financial を使うプロジェクトは全て `from 'vue-chartjs-financial'` にした方が安全そう
import { Line } from 'vue-chartjs-financial';

なお datasets.data に渡すデータは { o, h, l, c, t } の Object の配列、t は Timestamp[msec]。

サンプル実装

以下は 2020/01/01〜2020/01/10 までの10日分のランダムな OHLC チャートをプロットするサンプル。

components/Candlestick.js

1
2
3
4
5
6
7
8
9
10
11
12
// https://github.com/ehajri/vue-chartjs-financial/blob/master/src/components/Candlestick.js
import { Candlestick, mixins } from 'vue-chartjs-financial';
const { reactiveProp } = mixins;

export default {
  extends: Candlestick,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

components/CandlestickChart.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- https://github.com/ehajri/vue-chartjs-financial/blob/master/src/views/Candlestick.vue -->
<template>
  <div class="small">
    <Candlestick :chart-data="datacollection" :options="options" />
  </div>
</template>

<script>
import Candlestick from '@/components/Candlestick.js';
export default {
  components: {
    Candlestick,
  },
  data() {
    return {
      datacollection: {},
      options: {},
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      this.datacollection = {
        datasets: [
          {
            label: 'OHLC',
            data: this.generateRandomData(),
          },
        ],
      };
    },
    generateRandomData(initial = 1000, count = 10, changeRange = 100) {
      let o = initial, h, l, c, t = new Date('2020-01-01').getTime();
      return [...Array(count)].map((_, i) => {
        o = c || o;
        h = o + (this.randomChange(changeRange) / 2);
        l = o - (this.randomChange(changeRange) / 2);
        c = o + (this.randomChange(changeRange) - (changeRange / 2));
        t += (24 * 60 * 60 * 1000);
        return {
          o, h, l, c, t,
        };
      });
    },
    randomChange(range = 100) {
      return Math.random() * range;
    },
  },
};
</script>

まとめ

  • npm i chart.js vue-chartjs vue-chartjsfinancial でインストール
  • JS ファイルと Vue ファイルに分けて実装するのが良い
    • リアクティブにグラフを更新できる (癖があるので注意)
  • 全部 from 'vue-chartjs-financial' で import するのが安全そう
  • 細かい設定は chart.js 本家のドキュメントを参照

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list