当前位置：首页 > news >正文

二项式分布html实验

news 来源：原创 2025/4/26 6:45:02

二项式分布html实验

本文将带你一步步搭建一个纯前端的二项分布 Monte-Carlo 模拟器。
只要一个 HTML 文件，打开就能运行：

动态输入试验次数 n、成功概率 p 与重复次数 m
点击按钮立刻得到「模拟频数 vs 理论频数」柱状图
随着 m 增大，两组柱状图逐渐重合，从视觉上 印证二项分布公式

1. 为什么要做这个实验

学习概率论时，我们经常“纸上谈兵”——写下

[
P(X=k)=\binom{n}{k}p^{k}(1-p){n-k}
]

就宣称“这就是答案”。
如果能亲手做实验，让抽样分布真实地落在眼前，
不仅能直观体会“大数定律”与“二项分布”的关系，也能加深对公式每一项含义的理解。

2. 技术选型

角色	工具	说明
样式	Tailwind CSS（Play CDN）	无需构建、开箱即用的原子化类
图表	Chart.js v4	体积小、易上手、对柱状图支持好
逻辑	原生 JavaScript	仅用 ES6 语法即可完成全部计算与交互

优势：

单文件、零依赖后端，复制到本地或放到 GitHub Pages 就能跑
代码总行数 < 200，便于教学与改造

3. 功能与界面预览

三个输入框：
- 试验次数 n：每个伯努利实验重复多少次
- 成功概率 p：0 ~ 1
- 重复实验次数 m：Monte-Carlo 总抽样次数
「运行模拟」按钮
双数据集柱状图
- 蓝色 = 模拟得到的实际频数
- 绿色 = 理论 PMF×m 得到的期望频数

随着 m 增大，两种柱子高度越贴近 —— 这就是经验分布逼近理论分布的过程。

4. 逐段解析核心代码

4.1 组合数 `comb(n,k)`

function comb(n, k) {k = Math.min(k, n - k);      // 对称性优化let c = 1;for (let i = 0; i < k; i++)  // 逐项相乘避免溢出c = (c * (n - i)) / (i + 1);return c;
}

思路：用递推而非阶乘，避免中间结果溢出并减少运算量。

4.2 理论 PMF `binomPMF(n,p)`

function binomPMF(n, p) {const q = 1 - p;return Array.from({ length: n + 1 }, (_, k) =>comb(n, k) * Math.pow(p, k) * Math.pow(q, n - k));
}

返回长度 n+1 的数组，第 k 项即公式值。

4.3 Monte-Carlo 模拟 `simulate(n,p,m)`

function simulate(n, p, m) {const freq = Array(n + 1).fill(0);for (let i = 0; i < m; i++) {let successes = 0;for (let j = 0; j < n; j++)if (Math.random() < p) successes++;freq[successes]++;}return freq;
}

双层循环：外层做 m 次实验，内层做 n 次伯努利试验。

4.4 Chart.js 初始化与刷新

const chart = new Chart(ctx, {type: "bar",data: { labels: [], datasets: [...] },options: { scales: { x: {...}, y: {...} } }
});runBtn.onclick = () => {const n = +nInput.value, p = +pInput.value, m = +mInput.value;const sim = simulate(n,p,m);const theory = binomPMF(n,p).map(x => x*m);chart.data.labels = [...Array(n+1).keys()];chart.data.datasets[0].data = sim;chart.data.datasets[1].data = theory;chart.update();
};

Chart.js 会自动在同一 X-轴按类别叠放两组柱子。

5. 完整源码（复制即用）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>二项分布模拟实验</title><script src="https://cdn.tailwindcss.com"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body class="min-h-screen bg-slate-50 flex flex-col items-center py-8"><h1 class="text-3xl font-bold mb-6">二项分布模拟实验</h1><div class="bg-white shadow-md rounded-lg p-6 w-full max-w-md mb-8"><div class="mb-4"><label class="block font-semibold mb-1" for="n">试验次数 n</label><input id="n" type="number" min="1" max="100" value="10" class="w-full border rounded px-3 py-2" /></div><div class="mb-4"><label class="block font-semibold mb-1" for="p">成功概率 p (0~1)</label><input id="p" type="number" step="0.01" min="0" max="1" value="0.5" class="w-full border rounded px-3 py-2" /></div><div class="mb-4"><label class="block font-semibold mb-1" for="m">重复实验次数 m</label><input id="m" type="number" min="1" max="20000" value="1000" class="w-full border rounded px-3 py-2" /></div><button id="runBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded">运行模拟</button></div><div class="w-full max-w-3xl"><canvas id="chart"></canvas></div><script>const comb = (n, k) => {if (k < 0 || k > n) return 0;k = Math.min(k, n - k);let c = 1;for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1);return c;};const binomPMF = (n, p) => {const q = 1 - p;return Array.from({ length: n + 1 }, (_, k) =>comb(n, k) * Math.pow(p, k) * Math.pow(q, n - k));};const simulate = (n, p, m) => {const freq = Array(n + 1).fill(0);for (let i = 0; i < m; i++) {let success = 0;for (let j = 0; j < n; j++) success += Math.random() < p ? 1 : 0;freq[success]++;}return freq;};const ctx = document.getElementById("chart");const chart = new Chart(ctx, {type: "bar",data: {labels: [],datasets: [{ label: "模拟频数", data: [], backgroundColor: "rgba(59,130,246,0.6)" },{ label: "理论期望频数", data: [], backgroundColor: "rgba(16,185,129,0.6)" }]},options: {responsive: true,scales: {x: { title: { display: true, text: "成功次数 k" } },y: { title: { display: true, text: "频数" } }}}});document.getElementById("runBtn").onclick = () => {const n = +document.getElementById("n").value;const p = +document.getElementById("p").value;const m = +document.getElementById("m").value;if (n <= 0 || p < 0 || p > 1 || m <= 0) {alert("请输入合法参数！");return;}const sim = simulate(n, p, m);const theory = binomPMF(n, p).map(v => v * m);chart.data.labels = [...Array(n + 1).keys()];chart.data.datasets[0].data = sim;chart.data.datasets[1].data = theory;chart.update();};</script>
</body>
</html>

6. 如何使用 & 实验建议

下载/复制源文件 → 直接双击或用 VS Code Live Server 打开。
先用默认参数 n=10,p=0.5,m=1000 运行一次。
增大 m（如 5000、10000）：观察柱状图差距逐渐减小。
改变 p（偏心硬币）：体验图形从对称到偏斜的变化。
改变 n：试验次数越大，横轴成功次数种类越多，曲线越接近正态分布形状。

小实验：设置 n=1，此时模拟结果就会精确落在伯努利分布 ( {0,1} ) 上，验证“二项分布在 n=1 时退化为伯努利”。

7. 可能的扩展方向

想法	技术提示
加入泊松近似/正态近似曲线	再添加一个折线数据集，公式计算期望值
计算并展示卡方检验 `χ²`	在 JS 中对两组频数做 `Σ((obs-exp)²/exp)`
支持动画增量抽样	`setInterval` 每隔 N 次刷新一次柱状图
用 WebWorker 提升大规模模拟性能	把 `simulate` 放到 worker 线程