Vue.js v3とTypeScriptでインタラクティブなグラフを作成する方法

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

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

本記事では折れ線グラフ(Line 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]

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

Vue3Charts - Data visualization in Vue3 made easy

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

LineChart.vue (rev 1)

<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',
                format: (val: string) => {
                    if (val === 'Feb') {
                        return '😜'
                    }
                    return val
                }
            },
            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" />
            <Line :dataKeys="['name', 'pl']" />
            <Line :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
        </template>

        <template #widgets>
            <Tooltip borderColor="#48CAE4" :config="{
                name: { hide: true },
                pl: { color: '#0077b6' },
                avg: { label: 'averange', color: 'red' },
                inc: { hide: true }
            }" />
        </template>

    </Chart>
</template>

ただし、このコンポーネントを用いてプロジェクトを実行するといくつかのエラーが出力されてしまいます。

Error message

src/components/LineChart.vue:42:78 - error TS2322: Type 'string' is not assignable to type 'Direction | undefined'.

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

  node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:91:5
    91     direction: Direction;
           ~~~~~~~~~
    The expected type comes from property 'direction' which is declared here on type 'Partial<{ data: Data[]; margin: Margin; size: Size; direction: Direction; config: Partial<ChartConfig>; }> & Omit<{ readonly data: Data[]; ... 4 more ...; readonly axis?: ChartAxis | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, "data" | ... 3 more ... | "config"> & Record...'

src/components/LineChart.vue:42:101 - error TS2322: Type '{ primary: { type: string; format: (val: string) => string; }; secondary: { domain: string[]; type: string; ticks: number; }; }' is not assignable to type 'ChartAxis'.

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

  node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:79:5
    79     axis: {
           ~~~~
    The expected type comes from property 'axis' which is declared here on type 'Partial<{ data: Data[]; margin: Margin; size: Size; direction: Direction; config: Partial<ChartConfig>; }> & Omit<{ readonly data: Data[]; ... 4 more ...; readonly axis?: ChartAxis | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, "data" | ... 3 more ... | "config"> & Record...'

src/components/LineChart.vue:42:78 - error TS2322: Type 'string' is not assignable to type 'Direction | undefined'.

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

  node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:91:5
    91     direction: Direction;
           ~~~~~~~~~
    The expected type comes from property 'direction' which is declared here on type 'Partial<{ data: Data[]; margin: Margin; size: Size; direction: Direction; config: Partial<ChartConfig>; }> & Omit<{ readonly data: Data[]; ... 4 more ...; readonly axis?: ChartAxis | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, "data" | ... 3 more ... | "config"> & Record...'

src/components/LineChart.vue:42:101 - error TS2322: Type '{ primary: { type: string; format: (val: string) => string; }; secondary: { domain: string[]; type: string; ticks: number; }; }' is not assignable to type 'ChartAxis'.

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

  node_modules/vue3-charts/dist/components/Chart/index.vue.d.ts:79:5
    79     axis: {
           ~~~~
    The expected type comes from property 'axis' which is declared here on type 'Partial<{ data: Data[]; margin: Margin; size: Size; direction: Direction; config: Partial<ChartConfig>; }> & Omit<{ readonly data: Data[]; ... 4 more ...; readonly axis?: ChartAxis | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, "data" | ... 3 more ... | "config"> & Record...'


Found 4 errors.

ERROR: "type-check" exited with 2.

次のセクションでは、LineChart.vue で発生したこれらのエラーにどのように対処していくかを詳しく説明していきます。

LineChart.vue エラー対処

[ads]

まず対処していくのは TS2322 というエラーで、「型がきちんと一致していない値を代入しようとしている」というような内容です。

error TS2322 について

具体的なエラーの内容は例えば、以下のようなものです

console

src/components/LineChart.vue:42:78 - error TS2322: Type 'string' is not assignable to type 'Direction | undefined'.

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

このエラーを発生させているソースコードは LineChart.vue の以下の部分です。 Chart コンポーネントのプロパティ :direction への設定部分で問題が発生しています。

LineChart.vue

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

:direction プロパティに設定しようとしている direction 変数の型に問題があるということですので、direction 変数の内容を確認していきます。

LineChart.vue

export default defineComponent({
    name: 'LineChart',
    components: { Chart, Grid, Line },
    setup() {
        const data = ref(plByMonth)
        const direction = ref('horizontal')

これらの状況を整理すると以下のようになります

Item	型	設定値、定義
`direction` 変数	`String`	ref(‘horizontal’)
`:direction` プロパティ	`Direction`	`export type Direction = 'horizontal' \| 'vertical' \| 'circular'`

TS2322 状況確認

Chart コンポーネントの direction プロパティが Direction 形で定義されているにもかかわらず、LineChart.vue から設定している値は String 型になっているため不一致が発生してしまっています。

vue3-charts/src/types/index.ts

export type Direction = 'horizontal' | 'vertical' | 'circular'

error TS2322 への対処

エラーの原因が分かりましたので、この TS2322 に対処していきます。エラーメッセージの指示通りに string 型の 'horizontal' を以下のように Direction 型の ‘horizontal’ とすればよいです。

LineChart.vue

        const direction: Ref<Direction> = ref('horizontal')

なお、 axis 変数についても同様のエラーとなっていますので、同様に以下のように修正します。

        const axis: Ref<ChartAxis> = ref({
            primary: {

なお、合わせて以下のように Ref, Direction を import してください。

LineChart.vue

import type { Ref } from 'vue'

import type { Direction, ChartAxis } from 'vue3-charts/src/types'

`TS1484` について

既存の import に続けて以下のように記載せずに import type を用いるべき理由は以下を参照してください

import { defineComponent, ref, Ref } from 'vue'

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler fla...

さて、上記対処をしてプロジェクトを実行すると、また新たなエラーに直面します。

ChartAxis 型に必要な情報の補完

ここまでの対処で、エラーは確実に消えてきていますが、今度は axis 変数について、以下のエラーが出力されます。

terminal

Type 'Ref<{ primary: { type: "band"; format: (val: string) => string; }; secondary: { domain: [string, string]; type: "linear"; ticks: number; }; }>' is not assignable to type 'Ref<ChartAxis>'.
  Type '{ primary: { type: "band"; format: (val: string) => string; }; secondary: { domain: [string, string]; type: "linear"; ticks: number; }; }' is not assignable to type 'ChartAxis'.ts(2322)
index.ts(60, 3): 'domain' is declared here.

これも先ほどまでと基本的には同じ内容ですが、 ChartAxis 型に必要な primary/domain プロパティが未設定であることが原因です。ですので、以下のように axis 変数の primary の domain に値を設定していきます。

LineChart.vue

        const axis: Ref<ChartAxis> = ref({
            primary: {
                domain: ['dataMin', 'dataMax'],
                type: 'band',
                format: (val: string) => {
                    if (val === 'Feb') {
                        return '😜'
                    }
                    return val
                }
            },

ここまでで、プロジェクトのビルドは成功し、以下のような折れ線グラフが表示されていると思います。

ただし、 LineChart.vue コンポーネントにはもう少し改善点がありますので、それらに対処していきます。

eslint への対処

components 定義の部分で以下のようなワーニングが出力されていると思います。

LineChart.vue

Name "Line" is reserved.eslintvue/no-reserved-component-names

Line という名前は eslint としては予約済みのため、別の名前を用いるよう提案されていますので、別名を用いることで対処していきます。

Line コンポーネントをインポートしている以下の部分を as を用いて別名としてインポートします。合わせてコンポーネント定義部分も別名を用います。

LineChart.vue

import { Chart, Grid, Line as LineChartComponent } from 'vue3-charts'

export default defineComponent({
    name: 'LineChart',
    components: { Chart, Grid, LineChartComponent },

template 部分も忘れずにコンポーネント名を変更します

        <template #layers>
            <Grid strokeDasharray="2,2" />
            <LineChartComponent :dataKeys="['name', 'pl']" />
            <LineChartComponent :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
        </template>

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

[ads]

ここまででも問題なく折れ線グラフが表示されていますが、 vue3-charts にはさらに Tooltip, Marker というサブコンポーネントがありますので、これらを活用していきます。実際、現状のプロジェクト実行時には　以下のようにブラウザのコンソールログにワーニングが出力されています。

Browser

LineChart.vue:41 [Vue warn]: Failed to resolve component: Tooltip
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <LineChart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

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

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

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

LineChart.vue

import { 
    Chart, 
    Grid, 
    Tooltip, 
    Marker as ChartMarker,
    Line as LineChartComponent,
} from 'vue3-charts'

export default defineComponent({
    name: 'LineChart',
    components: { Chart, Grid, Tooltip, ChartMarker, LineChartComponent },

これで Tooltip, Marker を使う準備ができましたので、引き続きこれらのコンポーネントを設置していきます。

Marker サブコンポーネント設置

以下のように LineChartComponent と並列の関係で設置していきます。今回は 1200 の値に Target というラベルを付与した波線を表示してみます。

LineChart.vue

        <template #layers>
            <Grid strokeDasharray="2,2" />
            <LineChartComponent :dataKeys="['name', 'pl']" />
            <LineChartComponent :dataKeys="['name', 'avg']" :lineStyle="{ stroke: 'red' }" type="step" />
            <ChartMarker :value="1200" label="Target" color="black" :strokeWidth="2" strokeDasharray="6 6" />
        </template>

プロパティ	説明
`value`	線を引く値を指定
`label`	線に付与するラベル名称
`color`	線の色を指定
`strokeWidth`	線の幅を指定
`strokeDasharray`	線の波線の書式を指定。最初の値: 線の長さ二つ目の値: ギャップの長さ

properties of Marker component

実際に表示した状態は以下のようになります。

Tooltip コンポーネントの設置

続いて、 Tooltip コンポーネントを設置していきます。といっても、こちらに関しては公式のサンプルコードにすでに含まれているので、そのまま使っていきます。

LineChart.vue

        <template #widgets>
            <Tooltip borderColor="#48CAE4" :config="{
                name: { hide: true },
                pl: { color: '#0077b6' },
                avg: { label: 'averange', color: 'red' },
                inc: { hide: true }
            }" />
        </template>

Tooltip の場合、データソースについて、それぞれを設定していくことになります。

プロパティ	説明
`hide`	ツールチップに表示するしないを指定指定しない場合は `false` となり表示する
`color`	ツールチップ内の文字色を指定
`label`	ツールチップ内のラベル文字列を指定。指定しない場合はデータソースのものをそのまま表示

properties of Tooltip component

上記設定で設置した場合、以下のように表示されます。

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

さらに、データソースの全ての系列を折れ線グラフとして表示したり、他のグラフとの比較もしやすいようにデータソースの各系列ごとに色分けをしたり、折れ線グラフのスタイルのバリエーションを少し試してみます。

Data Legend	`LineStyle`	`color`	`type`
`pl`	`stroke`	red	normal(default)
`avg`	`stroke`	green	step
`inc`	`stroke`	blue	monotone

LIne Chart Pattern

バリエーションを試してみたグラフは以下のようになりました。なお step には他にも natural が利用可能です。

最終的な LineChart.vue のコードは以下のようになっています。

LineChart.vue

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

export default defineComponent({
    name: 'LineChart',
    components: { Chart, Grid, Tooltip, ChartMarker, LineChartComponent },
        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'],
                type: 'band',
                format: (val: string) => {
                    if (val === 'Feb') {
                        return '😜'
                    }
                    return val
                }
            },
            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>
                <!-- Generates a dashed line with 2-pixel dashes and 2-pixel gaps as a Grid -->
                <Grid strokeDasharray="2,2" />

                <LineChartComponent :dataKeys="['name', 'pl']"  :lineStyle="{ stroke: '#FF6347' }" />
                <LineChartComponent :dataKeys="['name', 'avg']" :lineStyle="{ stroke: '#3CB371' }" type="step" />
                <LineChartComponent :dataKeys="['name', 'inc']" :lineStyle="{ stroke: '#1E90FF' }" type="monotone" />
                <ChartMarker :value="1200" label="Target" color="black" :strokeWidth="2" strokeDasharray="6 6" />

            </template>

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

        </Chart>
</template>