vue-chartjs-中间有文字的甜甜圈图

Question

我想在“甜甜圈”类型的图表内添加文本。
我正在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 ***//

谢谢并感谢。

Answer 1

您可以使用Chart.pluginService.register将该插件加载到该特定图表的已挂接钩中，而不必使用this.addPlugin全局安装该插件：

mounted() {
  this.addPlugin({
    id: 'my-plugin',
    beforeDraw: function(chart) {}
  })
  this.renderChart(this.chartdata, this.options);
},

working example