Vue3组合式API中如何仅为单个图表注册datalabels插件？

要实现仅当前组件使用datalabels插件，核心是不要全局注册该插件，而是通过组件的options配置单独传入插件实例，具体步骤如下：

1. 移除全局注册的datalabels插件 #

首先修改全局注册代码，只保留Chart.js的核心组件和通用插件，不要包含ChartJSPluginDatalabels：

<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'

// 仅注册通用组件，不全局注册datalabels
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
</script>

2. 在组件options中单独配置插件 #

将ChartJSPluginDatalabels实例直接传入当前组件的options的plugins字段中，这样只会对当前图表生效：

方式一：仅启用插件 #

如果不需要额外配置，直接把插件实例放入plugins数组即可：

const options = {
  plugins: [ChartJSPluginDatalabels]
}

方式二：带插件配置启用 #

如果需要设置datalabels的样式、对齐方式等全局选项，可以这样写：

const options = {
  plugins: {
    chartjsPluginDatalabels: {
      align: 'end',
      color: '#36A2EB',
      font: {
        weight: 'bold'
      }
    }
  }
}

3. （可选）针对特定数据集启用/配置datalabels #

如果只想给部分数据集显示标签，可以在数据集的配置中单独设置：

const data = {
  labels: ['A', 'B','C'],
  datasets: [
    {
      data: data1,
      label: 'Data 1',
      // 给该数据集启用并自定义datalabels
      plugins: {
        datalabels: {
          enabled: true,
          color: '#FF6384'
        }
      }
    },
    {
      data: data2,
      label: "Data 2",
      // 该数据集禁用datalabels
      plugins: {
        datalabels: {
          enabled: false
        }
      }
    }
  ]
}

为什么之前的尝试无效？ #

• 将插件放入data的plugins字段：Chart.js的data对象中不存在用于注册插件的plugins属性，插件必须在options中配置。
• 使用plugins:[ChartJS.register(ChartJSPluginDatalabels)]：ChartJS.register()是全局注册方法，执行后会给所有Chart实例添加插件，因此会影响全局图表，正确的做法是直接传入插件实例而非调用register方法。

最后，组件的template保持不变即可：

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

内容的提问来源于stack exchange，提问作者Yolo_chicken