生成符合自定义峰值位置的钟形曲线高度数组

技术百科

聖光之護

发布时间：2026-01-27

浏览：次

本文介绍如何基于正态分布概率密度函数（pdf）生成覆盖整数区间 [0, 10] 的平滑钟形高度序列，支持自由设定峰值位置（如偏移至 x=3）和最大高度

（如 100），并提供可交互拖拽调节的 chart.js 实现方案。

在程序化生成地形、UI 动画缓动曲线或数据可视化中，常需构造一条“钟形”高度分布——起始于 0、终止于 10、峰值可控、整体平滑。虽然贝塞尔曲线（如 BezierJS）灵活直观，但若仅需数学上可预测、可参数化、易缩放的单峰曲线，正态分布的概率密度函数（PDF）是更简洁高效的选择。

正态 PDF 公式如下（无需积分，仅求点值）：

$$ f(x) = \frac{1}{\sigma\sqrt{2\pi}} \cdot e^{-\frac{(x-\mu)^2}{2\sigma^2}} $$

其中：

由于 PDF 原始输出最大值不为 100，我们采用线性缩放法：先计算所有采样点中的最大 y 值 maxY，再将每个 y 乘以缩放因子 100 / maxY，确保最终数组严格满足 maxHeight = 100。

以下代码生成 [0,1,2,...,10] 对应的 11 个高度值，并用 Chart.js 可视化，集成 chartjs-plugin-dragdata 支持拖拽调节各点：

非对称需求？ 正态 PDF 天然对称。若需真正左/右偏斜（skewed bell），可考虑 Skew Normal Distribution 或分段二次/三次插值（如使用 BezierJS 构造控制点后 curve.get(t) 采样）。
整数点精度： 上述代码以 step = 1 严格对应 [0,1,...,10]，若需更高密度（如每 0.5 单位采样），只需调整 step 并对结果取整或插值。
性能友好： PDF 计算为 O(n)，无迭代或数值积分，适合实时生成（万级点亦无压力）。
替代库参考：
- BezierJS：适合手绘拟合 → const curve = new Bezier(p0, p1, p2, p3); curve.get(t)；
- mathjs：提供 math.distribution('Normal') 封装；
- d3-shape：d3.line().curve(d3.curveBasis) 用于平滑连接离散点。

✅ 总结：当目标是参数简洁、数学可控、峰值可偏移、结果确定的钟形高度生成时，正态 PDF + 线性归一化是最轻量且专业的方案；配合 Chart.js 插件，即可快速构建带 UI 交互的“迷你 Inkscape 曲线编辑器”。

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【精选文章<？ｍｕｍａ echo $count; ?> 】