React概率可控带箭头转盘开发及Chart.js组件更新问题求助

一、核心问题修复：预定义数据后图表不更新 #

分段数量变化时图表不更新的核心原因：

• 改用预定义chartData后，未将其加入useEffect依赖数组，状态变化时不会触发图表更新逻辑
• 直接修改myChart.config.data不符合Chart.js官方更新规范，应使用官方API更新数据

修复步骤： #

1. 将预定义数据转为组件状态（支持动态修改），或确保其作为依赖项传入useEffect
2. 复用Chart实例并通过官方API更新数据，避免频繁销毁重建

示例修改片段：

// 定义可配置的转盘数据（包含概率配置）
const [chartData, setChartData] = useState({
  labels: ['奖品1', '奖品2'],
  datasets: [{
    backgroundColor: ['#8b35bc', '#b163da'],
    data: [50, 50] // 数值占比对应概率，50和50即各50%概率
  }]
});

// 用ref存储Chart实例，避免重复创建
const myChartRef = useRef(null);

useEffect(() => {
  const wheel = wheelRef.current;
  const pieColors = Array.from({ length: numSegments * 2 }, (_, i) =>
    i % 2 === 0 ? "#8b35bc" : "#b163da"
  );

  // 首次渲染创建Chart实例
  if (!myChartRef.current) {
    myChartRef.current = new Chart(wheel, {
      plugins: [ChartDataLabels, spinPointer],
      type: "pie",
      data: chartData,
      options: {
        responsive: true,
        animation: { duration: 1 },
        plugins: {
          tooltip: false,
          legend: { display: false },
          datalabels: {
            color: "#ffffff",
            formatter: (_, context) => context.chart.data.labels[context.dataIndex],
            font: { size: 24 },
          },
        },
      },
    });
  } else {
    // 依赖变化时更新图表数据
    myChartRef.current.data = {
      labels: Array.from({ length: numSegments }, (_, i) => `奖品${i+1}`),
      datasets: [{
        backgroundColor: pieColors,
        data: chartData.datasets[0].data.slice(0, numSegments)
      }]
    };
    myChartRef.current.update();
  }

  // 旋转逻辑、事件监听复用原有代码，注意将myChart替换为myChartRef.current

  return () => {
    if (myChartRef.current) {
      myChartRef.current.destroy();
      myChartRef.current = null;
    }
  };
}, [numSegments, chartData]); // 加入chartData作为依赖

二、实现可控制概率 #

概率控制通过饼图data数组的数值占比实现：数值越大，对应扇形面积越大，选中概率越高。

概率配置实现： #

// 更新单个分段的概率值
const updateSegmentProbability = (index, value) => {
  const newData = [...chartData.datasets[0].data];
  newData[index] = Math.max(1, parseInt(value) || 1); // 确保数值不小于1
  setChartData(prev => ({
    ...prev,
    datasets: [{ ...prev.datasets[0], data: newData }]
  }));
};

// 在render中添加概率配置面板
<div className="prob-config">
  {Array.from({ length: numSegments }, (_, i) => (
    <div key={i} className="segment-config">
      <span>分段{i+1} 权重：</span>
      <input
        type="number"
        value={chartData.datasets[0].data[i] || 10}
        onChange={(e) => updateSegmentProbability(i, e.target.value)}
        min="1"
      />
    </div>
  ))}
</div>

三、优化旋转逻辑匹配概率 #

修改旋转逻辑，让最终停止位置与配置的概率一致：

function rotation() {
  const chart = myChartRef.current;
  if (!chart) return;

  // 计算总权重
  const totalWeight = chart.data.datasets[0].data.reduce((sum, val) => sum + val, 0);
  // 生成随机权重值
  const randomWeight = Math.random() * totalWeight;
  
  // 匹配对应分段
  let cumulativeWeight = 0;
  let targetIndex = 0;
  for (let i = 0; i < chart.data.datasets[0].data.length; i++) {
    cumulativeWeight += chart.data.datasets[0].data[i];
    if (randomWeight <= cumulativeWeight) {
      targetIndex = i;
      break;
    }
  }
  
  // 计算目标角度（确保箭头指向分段中心）
  const segmentAngle = 360 / numSegments;
  const targetAngle = 270 - (targetIndex * segmentAngle + segmentAngle / 2); // 270为箭头固定位置
  // 叠加多圈旋转+小范围随机，模拟真实转盘效果
  const finalRotation = 360 * 10 + targetAngle + (Math.random() * 10 - 5);

  // 原有动画逻辑保持不变，替换myChart为chart
  let currentRotation = chart.config.data.datasets[0].rotation || 0;
  let increment = 50;
  const deceleration = 0.98;

  function animateSpin() {
    currentRotation += increment;
    chart.config.data.datasets[0].rotation = currentRotation;
    chart.update();
    increment *= deceleration;

    if (currentRotation < finalRotation && increment > 0.1) {
      requestAnimationFrame(animateSpin);
    } else {
      determineSelectedSegment();
    }
  }
  animateSpin();
}

四、箭头插件优化 #

调整箭头位置，确保始终在转盘顶部外侧：

const spinPointer = {
  id: "spinPointer",
  afterDatasetsDraw(chart) {
    const { ctx, chartArea: { top, left, right } } = chart;
    const xCenter = left + (right - left) / 2;
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = "gold";
    ctx.strokeStyle = "#d4af37";
    ctx.lineWidth = 2;
    // 绘制三角形箭头（顶部外侧）
    ctx.moveTo(xCenter, top - 15);
    ctx.lineTo(xCenter - 18, top + 10);
    ctx.lineTo(xCenter + 18, top + 10);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
  },
};

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