React中Half Doughnut Chart JS圆形指针的X、Y坐标定位问题

你需要调整角度计算逻辑，修正后的代码如下：

const pointer = {
  id: "pointer",
  afterDatasetsDraw: (chart) => {
    const { ctx } = chart;

    const data = chart._metasets[0].data[0];
    const radius = data.innerRadius + (data.outerRadius - data.innerRadius) / 2;
    const centerX = data.x;
    const centerY = data.y;

    // 修正角度计算：将speed映射为180度范围内的弧度（从左到右对应0到1000）
    const radian = Math.PI - (speed / 1000) * Math.PI;
    const x = centerX + radius * Math.cos(radian);
    // 修正Y轴方向，匹配Canvas坐标系（Y轴向下，需取反）
    const y = centerY - radius * Math.sin(radian);

    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 6;
    ctx.arc(x, y, 12, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();
  }
};

修正说明： #

• 弧度计算逻辑：半环形覆盖180度范围（从左侧180度到右侧0度），将speed（0-1000）映射为Math.PI到0的弧度区间，确保指针位置随数值增长从左向右移动。
• Y坐标修正：Canvas的Y轴方向向下，与数学坐标系的Y轴方向相反，因此用centerY - radius * Math.sin(radian)修正垂直位置，让圆形指针精准落在半环形的弧线上。

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