はじめに

apertureless/vue-chartjs でチャートの高さ(や幅、サイズ)を変更する方法

TL;DR

  • チャート要素に width や height を設定
  • 親要素の width や height を vw, vh で指定する方法もある
  • ウィンドウのリサイズなども考え出すと割と茨の道っぽい
    • ベストプラクティスが見つかってない(自分的には)
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 設定方法
    2. 実装例1
    3. 実装例2
  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

詳細

設定方法

参考: Props - Coding Reference | 📈 vue-chartjs

チャートの細かいカスタマイズは、基本的には Chart.js 本家のドキュメント を参照することになる。が、vue-chartjs でのチャートサイズの変更に関しては vue-chartjs 側のドキュメント に書かれている。(気付かずにめちゃくちゃ本家側のドキュメントを探し回った)

やること自体は単純で width や height を指定するだけで良い。

実装例1

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

width, height をウィンドウサイズ(幅, 高さ)の半分(1/2)として設定する例。
options.responsive を false にしないと、幅いっぱいに描画される(width, height が効かない)ので注意。

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
<template>
  <div>
    <MyLineChart
      :chart-data="datacollection"
      :options="options"
      :height="height"
      :width="width"
    />
  </div>
</template>

<script>
import MyLineChart from './MyLineChart.js';

export default {
  components: {
    MyLineChart,
  },
  data() {
    return {
      datacollection: {},
      options: {
        responsive: false,
      },
      height: window.innerHeight / 2,
      width: window.innerWidth / 2,
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: [1, 2, 3],
        datasets: [
          {
            data: [1, 4, 9],
          },
        ],
      };
    },
  },
};
</script>

実装例2

参考: Vue-chartjs is rendering my responsive chart too tall for my window - Stack Overflow

前の例だと options.responsive を false にして、width, height を設定したので、ウィンドウサイズが変わってもチャートサイズが変わらない。

できれば vw や vw を使って、親要素の width や height を設定する。かつ、縦横 1:1 のチャートだと不都合がある場合には、チャートそのもののサイズを指定(変更)するなどの方が良さそう。

options.responsive を false にする代わりに、options.maintainAspectRatio を false にしている。

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
<template>
  <div class="chart-wrapper">
    <MyLineChart
      :chart-data="datacollection"
      :options="options"
      :height="height"
      :width="width"
    />
  </div>
</template>

<script>
import MyLineChart from './MyLineChart.js';

export default {
  components: {
    MyLineChart,
  },
  data() {
    return {
      datacollection: {},
      options: {
        maintainAspectRatio: false,
      },
      height: window.innerHeight / 4,
      width: window.innerWidth / 4,
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: [1, 2, 3],
        datasets: [
          {
            data: [1, 4, 9],
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
.chart-wrapper {
  width: 50vw;
  height: 50vh;
}
</style>

まとめ

  • チャート要素に width や height を設定
  • 親要素の width や height を vw, vh で指定する方法もある
  • ウィンドウのリサイズなども考え出すと割と茨の道っぽい
    • ベストプラクティスが見つかってない(自分的には)

参考文献

関連記事

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