我想在“甜甜圈”类型的图表内添加文本。我在vuejs项目中使用了这个插件:https://github.com/apertureless/vue-chartjs目前,所有图表都在显示。我只想要一个甜甜圈图,但显示了所有图表。
//*** Doughnut chat ***//
import { Doughnut } from "vue-chartjs";
import Chart from "chart.js";
export default {
extends: Doughnut,
data: () => ({
chartdata: {
labels: ["Cambodia", "Thailand", "Vietnam", "Laos"],
datasets: [
{
label: "Data One",
backgroundColor: ["#a3c7c9", "#889d9e", "#647678", "f87979"],
data: [91, 3, 3, 3]
}
]
},
options: {
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false
}
}),
mounted() {
this.renderChart(this.chartdata, this.options);
this.textCenter(880);
},
methods: {
textCenter(val) {
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width;
var height = chart.chart.height;
var ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = val;
var textX = Math.round((width - ctx.measureText(text).width) / 2);
var textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
Chart.plugins.unregister(this.chartdata);
}
}};
//*** end Doughnut chat ***//
谢谢,谢谢。
不是使用Chart.pluginService.register
全局安装插件,而是可以使用this.addPlugin
将其加载到该特定图表的已挂接钩中:
mounted() {
this.addPlugin({
id: 'my-plugin',
beforeDraw: function(chart) {}
})
this.renderChart(this.chartdata, this.options);
},