如何在Chart.js V3.8环形图红色段终点添加动态文本

核心思路 #

利用Chart.js的插件机制，在图表绘制完成后（afterDraw钩子），通过环形图弧段内置的角度、中心坐标、半径等参数，计算红色段终点的精确坐标，再在Canvas上直接绘制动态文本。这种方法能自动适配数据变化，无需手动维护HTML元素定位。

实现代码 #

1. 定义自定义插件

const redSegmentTextPlugin = {
  id: 'redSegmentText',
  afterDraw: (chart) => {
    // 定位红色数据集（可根据实际背景色/标签调整匹配规则）
    const redDataset = chart.data.datasets.find(ds => ds.backgroundColor.includes('#ff0000'));
    if (!redDataset) return;

    const ctx = chart.ctx;
    const datasetIndex = chart.data.datasets.indexOf(redDataset);
    const redArc = chart.getDatasetMeta(datasetIndex).data[0];
    
    // 获取环形图核心参数
    const centerX = redArc.x;
    const centerY = redArc.y;
    const outerRadius = redArc.outerRadius;
    const endAngle = redArc.endAngle; // 红色段的终点弧度

    // 计算文本绘制坐标（向外偏移15px避免与弧段重叠）
    const textOffset = 15;
    const textX = centerX + (outerRadius + textOffset) * Math.cos(endAngle);
    const textY = centerY + (outerRadius + textOffset) * Math.sin(endAngle);

    // 设置文本样式并绘制
    ctx.save();
    ctx.font = '14px sans-serif';
    ctx.fillStyle = '#222';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(redDataset.data[0].toString(), textX, textY);
    ctx.restore();
  }
};

2. 初始化图表时注册插件

const chart = new Chart(document.getElementById('yourChartId'), {
  type: 'doughnut',
  plugins: [redSegmentTextPlugin], // 注册自定义插件
  data: {
    labels: ['红色段', '其他段1', '其他段2'],
    datasets: [{
      data: [35, 40, 25], // 红色段数值动态变化
      backgroundColor: ['#ff0000', '#4285F4', '#34A853']
    }]
  },
  options: {
    responsive: true,
    cutout: '60%', // 环形图的内圈大小，按需调整
    // 其他配置项
  }
});

关键说明 #

• 自动适配动态数据：当调用chart.update()更新红色段数值时，插件会在重绘后重新计算终点坐标，自动更新文本位置和内容。
• 坐标计算逻辑：Chart.js的环形图弧段内置endAngle（终点弧度）、x/y（中心坐标）、outerRadius（外半径），通过三角函数cos/sin即可算出终点的绝对坐标。
• 文本偏移调整：textOffset参数可根据图表大小调整，确保文本与弧段不重叠。

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