如何获取Chart.js环形图（Donut）弧段的特定坐标

核心原理 #

Chart.js环形图（Doughnut Chart）的每个弧段Arc对象，自带startAngle/endAngle（弧度值）以及环形内外半径信息，结合图表中心坐标，用三角函数就能算出你要的特定坐标点。

坐标计算公式（适配Canvas坐标系，Y轴向下为正）：

// 计算指定角度、半径对应的坐标点
function getArcPoint(centerX, centerY, radius, angle) {
  return {
    x: centerX + radius * Math.cos(angle),
    y: centerY + radius * Math.sin(angle)
  };
}

具体实现步骤 #

• 获取图表实例与Arc对象
  从你的Chart实例中，通过chart.getDatasetMeta(0).data拿到所有弧段的Arc对象（示例默认取第一个数据集）。

• 提取关键参数
  每个Arc对象包含：

  • startAngle/endAngle：弧段的起始、结束弧度（顺时针方向，0弧度对应右侧水平位置）
  • outerRadius：环形外环半径
  • innerRadius：环形内环半径
    图表中心坐标可从chart.chartArea提取：

  const chartArea = myChart.chartArea;
  const centerX = chartArea.left + chartArea.width / 2;
  const centerY = chartArea.top + chartArea.height / 2;
  

• 计算目标坐标点
  对每个弧段，调用坐标函数计算4个关键端点（若你只需要某两个，按需取值即可）：

  • 起始角的外环点：getArcPoint(centerX, centerY, arc.outerRadius, arc.startAngle)
  • 起始角的内环点：getArcPoint(centerX, centerY, arc.innerRadius, arc.startAngle)
  • 结束角的外环点：getArcPoint(centerX, centerY, arc.outerRadius, arc.endAngle)
  • 结束角的内环点：getArcPoint(centerX, centerY, arc.innerRadius, arc.endAngle)

完整示例代码 #

// 初始化环形图
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [30, 50, 20],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    cutout: '60%' // 环形内环比例
  }
});

// 获取图表中心坐标
const chartArea = myChart.chartArea;
const centerX = chartArea.left + chartArea.width / 2;
const centerY = chartArea.top + chartArea.height / 2;

// 遍历所有弧段，计算并输出坐标
myChart.getDatasetMeta(0).data.forEach((arc, index) => {
  const outerStart = getArcPoint(centerX, centerY, arc.outerRadius, arc.startAngle);
  const innerStart = getArcPoint(centerX, centerY, arc.innerRadius, arc.startAngle);
  const outerEnd = getArcPoint(centerX, centerY, arc.outerRadius, arc.endAngle);
  const innerEnd = getArcPoint(centerX, centerY, arc.innerRadius, arc.endAngle);

  console.log(`弧段${index + 1}的端点坐标：`, { outerStart, innerStart, outerEnd, innerEnd });
});

// 坐标计算工具函数
function getArcPoint(centerX, centerY, radius, angle) {
  return {
    x: centerX + radius * Math.cos(angle),
    y: centerY + radius * Math.sin(angle)
  };
}

关键细节说明 #

• 弧度与方向：Chart.js用弧度制，0弧度对应右侧水平向右，角度顺时针递增（比如π/2弧度对应正下方，π对应正左方），如需转角度用角度 = 弧度 * 180 / Math.PI。
• 坐标系适配：Canvas的Y轴向下为正，所以Math.sin(angle)计算出的Y值会自然向下偏移，和图表显示一致。
• 动态更新：如果图表尺寸变化（比如窗口缩放），需要重新获取chartArea和计算坐标，因为中心位置、半径都会改变。

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