vue-chartjs 仅将插件注册到一个图表组件

Question

我有一个图表作为自己的 Vue 组件（Vue 3 并使用组合 API），我想仅将

datalabels

插件添加到此图表中。

如果我在图表之外注册插件

data

或

options

应用程序中的所有图表都有标签：

<script setup>

import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale,
} from 'chart.js'
import ChartJSPluginDatalabels from 'chartjs-plugin-datalabels'
import { Bar } from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend,ChartJSPluginDatalabels)

</script>

我尝试将插件添加到

data

中，但没有任何反应：

const data = {
    plugins:[ChartJSPluginDatalabels],
    labels: ['A', 'B','C'],
    datasets: [
        {
            data: data1,
            label: 'Data 1'
        },
        {
            data: data2,
            label: "Data 2"
        }
    ]
}

我也尝试添加到选项中。如果我改为使用

plugins:[ChartJS.register(ChartJSPluginDatalabels)]

，这也会将其应用于应用程序中的所有图表。

组件的

template

很简单：

<template>
    <Bar :data="data" :options="options" />
</template>

Answer 1

对于像我这样从谷歌来到这里的其他人......

仅在脚本部分保留导入

<script setup>
import ChartJSPluginDatalabels from 'chartjs-plugin-datalabels'
...

将插件添加到所需的组件中：

<Bar :data="data" :options="options" :plugins="[ChartJSPluginDatalabels]" />