vue3-charts with TypeScript – Pie Chart 編

template の以下の箇所で TS2399 が発生しています。

            <Chart direction="circular" :size="{ width, height: 400 }" :data="data" :margin="{
                left: Math.round((width - 360) / 2),
                top: 20,
                right: 0,
                bottom: 20
            }" :axis="axis" :config="{ controlHover: false }">

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

Property 'axis' 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)

このエラーは、defineComponentにaxis変数が定義されていないため発生します。対処として、axisの定義を追加しましょう。

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

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

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

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

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

重要な点は、primaryとsecondaryをhide: trueで設定していることです。 ChartAxis 型はすべての グラフ 共通のものですので、 X軸、Y軸を持たない 円グラフ では非表示にする使い方になります。

なお、 hide: true としていても type: 'band' としなければならなく、 domain にも 何かしら設定を記載する必要がある点に注意してください。

    setup() {
        const data = ref(plByMonth)
        const axis: Ref<ChartAxis> = ref({
            // Even though the axis is hidden, the 'domain' and 'type' properties are mandatory.
            // Also, need to be set as 'band' type
            primary: {
                hide: true,
                domain: ['dataMin', 'dataMax'],
                type: 'band'
            },
            secondary: {
                hide: true,
                domain: ['dataMin', 'dataMax'],
                type: 'band'
            }
        })

        return { data, axis }
    }

あとは、細かい点ですが、 Component 名称を PieChart に変更しておきます。

export default defineComponent({
    name: 'PieChart',

以下のように innerRadius, padAngle を ともに 0 にします。

<template #layers>
    <Pie :dataKeys="['name', 'pl']" :pie-style="{ innerRadius: 0, padAngle: 0.00 }" />
</template>

以下のように innerRadius を 150 に, padAngle を 0.02 にします。

<template #layers>
    <Pie :dataKeys="['name', 'pl']" :pie-style="{ innerRadius: 150, padAngle: 0.02 }" />
</template>

colors: ['#4daf4a', '#377eb8', '#ff7f00', '#984ea3', '#e41a1c']

今回は、データが7つありますので、以下の7色を設定してみます。

red, orange, brown, green, blue, purple, pink

<template #layers>
    <Pie :dataKeys="['name', 'pl']" 
            :pie-style="{ 
            innerRadius: 100, 
            padAngle: 0.02,
            colors: ['red', 'orange', 'brown', 'green', 'blue', 'purple', 'pink']
        }" />
</template>

先ほど作成した 円グラフ の プロパティ に cornerRadius を追加します。

<template #layers>
    <Pie :dataKeys="['name', 'pl']" 
        :pie-style="{
            innerRadius: 100,
            padAngle: 0.02,
            cornerRadius: 10,
            colors: ['red', 'orange', 'brown', 'green', 'blue', 'purple', 'pink']
        }" />
</template>

以下のように Pie コンポーネント を追加します。 colors プロパティ も見分けがしやすいように 異なる順番のものにしています。 innerRadius, outerRadius の値を調整することで、 円グラフ の大きさを調整しています。

            <template #layers>
                <Pie :dataKeys="['name', 'avg']" 
                    :pie-style="{
                        innerRadius: 0,
                        outerRadius: 90,
                        padAngle: 0.00,
                        colors: ['orange', 'blue', 'pink', 'brown', 'purple', 'green', 'red']
                    }" />
                <Pie :dataKeys="['name', 'pl']" 
                    :pie-style="{
                        innerRadius: 110,
                        outerRadius: 200,
                        padAngle: 0.00,
                        colors: ['red', 'orange', 'brown', 'green', 'blue', 'purple', 'pink']
                    }" />
            </template>

なお、データ系列を追加したため、 Tooltip も以下のように更新しておきます。

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