Vue3 と TypeScript で魅力的な棒グラフを作成する方法 | vue3-charts 実践ガイド

This entry is part 1 of 7 in the series Vue3 / vue3-charts with TypeScript

本記事では Vue.js v3とTypeScriptを使用して、インタラクティブで美しい折れ線グラフを作成する方法を紹介します。vue3-charts ライブラリを活用し、TypeScript を有効にした Vue3 プロジェクトにおいて、簡単にグラフを追加する方法をステップバイステップで説明します。実装にあたり必要となるエラーハンドリングからスタイリング、インタラクティブな要素の追加まで、実践的なアプローチを通じて Vue3 でのグラフ作成を実現していこうと思います。

本記事では棒グラフ(Bar Chart) に関するコンポーネント部分についてのみ説明するため、前提となるプロジェクトの概要については、以下の記事を参考にしてください。

GitHub - harubears/vue3-charts-ts-example: Example code by using "vue3-charts" along with TypeScript

Example code by using "vue3-charts" along with TypeScript - harubears/vue3-charts-ts-example

棒グラフコンポーネント作成

[ads]

棒グラフ (Bar Chart) を components/BarChart.vue に実装していきます。ベースとなるコードは公式サイトで提供されていますので、それを活用していきます。

Vue3Charts - Data visualization in Vue3 made easy

<scirpt>, <template> の順番だけ、Vue3 with TypeScript のお作法に従って修正したコンポーネントは以下の通りです。

BarChart.vue

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'
import { plByMonth } from '@/data'

export default defineComponent({
    name: 'LineChart',
    components: { Chart, Grid, Line },
    setup() {
        const data = ref(plByMonth)
        const direction = ref('horizontal')
        const margin = ref({
            left: 0,
            top: 20,
            right: 20,
            bottom: 0
        })

        const axis = ref({
            primary: {
                type: 'band'
            },
            secondary: {
                domain: ['dataMin', 'dataMax + 100'],
                type: 'linear',
                ticks: 8
            }
        })

        return { data, direction, margin, axis }
    }
})
</script>

<template>
    <Chart :size="{ width: 500, height: 420 }" :data="data" :margin="margin" :direction="direction" :axis="axis">

        <template #layers>
            <Grid strokeDasharray="2,2" />
            <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
            <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
            <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#48cae4' }" />
            <Marker :value="1000" label="Avg." color="#e76f51" strokeWidth="2" strokeDasharray="6 6" />
        </template>

        <template #widgets>
            <Tooltip borderColor="#48CAE4" :config="{
                pl: { color: '#90e0ef' },
                avg: { color: '#0096c7' },
                inc: { color: '#48cae4' }
            }" />
        </template>

    </Chart>
</template>

但し、このままでは棒グラフを表示できません。次のセクション以降で、このベースとなるコードを修正して TypeScript 環境でも動作するようにしていきます。

BarChart.vue エラー対処

まず最初に対処していくのは正しく components を登録していくところです。公式のコードでは Line コンポーネントを登録していますが、ここでは Bar コンポーネントを登録する必要があります。

Bar component の登録

defineComponent 部分で components を登録しますが、 Bar ではなく Line を登録してしまっているので、ここを修正します。あわせて name も BarChart に修正しておきます。

BarChart.vue

import { Chart, Grid, Bar } from 'vue3-charts'

export default defineComponent({
    name: 'BarChart',
    components: { Chart, Grid, Bar },

error TS2322 対応

続いて対処するのは TS2322 という TypeScript のエラーになります。エラーの概要は「型がきちんと一致していない値を代入しようとしている」というような内容です。

いくつかの箇所でこのエラーが出力されます。例えば以下のようなところです。 Chart コンポーネントのプロパティ :direction への設定部分で問題が発生しています。

BarChart.vue

<template>
    <Chart :size="{ width: 500, height: 420 }" :data="data" :margin="margin" :direction="direction" :axis="axis">

LineChart.vue でも同様のエラーが発生していましたので、この BarChart.vue でも同様に対処していきます。、Chart コンポーネントの direction プロパティに正しく値を設定するために Ref を用いて Direction 型として設定することでこのエラーに対処していきます。
詳細は、LineChart.vue 作成記事を参照してください。

なお、 direction 以外に axis でも同様の TS2322 エラーが出ていますので ChartAxis 型を用いて値を設定するように修正していきます。

BarChart.vue

必要な import を追加します。

import { defineComponent, ref, Ref } from 'vue'
import { Chart, Grid, Bar } from 'vue3-charts'
import { Direction, ChartAxis } from 'vue3-charts/src/types'

direction の型を Direction にします。

    setup() {
        const data = ref(plByMonth)
        const direction: Ref<Direction> = ref('horizontal')

axis の型を ChartAxis にします。

        const axis: Ref<ChartAxis> = ref({

ChartAxis 型に必要な情報の補完

次に axis に設定する値について修正していきます。 LineChart.vue でも同様の問題が発生していたので、同様に修正していきます。具体的には primary の domain に値を設定していきます。

BarChart.vue

        const axis: Ref<ChartAxis> = ref({
            primary: {
                domain: ['dataMin', 'dataMax + 100'],
                type: 'band'    // show the every value of the data
            },
            secondary: {
                domain: ['dataMin', 'dataMax + 100'],
                type: 'linear',
                ticks: 8
            }
        })

ここまででプロジェクトのビルドは成功し、以下のような棒グラフが表示されるようになります。画面上部の Bar Chart リンクを忘れずにクリックしてデフォルトの折れ線グラフから画面を切り替えてください。

次のセクションでは、この棒グラフにインタラクティブなツールチップや目安を表示することができるマーカーを追加していきます。

Tooltip, Marker サブコンポーネント追加

[ads]

vue3-charts には Tooltip, Marker というサブコンポーネントが備わっていて、これを用いることでさらにグラフの表現力が高まります。

コンポーネント	説明
`Tooltip`	データポイント上にマウスを合わせると、実際の値を表示することができる
`Marker`	グラフのデータとは別の系列で線を引くことができる

Sub component of vue3-charts

コンポーネントインポート

以下のように Tooltip, Marker をインポートしていきます。なお、 Marker コンポーネントは予約済みの名前とバッティングしてしまうため、 ChartMarker としてインポートしていきます。

BarChart.vue

Tooltip, Marker をインポートします。

import { defineComponent, ref, Ref } from 'vue'
import {
    Chart,
    Grid,
    Tooltip,
    Marker as ChartMarker,
    Bar
} from 'vue3-charts'
import { Direction, ChartAxis } from 'vue3-charts/src/types'

components に登録します。 ChartMarker という名称で登録している点に注意してください。

export default defineComponent({
    name: 'BarChart',
    components: { Chart, Grid, Tooltip, ChartMarker, Bar },

テンプレートに ChartMarker を追加します。既存のコードでは Marker という名称であったり、 strokeWidth に必要なセミコロンがないなどがありますので、注意してください。

        <template #layers>
            <Grid strokeDasharray="2,2" />
            <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
            <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
            <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#48cae4' }" />
            <ChartMarker :value="1000" label="Avg." color="#e76f51" :strokeWidth="2" strokeDasharray="6 6" />
        </template>

この状態でプロジェクトを実行すると、以下のように ChartMarker が赤点線が追加されていることがわかります。

また、グラフにマウスカーソルを合わせるとツールチップが表示されていることが確認できます。

バリエーションを試してみる

Bar コンポーネントの理解を深める意味で、少し色々なバリエーションを試してみます。

BarChart.vue

barStyle プロパティに opacity を追加して透明度を変更したり、 :gap, :max-width プロパティを追加して、棒グラフの幅を変更しています。また、データの系列を色分けし、他のグラフとの比較を容易にします。

        <template #layers>
            <Grid strokeDasharray="2,2" />
                <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#FF6347', opacity: 0.3 }" />
                <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#3CB371' }" :gap=10 :max-width=10 />
                <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#1E90FF' }" :gap=1 :max-width=30 />
                <ChartMarker :value="1200" label="Target" color="black" :strokeWidth="2" strokeDasharray="6 6" />
            </template>

        <template #widgets>
            <Tooltip borderColor="#48CAE4" :config="{
                pl: { color: '#FF6347' },
                avg: { color: '#3CB371' },
                inc: { color: '#1E90FF' }
            }" />
        </template>

:gap は各棒グラフ間の間隔を指定し、 :max-width は棒グラフの最大幅を指定します。この辺りは、バンドスケールなどやや複雑なロジックになっていますので、実際に色々と試してみるのがよいと思います。

上記修正後の棒グラフは以下のようになります。

最終的な BarChart.vue コンポーネントのコードは以下のようになっています。

BarChart.vue

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'
import {
    Chart,
    Grid,
    Tooltip,
    Marker as ChartMarker,
    Bar
} from 'vue3-charts'
import { Direction, ChartAxis } from 'vue3-charts/src/types'
import { plByMonth } from '@/data'

export default defineComponent({
    name: 'BarChart',
    components: { Chart, Grid, Tooltip, ChartMarker, Bar },
    setup() {
        const data = ref(plByMonth)
        const direction: Ref<Direction> = ref('horizontal')
        const margin = ref({
            left: 0,
            top: 20,
            right: 20,
            bottom: 0
        })

        const axis: Ref<ChartAxis> = ref({
            primary: {
                domain: ['dataMin', 'dataMax + 100'],
                type: 'band'    // show the every value of the data
            },
            secondary: {
                domain: ['dataMin', 'dataMax + 100'],
                type: 'linear',
                ticks: 8
            }
        })

        return { data, direction, margin, axis }
    }
})
</script>

<template>
    <Chart :size="{ width: 500, height: 420 }" :data="data" :margin="margin" :direction="direction" :axis="axis">

        <template #layers>
            <Grid strokeDasharray="2,2" />
                <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#FF6347', opacity: 0.3 }" />
                <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#3CB371' }" :gap=10 :max-width=10 />
                <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#1E90FF' }" :gap=1 :max-width=30 />
                <ChartMarker :value="1200" label="Target" color="black" :strokeWidth="2" strokeDasharray="6 6" />
            </template>

        <template #widgets>
            <Tooltip borderColor="#48CAE4" :config="{
                pl: { color: '#FF6347' },
                avg: { color: '#3CB371' },
                inc: { color: '#1E90FF' }
            }" />
        </template>

    </Chart>
</template>

まとめ

[ads]

Vue3 と TypeScript での棒グラフ作成における解説はここまでです。vue3-charts を用いた棒グラフの実装から、エラー対処、カスタマイズ、そしてインタラクティブな要素の追加まで、さまざまな技術を探求してきました。これらの知識を活用し、あなたのプロジェクトに魅力的なビジュアルを加えてみてください。

TypeScript に対応するために、 TS2322 への対処が必要

Tooltip, Marker コンポーネントを活用することでよりインタラクティブなグラフに

barStyle プロパティや gap, max-width プロパティを調整することで棒グラフの見た目を調整することが可能

Series Navigation