vue.js - 无法使用 Vue-Chartjs(或任何其他插件)触发 beforeDraw

Question

我正在尝试将自定义文本添加到 Chartjs 图表(使用 vue-chartjs)，到目前为止我发现我需要通过 beforeDraw (或类似)插件来完成此操作。我将该插件包含在 options.plugins 中，但它没有被触发。

我做错了什么？这是代码

<script>
import {Scatter} from "vue-chartjs";

export default {
    extends: Scatter,
    props: {
        chartdata: {
        type: Object,
        default: null
        },
        options: {
        type: Object,
        default: null
        }
    },
    mounted () {
        this.renderChart(this.chartdata, {
                scales: {
                    xAxes: [{
                        ticks: {
                            max: 100,
                            min: -100
                        },
                        type: 'linear',
                    }],
                    yAxes: [{
                        display: true,
                        type: 'linear',
                        ticks: {
                            max: 100,
                            min: -100
                        }
                    }]
                },
                elements: {
                    point: {
                        pointStyle: 'circle',
                        radius: 16,
                        backgroundColor: "#dc005a"
                    }
                },
                layout: {
                    padding: {
                        left: 25,
                        right: 25,
                        top: 25,
                        bottom: 25
                    }
                },
                plugins: [{
                        id: "AddLegend",
                        beforeDraw(chart) {
                            console.log(chart)
                        },
                }],
        });
    }
}
</script>

Answer 1

插件可以选择通过 Chart.plugins.register 全局注册。您可以注册 Plugin Core API 提供的任何 Hook 并提供您的自定义代码。例如，afterDraw 钩子(Hook)必须按如下方式注册:

Chart.plugins.register({
  afterDraw: chart => {
    // your code  
  }
});