javascript - 用于甜甜圈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>

标签： javascriptvue.jsvuejs2chart.js