如何使用 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 function 完美运行。