Vue.js v3 と TypeScript で始める面グラフ作成

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

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

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

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

[ads]

面グラフ (Area Chart) を components/AreaChart.vue に実装してきます。Area Chart に関しては公式からベースとなるコードが提供されていますので、これをベースに TypeScript で動作するようにしていきます。

Vue3Charts - Data visualization in Vue3 made easy

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

AreaChart.vue (From Official Doc)

<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" />
      <Area :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
      <Line
        :dataKeys="['name', 'pl']"
        type="monotone"
        :lineStyle="{
          stroke: '#9f7aea'
        }"
      />
      <Marker v-if="marker" :value="1000" label="Mean." color="green" strokeWidth="2" strokeDasharray="6 6" />
      <defs>
        <linearGradient id="grad" gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
          <stop offset="100%" stop-color="white" stop-opacity="0.4" />
        </linearGradient>
      </defs>
    </template>

    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          pl: { color: '#9f7aea' },
          avg: { hide: true },
          inc: { hide: true }
        }"
      />
    </template>

  </Chart>
</template>

ただし、この状態でいくつかエラーが出ています。次のセクションでは、まずこれらに対処していきます。

AreaChart.vue エラー対処

[ads]

Chart コンポーネントプロパティ (direction) 修正

以下の箇所で、 TS2322 エラーが発生しています。

AreaChart.vue

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

エラー内容は以下の通り

Type 'string' is not assignable to type 'Direction | undefined'.ts(2322)

LineChart.vue, BarChart.vue でも同様のエラーでしたので、AreaChart.vue でも同様の対処を実施していきます。

http://localhost:8010/ja/vue3-charts-with-typescript-linechart/#toc3

AreaChart.vue

Ref のインポートを追加します

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

Direction 型を vue3-charts ライブラリからインポートします

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

defineComponent の setup() で、 direction を Direction 型として設定します。

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

Chart コンポーネントプロパティ (axis) 修正

direction と同様に、 Chart コンポーネント設定部分で axis プロパティにもエラーが発生しています。

AreaChart.vue

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

エラー内容は以下のとおりです。

Type '{ primary: { type: string; }; secondary: { domain: string[]; type: string; ticks: number; }; }' is not assignable to type 'ChartAxis'.ts(2322)

axis プロパティのエラーも LineChart.vue と同じ内容ですので、同様に対処していきます。

AreaChart.vue

ChartAxis 型を vue3-charts ライブラリからインポートします

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

defineComponent の setup() で、 axis を ChartAxis 型として設定します。

        const axis: Ref<ChartAxis> = ref({

ChartAxis 型に必要な primary/domain プロパティを追加します。

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

Area コンポーネント追加

ベースのコードをよく見ると、 Area コンポーネントがインポートされていませんので、 Area コンポーネントを利用可能にしていきます。

AreaChart.vue

Area コンポーネントを vue3-charts からインポートします

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

defineComponent で、Area コンポーネントを登録します。また合わせて、 defineComponent の name を LineChart から AreaChart に変更しておきます。

export default defineComponent({
    name: 'AreaChart',
    components: { Chart, Grid, Line, Area },

Marker コンポーネント修正

Area Chart (面グラフ) 自体ではありませんが、ベースとなるコードには Marker サブコンポーネントが定義されています。ただし、以下のエラーが発生しているため、対応していきます。

AreaChart.vue

エラーが発生しているのは以下の箇所です。

            <Marker v-if="marker" :value="1000" label="Mean." color="green" strokeWidth="2" strokeDasharray="6 6" />

エラーの内容は以下のようなものです。

Property 'marker' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'.ts(2339)

ベースとなるコードをよく見ると、 <template> で定義している Marker コンポーネントがインポートされていませんので、 Area コンポーネント同様の対処をしていきます。

AreaChart.vue

Marker コンポーネントを vue3-charts からインポートします

import { Chart, Grid, Marker, Line, Area } from 'vue3-charts'

defineComponent で Marker コンポーネントを登録します。

export default defineComponent({
    name: 'AreaChart',
    components: { Chart, Grid, Marker, Line, Area },

Marker コンポーネントのプロパティで v-if="marker" を用いていますが、 marker という変数は使われていないので、削除します。また、strokeWidth 箇所で以下のエラーが発生しています。

Type 'string' is not assignable to type 'number'.ts(2322)

strokeWidth は値を数値として渡す必要があるため、 v-bind を用いて :strokeWidth="10" と記載することで数値を渡せるようになり、エラーを解消することができます。

<Marker :value="1000" label="Mean." color="green" :strokeWidth="2" strokeDasharray="6 6" />

Tooltip 対応

ベースとなるコードの <template> には Tooltip コンポーネントの記載がありますが、インポートされていないため表示されていません。以下の修正を加えて、 Tooltip が表示されるようにしていきます。

AreaChart.vue

Tooltip コンポーネントを vue3-charts からインポートします

import { Chart, Grid, Tooltip, Marker, Line, Area } from 'vue3-charts'

あわせて、 defineComponent の components に Tooltip を登録します。

export default defineComponent({
    name: 'AreaChart',
    components: { Chart, Grid, Tooltip, Marker, Line, Area },

ここまでの修正を終えた状態でプロジェクトを実行すると、以下のようなグラフが表示されるようになります。

データポイントにカーソルをあわせることで Tooltip が表示されます。

eslint エラー定義済み名称への対処 (Marker, Line, Area)

ここでは発生している eslint エラーに対処していきます。今回利用したコンポート名 Marker, Line, Area はプログラム今回のような小さなプロジェクトでは問題になることはありませんが、HTML 標準として規定されている名称のコンポーネントは使うべきではないため、as を用いて別名で利用することにします。

vue/no-reserved-component-names | eslint-plugin-vue

disallow the use of reserved names in component definitions

AreaChart.vue

以下の箇所で eslint エラーが発生しています。

export default defineComponent({
    name: 'AreaChart',
    components: { Chart, Grid, Marker, Line, Area },

エラーの内容は以下のとおりです。

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

同じエラーが Line, Area にも出ています。予約済みの名称と重複してしまっているため別名を用いることが推奨されています。それぞれ ChartMarker, LineChartComponent, AreaChartComponent という別名でインポートしていきます。

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

あわせて、 defineComponent も更新します。

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

テンプレートにも更新したコンポーネント名称を反映していきます。

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

        <template #layers>
            <Grid strokeDasharray="2,2" />
            <AreaChartComponent :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
            <LineChartComponent :dataKeys="['name', 'pl']" type="monotone" :lineStyle="{
                stroke: '#9f7aea'
            }" />
            <ChartMarker :value="1000" label="Mean." color="green" :strokeWidth="2" strokeDasharray="6 6" />
            <defs>
                <linearGradient id="grad" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
                    <stop offset="100%" stop-color="white" stop-opacity="0.4" />
                </linearGradient>
            </defs>
        </template>

        <template #widgets>
            <Tooltip borderColor="#48CAE4" :config="{
                pl: { color: '#9f7aea' },
                avg: { hide: true },
                inc: { hide: true }
            }" />
        </template>

    </Chart>
</template>

面グラフのカスタマイズ

[ads]

ここまでで、ベースとなるコードを使って面グラフが描画されるようになりました。このセクションでは、面グラフを少しカスタマイズしてみます。

純粋な面グラフだけ表示

ベースとなるコードは Area, Line が併用されている形ですが、 Area だけのシンプルな構成の見た目を確認してみます。ここでは LineChartComponent や ChartMarker を削除して純粋に面グラフだけを表示した状態からカスタマイズしていきます。

AreaChart.vue

            <AreaChartComponent :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />
            <!-- <LineChartComponent :dataKeys="['name', 'pl']" type="monotone" :lineStyle="{
                stroke: '#9f7aea'
            }" /> -->
            <!-- <ChartMarker :value="1000" label="Mean." color="green" :strokeWidth="2" strokeDasharray="6 6" /> -->

データポイントにカーソルを合わせるとツールチップが表示された純粋な面グラフが表示されていることがわかります。

以降のセクションでは Area コンポーネントのプロパティに注目して、いくつかのカスタマイズを実際に施していきます。

areaStyle プロパティ(面の塗りつぶし)

AreaChartComponent の areaStyle を設定することで面グラフの色合いなどを変更することができます。

AreaChart.vue

ベースとなるコードでは "{ fill: 'url(#grad)' }" という値が指定されています。

<AreaChartComponent :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />

この場合、以下の箇所で詳細な設定を指定することになります。

            <defs>
                <linearGradient id="grad" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="#FF6347" stop-opacity="1" />
                    <stop offset="100%" stop-color="white" stop-opacity="0.4" />
                </linearGradient>
            </defs>

単色塗りつぶし

まずは最もシンプルな形でみていきます。

AreaChart.vue

面グラフを赤で塗りつぶしてみます。

<AreaChartComponent :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'red' }" />

グラデーション

ベースとなるコードは最初から少し応用編といってもよいグラデーション塗りつぶしが実装されています。これを少しカスタマイズしてみます。

AreaChart.vue

仕組みとしては、 #grad という形で linearGardient を定義する形です。

<AreaChartComponent :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'url(#grad)' }" />

            <defs>
                <linearGradient id="grad" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="#be90ff" stop-opacity="1" />
                    <stop offset="100%" stop-color="white" stop-opacity="0.4" />
                </linearGradient>
            </defs>

`offset`
`stop-color`
`stop-opacity`

以降では、 linearGradient の値を変化させてカスタマイズさせていきます。

単色グラデーション

AreaChart.vue

同一色でグラデーションさせてみます。透明度 (stop-opacity) を変化させることで実現します。

            <defs>                
                <linearGradient id="grad" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="red" stop-opacity="1" />
                    <stop offset="100%" stop-color="red" stop-opacity="0.2" />
                </linearGradient>
            </defs>

月毎にグラデーションされるのではなく、全体のなかで大きな値が最も濃くなる点が特徴です。

2色グラデーション

AreaChart.vue

緑黄色、赤でグラデーションさせてみます。 stop offset ごとの stop-color を変えることで実現します。

            <defs>                
                <linearGradient id="grad" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="green" stop-opacity="1" />
                    <stop offset="100%" stop-color="red" stop-opacity="0.4" />
                </linearGradient>
            </defs>

今回のように、突出したデータがあるとグラデーションの効果が出にくいかもしれません。

3色グラデーション

AreaChart.vue

緑と赤とでグラデーションさせてみます。中間色として stop offset="50%" のデータを追加することで実現します。なお、わかりやすいように、透明度は全て 1 にしています。

            <defs>                
                <linearGradient id="grad" gradientTransform="rotate(90)">
                    <stop offset="0%" stop-color="green" stop-opacity="1" />
                    <stop offset="50%" stop-color="yellow" stop-opacity="1" />
                    <stop offset="100%" stop-color="red" stop-opacity="1" />
                </linearGradient>
            </defs>

今回のように、突出したデータがある場合は、2色より3色の方がメリハリが効きそうですね。

style プロパティ(面の形)

ここでは style プロパティを用いて面グラフの形をカスタマイズしていきます。単色塗りの面グラフを基にしていきます。なお、style を指定しない場合はデフォルトとして normal が採用されます。指定できるスタイルは以下の 4種類です。

`normal`

AreaChart.vue

以下のように type="normal" とすることで、monotone に比べ、緩やかなカーブを描く面グラフとなります。傾向を強調した形と言ってもいいかもしれません。

<AreaChartComponent :dataKeys="['name', 'pl']" type="normal" :areaStyle="{ fill: 'red' }" />

`monotone`

AreaChart.vue

以下のように type="monotone" とすることで、カーブを描いた面グラフとなります。公式

<AreaChartComponent :dataKeys="['name', 'pl']" type="monotone" :areaStyle="{ fill: 'red' }" />

`step`

AreaChart.vue

以下のように type="step" とすることで、階段状の面グラフとなります。

<AreaChartComponent :dataKeys="['name', 'pl']" type="step" :areaStyle="{ fill: 'red' }" />

`natural`

AreaChart.vue

以下のように type="natural" とすることで、monotone に比べ、緩やかなカーブを描く面グラフとなります。傾向を強調した形と言ってもいいかもしれません。

<AreaChartComponent :dataKeys="['name', 'pl']" type="natural" :areaStyle="{ fill: 'red' }" />

まとめ

[ads]

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

TS2322 に対処する

必要なコンポーネント Area, Tooltip, Marker を追加する

style, areaStyle プロパティを駆使してカスタマイズする

Series Navigation

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

AreaChart.vue エラー 対処

Chart コンポーネントプロパティ (direction) 修正

Chart コンポーネントプロパティ (axis) 修正

Area コンポーネント 追加

Marker コンポーネント 修正

Tooltip 対応

eslint エラー 定義済み名称 への 対処 (Marker, Line, Area)

面グラフ の カスタマイズ

純粋な 面グラフ だけ表示

areaStyle プロパティ(面の塗りつぶし)

単色塗りつぶし

グラデーション

単色 グラデーション

2色 グラデーション

3色 グラデーション

style プロパティ(面の形)

normal

monotone

step

natural

まとめ

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

AreaChart.vue エラー対処

Area コンポーネント追加

Marker コンポーネント修正

eslint エラー定義済み名称への対処 (Marker, Line, Area)

面グラフのカスタマイズ

純粋な面グラフだけ表示

単色グラデーション

2色グラデーション

3色グラデーション

`normal`

`monotone`

`step`

`natural`