本文介绍如何为整数序列 [0,1,…,10] 生成服从钟形分布的高度值，支持自由设定峰值位置（如偏移至 x=3）、归一化至指定最大高度（如 100），并提供基于 chart.js + dragdata 插件的可交互可视化方案，兼顾数学严谨性与工程实用性。
在图形生成、地形建模或 UI 动效设计中，常需将离散整数坐标（如索引 0 到 10）映射为平滑、可控的“钟形”高度序列。虽然问题中提到了贝塞尔曲线（如 BezierJS）或手绘拟合（类 Inkscape），但直接使用概率密度函数（PDF）构建钟形曲线更简洁、可解析、易控且无需插值采样——尤其当目标是单峰、对称/可偏斜、端点固定、峰值高度明确时。
✅ 核心方法：正态分布 PDF + 线性缩放
我们采用标准正态分布的概率密度函数（Gaussian PDF）作为基础形状：
$$ f(x) = \frac{1}{\sigma \sqrt{2\pi}} \exp\left(-\frac{(x - \mu)^2}{2\sigma^2}\right) $$
其中：
- μ（mean）控制峰值横坐标 —— 设为 3 即峰值出现在 x=3，设为 5 则居中；
- σ（stdDev）控制“宽度” —— 值越小，曲线越尖锐；越大则越宽扁；
- 函数天然满足：f(x) > 0、单峰、左右渐近于 0，完美适配“钟形”需求。
由于 PDF 原始最大值为 1/(σ√(2π))（在 x = μ 处取得），我们通过线性缩放因子 factor = maxHeight / maxY 将其精确拉伸至目标最大高度（如 100），确保结果严格满足要求。
? 完整实现（含交互拖拽）
以下代码在 Canvas 上渲染一条可拖拽控制点的钟形曲线，并为 x ∈ [0,1,2,...,10] 生成对应高度数组 dataPoints：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://chrispahm.github.io/chartjs-plugin-dragdata/assets/chartjs-plugin-dragdata.min.js"></script>
<canvas id="myChart" width="400" height="140"></canvas>
<script>
function calculateNormalPDF(x, mean, stdDev) {
return 1 / (stdDev * Math.sqrt(2 * Math.PI)) * Math.exp(-Math.pow(x - mean, 2) / (2 * Math.pow(stdDev, 2)));
}
const step = 1;
const maxHeight = 100;
const left = 0;
const right = 10;
const stdDev = 2; // 调整此值控制“胖瘦”
const mean = 3; // ? 关键！设为 3 → 峰值在 x=3；设为 5 → 居中
// 1. 生成原始 PDF 值并记录最大值
const dataPoints = [];
const labels = [];
let maxY = -Infinity;
for (let x = left; x <= right; x += step) {
const y = calculateNormalPDF(x, mean, stdDev);
dataPoints.push(y);
labels.push(x.toFixed(1));
if (y > maxY) maxY = y;
}
// 2. 归一化至 maxHeight
const factor = maxHeight / maxY;
for (let i = 0; i < dataPoints.length; i++) {
dataPoints[i] = parseFloat((dataPoints[i] * factor).toFixed(2)); // 保留两位小数提升可读性
}
// 3. 渲染可交互图表
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels,
datasets: [{
data: dataPoints,
label: 'Bell Curve Heights',
borderColor: '#36A2EB',
backgroundColor: 'rgba(54, 162, 235, 0.1)',
tension: 0.4, // 添加轻微平滑（非贝塞尔，但视觉友好）
pointRadius: 6,
pointHoverRadius: 8,
fill: true,
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: { enabled: false },
dragData: {
round: 1,
showTooltip: true,
onDrag: (e, datasetIndex, index, value) => {
// 实时更新 dataPoints 数组（可选：用于后续导出）
dataPoints[index] = parseFloat(value.toFixed(2));
}
}
},
scales: {
y: { beginAtZero: true, max: maxHeight * 1.1 },
x: { title: { display: true, text: 'Index' } }
}
}
});
</script>⚠️ 注意事项与进阶建议
- 非贝塞尔 ≠ 不灵活：虽然本方案用解析函数而非贝塞尔，但通过调节 mean 和 stdDev，已能覆盖绝大多数“偏斜钟形”场景（如 mean=2, stdDev=1.2 可生成左倾尖峰）。若需多控制点自由塑形（如 S 形、双峰），再引入 BezierJS 或分段三次样条（cubic-spline 库）更合适。
- 端点非零？ 正态 PDF 在端点 x=0 或 x=10 处不为零，但可忽略（如 stdDev=2, mean=3 时 f(0)≈0.009，缩放后仅约 0.9）。若强制端点为 0，可在缩放后手动置零，或改用截断正态分布或Beta 分布（Beta(α,β) 在 [0,1] 上定义，经线性变换即可适配 [0,10]，且 α≠β 天然支持偏斜）。
- 性能与精度：PDF 计算为 O(n)，无迭代，适合实时生成；所有数值均保留两位小数，兼顾精度与调试友好性。
- 导出数据：dataPoints 数组即为最终所需高度列表，可直接用于 WebGL 地形、CSS Grid 行高、SVG <polygon> 坐标等下游场景。
✅ 总结：用正态 PDF 是生成可控钟形高度的最简可靠路径；mean 控制峰值位置，stdDev 控制形态，线性缩放保证高度精度；配合 Chart.js 的 dragdata 插件，即可获得“迷你 Inkscape”般的交互体验——无需复杂几何拟合，亦能高效交付生产级数据。
