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