甜甜圈chart.js在vue组件中重叠文本

Question

我有一个chart.js甜甜圈图Vue组件如下

问题是，当我使用多个图表实例时，中间的文本重叠。

但是它们是重叠的。我尝试更改标题的节奏，但这没有任何作用。我怎样才能解决这个问题？我喜欢控制HTML /输出到标签的内容。

<script>
import { Doughnut } from "vue-chartjs";

export default {
  name: "doughnutChart",
  extends: Doughnut,
  props: {
    data1: {
      type: String,
      // default: function() {
      //   return;
      // }
    }
  },
  mounted() {
    var value = this.data1;
    var data = {
      labels: ["My val", ""]
    };
    this.renderChart(
      {
        datasets: [
          {
            borderWidth: 1,
            backgroundColor: ["#FF6384", "#AAAAAA"],
            hoverBackgroundColor: ["#FF6384", "#AAAAAA"],
            hoverBorderColor: ["#FF6384", "#ffffff"],
            data: [value, 100 - value]
          }
        ]
      },
      {
        responsive: true,
        maintainAspectRatio: true,
        legend: { display: false },
        cutoutPercentage: 70,
        elements: {
            center: {
                text: '50%'  //set as you wish
            }
        },
        tooltips: {
          filter: function(item, data) {
            var label = data.labels[item.index];
            if (label) return item;
          }
        }
      }
    );
    this.textCenter(value)
  },
  methods:{
    textCenter(val) {
      Chart.pluginService.register({
        beforeDraw: function(chart) {
          var width = chart.chart.width,
          height = chart.chart.height,
          ctx = chart.chart.ctx;

          ctx.restore();
          var fontSize = (height / 114).toFixed(2);
          ctx.font = fontSize + "em sans-serif";
          ctx.textBaseline = "middle";

           var text = val + "%",
              textX = Math.round((width - ctx.measureText(text).width) / 2),
              textY = height / 2;

              ctx.fillText(text, textX, textY);
              ctx.save();
            }
         });
        }
      }
   };
    </script>