如何在环形图（Doughnut Chart）内部添加文本？求助修改JS代码

要在环形图内部添加自定义文本，我们可以通过Chart.js的自定义插件实现，在图表绘制完成后在画布中心绘制指定内容。以下是修改后的完整代码：

var a = $("#myChart").get(0).getContext("2d");
var myChart1 = new Chart(a, {
  type: "doughnut",
  data: {
    labels: ["Approved", "Declined"],
    datasets: [
      {
        backgroundColor: ["#8DE08D", "rgb(233,122,122)"],
        data: [55, 49]
      }
    ]
  },
  options: {
    responsive: true,
    cutout: '70%', // 控制环形镂空比例，数值越大环形越细，中心空间越充足
    plugins: {
      legend: {
        position: 'bottom' // 图例位置可按需调整
      }
    }
  },
  plugins: [{
    id: 'centerText',
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      // 计算图表中心坐标
      var centerX = chart.chartArea.left + (chart.chartArea.width / 2);
      var centerY = chart.chartArea.top + (chart.chartArea.height / 2);
      
      // 设置主文本样式
      ctx.font = 'bold 24px Arial';
      ctx.fillStyle = '#333';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      
      // 绘制主文本（可替换为你需要的内容，比如汇总值）
      ctx.fillText('总计 104', centerX, centerY);
      
      // 设置次级文本样式并绘制
      ctx.font = '16px Arial';
      ctx.fillText('已审批/已拒绝', centerX, centerY + 25);
    }
  }]
});

关键说明： #

• cutout：调整环形的镂空程度，确保中心区域有足够空间显示文本，根据实际需求调整百分比即可。
• 自定义插件的afterDraw钩子：在图表绘制完成后触发，通过画布上下文ctx实现文本绘制，你可以修改文本内容、字体、颜色、位置等参数来匹配你的需求。

内容的提问来源于stack exchange，提问作者Ameer Suhemat