如何使用 vue-chart.js 为特定图表使用 chartjs-plugin-datalabels

Question

我正在尝试将 chartjs-plugin-datalables 用于使用 vue-chartjs 的特定图表。因此，首先我从我的 main.js 文件中全局注销了该插件，因为它在导入时已在全局注册。

import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.defaults.global.plugins.datalabels.display = false;

然后我正在为特定图表添加插件。但是没有标签显示。

import { Pie } from "vue-chartjs";
import ChartDataLabels from "chartjs-plugin-datalabels";
export default {
    extends: Pie,
    methods: {
        intChart() {
            var _this = this;
            this.renderChart({
                ..........       
            });
        }
    },

    mounted() {
        this.addPlugin(ChartDataLabels);
        this.intChart();
    }
};

如果我禁用以下行，它适用于所有图表。

Chart.defaults.global.plugins.datalabels.display = false;

知道为什么它不适用于特定图表吗？

Answer 1

要全局禁用 chartjs-plugin-datalabels，我必须使用

Chart.plugins.unregister(ChartDataLabels);

而不是

Chart.defaults.global.plugins.datalabels.display = false;

在我的 main.js 文件中。然后 addPlugin 功能完美运行。