问题描述
我正在尝试将自定义文本添加到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
}
},});
}