无法使用Vue-Chartjs或任何其他插件触发beforeDraw

如何解决无法使用Vue-Chartjs或任何其他插件触发beforeDraw

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

我在做什么错？这是代码

queue3

解决方法

可以选择通过Chart.plugins.register在全球范围内注册插件。您可以注册Plugin Core API提供的任何挂钩，并提供您的自定义代码。例如，afterDraw钩子必须进行如下注册：

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

,

    mounted () {
    this.addPlugin({
        id: 'my-plugin',afterDraw: function (chart) {
            var ctx = chart.ctx;
            ctx.font = "bold 20px FiraGO";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.fillText("ლიბერალური",chart.width/2,chart.height - 25);
            ctx.font = "bold 20px FiraGO";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.fillText("ავტორიტარული",25);
            ctx.font = "bold 20px FiraGO";
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.rotate(Math.PI/2);
            ctx.fillText("გეგმიური ეკონომიკა",chart.width/(-2),25);
            // ctx.save();
            ctx.fillText("თავისუფალი ეკონომიკა",chart.height - 25);
            // ctx.save();
            // ctx.rotate(Math.PI/(-2))
            // ctx.save();
        }
    });
    this.renderChart(this.chartdata,{
            scales: {
                xAxes: [{
                    ticks: {
                        max: 100,min: -100
                    },type: 'linear',}],yAxes: [{
                    display: true,ticks: {
                        max: 100,min: -100
                    }
                }]
            },elements: {
                point: {
                    pointStyle: 'circle',radius: 16,backgroundColor: "#dc005a"
                }
            },layout: {
                padding: {
                    left: 50,right: 50,top: 50,bottom: 50
                }
            },});
}