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);
},

工作示例

Answer 2

如果您有一个“高”图例组（或没有），您希望将文本设置在甜甜圈的中间，而不是画布本身。 所以我建议改变一些变量指向chartArea （甜甜圈本身）：

const width = chart.chartArea.width;
const height = chart.chartArea.height;
//...
const textY = chart.chartArea.top + height / 2;