如何在Plotly.JS的概率图中计算并绘制拟合直线？

核心数学原理 #

正态概率图的拟合直线本质是基于样本的均值和标准差生成的——因为正态分布的数值与对应百分位数的标准正态分位数呈严格线性关系：
对于正态分布 (N(\mu, \sigma^2))，任意观测值 (x) 满足：
[ x = \mu + \sigma \cdot z ]
其中 (z) 是该观测值对应的标准正态分位数（即标准正态分布的百分位点，比如第50百分位对应 (z=0)，第97.5百分位对应 (z≈1.96)）。

我们用样本统计量替代总体参数即可生成拟合线：

• (\hat{\mu})：样本均值（所有数据点的平均值）
• (\hat{\sigma})：样本标准差（除以 (n-1) 的无偏估计）

拟合直线的生成步骤 #

1. 计算样本统计量
   先算出数据集的样本均值和样本标准差：

   // 假设data是你的数值数组
   const mean = data.reduce((a, b) => a + b, 0) / data.length;
   const stdDev = Math.sqrt(data.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / (data.length - 1));
   

2. 确定y轴百分位数对应的标准正态分位数z
   概率图y轴是百分位数（比如0.1%到99.9%），需要把这些百分位数转换成标准正态分位数z。可以直接用常用分位点值：

   • 第0.1百分位：(z ≈ -3.09)
   • 第50百分位：(z = 0)
   • 第99.9百分位：(z ≈ 3.09)
     选覆盖y轴全范围的两个端点即可生成直线，多选点也能保证平滑。

3. 计算拟合直线的x坐标
   用公式 (x = \hat{\mu} + \hat{\sigma} \cdot z) 计算每个z对应的x值：

   // 示例：取y轴两端对应的z值
   const zValues = [-3.09, 3.09];
   const lineX = zValues.map(z => mean + stdDev * z);
   // 对应y轴百分位数（和你的概率图y轴范围一致）
   const lineY = [0.1, 99.9];
   

4. 在Plotly.js中添加拟合直线
   把拟合直线作为新trace加入概率图：

   const plotData = [
     // 原始样本数据的trace
     {
       x: yourOriginalX,
       y: yourOriginalY,
       mode: 'markers',
       type: 'scatter',
       name: '样本数据'
     },
     // 拟合直线trace
     {
       x: lineX,
       y: lineY,
       mode: 'lines',
       type: 'scatter',
       name: '正态拟合线',
       line: { color: 'red', dash: 'dash' }
     }
   ];
   
   Plotly.newPlot('yourDivId', plotData, {
     xaxis: { title: '数值' },
     yaxis: { title: '百分位数' },
     title: '正态概率图'
   });
   

常见问题说明 #

你之前尝试多种分布未成功，是因为正态概率图的拟合直线是专门对应正态分布的，核心是用样本的均值和标准差直接生成，而非通过拟合其他分布得到。只要你的概率图是基于正态分位数转换的，用上述方法就能得到正确的拟合直线。

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