도넛 차트.js의 vue 성분 중첩 텍스트

도넛 차트.js의 vue 성분 중첩 텍스트

나는 아래와 같은 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>

참조URL: https://stackoverflow.com/questions/56644577/overlapping-text-in-vue-component-for-doughnut-chart-js