二項式分布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. 可能的擴展方向
| 想法 | 技術提示 |
|---|---|
| 加入 泊松近似/正態近似 曲線 | 再添加一個折線數據集，公式計算期望值 |
計算并展示 卡方檢驗 χ2 | 在 JS 中對兩組頻數做 Σ((obs-exp)2/exp) |
| 支持 動畫增量抽樣 | setInterval 每隔 N 次刷新一次柱狀圖 |
| 用 WebWorker 提升大規模模擬性能 | 把 simulate 放到 worker 線程 |
復制本文源碼，親眼見證經驗分布向二項分布收斂的全過程吧！
)
