无法在之前使用 Vue-Chartjs(或任何其他插件)触发绘制

Question

我正在尝试将自定义文本添加到Chartjs图表中(使用vueChartjs(，到目前为止我发现我需要通过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全局注册。您可以注册插件核心API提供的任何挂钩，并提供您的自定义代码。例如，afterDraw挂钩必须注册如下：

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

Answer 2

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("ავტორიტარული", chart.width/2, 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.width/(-2), 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,
type: 'linear',
ticks: {
max: 100,
min: -100
}
}]
},
elements: {
point: {
pointStyle: 'circle',
radius: 16,
backgroundColor: "#dc005a"
}
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
},
});
}