react-chartjs-2散点图95%置信区间椭圆绘制异常求助

一、异常结果的原因 #

• 像素空间计算协方差导致失真：原代码直接在像素坐标下计算偏差平方和与交叉乘积，而非基于原始数据值。若x、y轴的像素缩放比例不一致（比如x轴数值范围大，单位数值对应像素少；y轴范围小，单位数值对应像素多），会拉伸协方差矩阵，使椭圆的角度、半轴长度偏离数据真实分布，出现角度偏差或过度拉伸的情况。
• 角度计算逻辑存在歧义：原代码通过条件分支计算旋转角度，易因特征值大小判断错误，取到特征向量的共轭角度（相差90°或180°），导致椭圆旋转方向错误。
• Canvas绘图顺序错误：原代码在绘制路径后立即恢复上下文，后续样式设置未在变换上下文生效，可能导致绘制效果不符合预期。

二、调整方法与优化代码 #

核心优化方向 #

1. 切换到原始数据空间计算协方差矩阵与椭圆参数，避免像素缩放干扰
2. 用标准特征值/特征向量方法计算椭圆角度，确保结果准确
3. 修正Canvas上下文操作顺序，保证样式与变换生效

优化后的完整代码 #

// 在原始数据空间计算95%置信椭圆参数
const calculateEllipse = (points) => {
  const n = points.length;
  if (n < 2) return null; // 数据点不足时返回空

  // 计算数据均值
  const xMean = points.reduce((sum, p) => sum + p.x, 0) / n;
  const yMean = points.reduce((sum, p) => sum + p.y, 0) / n;

  // 计算样本协方差矩阵（除以n-1更符合统计意义）
  let covXX = 0;
  let covXY = 0;
  let covYY = 0;
  points.forEach((p) => {
    const dx = p.x - xMean;
    const dy = p.y - yMean;
    covXX += dx * dx;
    covXY += dx * dy;
    covYY += dy * dy;
  });
  covXX /= n - 1;
  covXY /= n - 1;
  covYY /= n - 1;

  // 计算特征值
  const trace = covXX + covYY;
  const determinant = covXX * covYY - covXY * covXY;
  const sqrtDiscriminant = Math.sqrt(trace * trace / 4 - determinant);
  const lambda1 = trace / 2 + sqrtDiscriminant; // 大特征值
  const lambda2 = trace / 2 - sqrtDiscriminant; // 小特征值

  // 计算椭圆旋转角度（基于特征向量）
  let angle = 0;
  if (covXY !== 0) {
    angle = Math.atan2(lambda1 - covXX, covXY);
  } else {
    // 无协方差时，椭圆轴与坐标轴对齐
    angle = covXX > covYY ? 0 : Math.PI / 2;
  }

  // 95%置信区间缩放因子（样本量较小时建议用t分布动态计算）
  const scaleFactor = 2.4477;
  const a = scaleFactor * Math.sqrt(lambda1);
  const b = scaleFactor * Math.sqrt(lambda2);

  return {
    xMean,
    yMean,
    a, // 长半轴（数据空间）
    b, // 短半轴（数据空间）
    angle,
  };
};

const ellipsePlugin = {
  id: "ellipse",
  afterDatasetsDraw: function (chart, args, options) {
    const ctx = chart.ctx;
    const show = chart.options.plugins.ellipse.show;
    const chartArea = chart.chartArea;
    const xAxis = chart.scales.x;
    const yAxis = chart.scales.y;

    if (!show) return;

    chart.data.datasets.forEach((dataset, index) => {
      if (!chart.isDatasetVisible(index) || dataset.data.length < 2) return;

      const ellipseData = calculateEllipse(dataset.data);
      if (!ellipseData) return;

      // 将数据空间参数转换为像素坐标
      const centerX = xAxis.getPixelForValue(ellipseData.xMean);
      const centerY = yAxis.getPixelForValue(ellipseData.yMean);
      // y轴像素向下递增，需取反半轴方向
      const aPixel = xAxis.getPixelForValue(ellipseData.xMean + ellipseData.a) - centerX;
      const bPixel = centerY - yAxis.getPixelForValue(ellipseData.yMean + ellipseData.b);

      // 检查椭圆是否在可视范围内
      const isVisible = (
        centerX + aPixel >= chartArea.left &&
        centerX - aPixel <= chartArea.right &&
        centerY + bPixel >= chartArea.top &&
        centerY - bPixel <= chartArea.bottom
      );

      if (!isVisible) return;

      // 修正绘图顺序：先保存上下文，绘制后再恢复
      ctx.save();
      ctx.beginPath();
      ctx.translate(centerX, centerY);
      ctx.rotate(ellipseData.angle);
      ctx.scale(aPixel, bPixel);
      ctx.arc(0, 0, 1, 0, 2 * Math.PI);
      ctx.strokeStyle = dataset.borderColor;
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.restore();
    });
  },
};

额外优化建议 #

• 动态缩放因子：若样本量较小（n<30），建议用t分布计算临界值替代固定的2.4477，可引入统计库如jstat实现，公式为scaleFactor = Math.sqrt(2 * f.ppf(0.95, 2, n-2))
• 边界判断优化：可增加更精准的椭圆与图表区域交集判断，避免部分可见的椭圆被完全隐藏

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