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

Answer 2

如果您有（或没有）'tall' 图例组，您希望将文本设置在甜甜圈中间，而不是 canvas 本身。所以我建议更改一些变量以指向 chartArea（甜甜圈本身）：

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

vue-chartjs - 中间有文本的圆环图

vue-chartjs - Doughnut chart with text in the middle

vue.js