ChartJS幸运转盘（饼图）固定数据标签旋转位置问题

使用ChartJS构建幸运转盘，采用饼图实现转盘结构，并配置了数据标签，通过以下代码设置标签旋转：

rotation: function(ctx) {
   const valuesBefore = ctx.dataset.data.slice(0, ctx.dataIndex).reduce((a, b) => a + b, 0);
   const sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
   const rotation = ((valuesBefore + ctx.dataset.data[ctx.dataIndex] /2) /sum *360);
   return rotation < 180 ? rotation-90 : rotation+90;
}

初始状态下数据标签显示符合预期，但执行以下转盘旋转代码（resultValue固定为101）后：

myChart.options.rotation = myChart.options.rotation + resultValue;
myChart.update()

数据标签位置出现异常。需要实现数据标签保持固定状态，不受转盘旋转影响。

方法一：调整数据标签旋转逻辑，抵消饼图整体旋转偏移 #

问题根源是数据标签的旋转计算仅基于原始数据集分布，未考虑饼图整体旋转的偏移量。修改标签的rotation函数，减去饼图当前的整体旋转角度即可：

rotation: function(ctx) {
   const valuesBefore = ctx.dataset.data.slice(0, ctx.dataIndex).reduce((a, b) => a + b, 0);
   const sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
   const baseRotation = ((valuesBefore + ctx.dataset.data[ctx.dataIndex] / 2) / sum * 360);
   // 获取饼图当前的整体旋转角度，取模360避免数值溢出
   const chartTotalRotation = (ctx.chart.options.rotation || 0) % 360;
   let labelRotation = baseRotation < 180 ? baseRotation - 90 : baseRotation + 90;
   // 抵消饼图旋转的影响，确保标签朝向固定
   labelRotation = (labelRotation - chartTotalRotation + 360) % 360;
   return labelRotation;
}

每次饼图整体旋转后，标签的旋转角度会自动减去这个偏移量，保持原本的固定朝向。

方法二：改用画布旋转插件实现转盘效果，避免修改饼图rotation #

不直接修改饼图的options.rotation，而是通过ChartJS插件在绘制阶段旋转画布，这样数据标签的计算逻辑不受影响：

// 注册旋转插件
const rotatePlugin = {
  beforeDraw: (chart) => {
    if (!chart.$rotateAngle) chart.$rotateAngle = 0;
    const ctx = chart.ctx;
    const meta = chart.getDatasetMeta(0);
    const center = { x: meta.data[0].x, y: meta.data[0].y };
    // 以饼图中心为原点旋转画布
    ctx.save();
    ctx.translate(center.x, center.y);
    ctx.rotate((chart.$rotateAngle * Math.PI) / 180);
    ctx.translate(-center.x, -center.y);
  },
  afterDraw: (chart) => {
    chart.ctx.restore();
  }
};
Chart.register(rotatePlugin);

// 执行转盘旋转时，更新插件的角度值
myChart.$rotateAngle += 101;
myChart.update();

这种方式仅在绘制时旋转饼图的视觉呈现，数据标签的计算仍基于原始饼图结构，自然保持固定位置。

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