はじめに

Chart.js(vue-chartjs) で X軸, Y軸の値をカスタマイズする方法。

TL;DR

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

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ 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 chart.js vue-chartjs
├── chart.js@2.9.3
├── vue@2.6.11
└── vue-chartjs@3.5.1

詳細

参考: Creating Custom Tick Formats

options.scales.xAxes[n].ticks.callback(options.scales.yAxes[n].ticks.callback) で設定する。

MyLineChart.js

1
2
3
4
5
6
7
8
9
10
11
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

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

MyLineChart.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
  <div>
    <MyLineChart :chart-data="datacollection" :options="options" />
  </div>
</template>

<script>
import MyLineChart from '@/components/MyLineChart.js';
import * as moment from 'moment';

export default {
  components: {
    MyLineChart,
  },
  data() {
    return {
      datacollection: {},
      options: {
        scales: {
          xAxes: [
            {
              ticks: {
                autoSkip: true,
                maxRotation: 0,
                callback: (value, index, values) => {
                  return moment(values[index]).format('  MM/DD  ');
                },
              },
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: this.generateLabels(),
        datasets: [
          {
            data: this.generateData(),
          },
        ],
      };
    },
    generateLabels() {
      const current = moment('2020-01-01');
      const end = moment('2020-01-31');
      let labels = [];
      while (current < end) {
        labels.push(current.unix() * 1000);
        current.add(1, 'day');
      }
      return labels;
    },
    generateData() {
      const current = moment('2020-01-01');
      const end = moment('2020-01-31');
      let data = [];
      let v = 1000;
      const d = () => Math.random() * 100;
      while (current < end) {
        v = v + d() - 50;
        data.push(v);
        current.add(1, 'day');
      }
      return data;
    },
  },
};
</script>

表示イメージ

ちなみに maxRotation, callback を指定しないと以下のような表示になる。

まとめ

参考文献

関連記事

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