如何使用 CSS 和 JavaScript 绘制正态分布曲线（钟形曲线）？答案

【问题标题】：How to draw a Normal Distribution Curve (Bell curve) using CSS and JavaScript?如何使用 CSS 和 JavaScript 绘制正态分布曲线（钟形曲线）？
【发布时间】：2016-03-06 05:43:04
【问题描述】：

它不需要在数学上准确。
需要对称。
其中需要有颜色渐变。
我需要在曲线上动态添加一个点。（但我想我可以自己做 - 但任何帮助将不胜感激）

我是新手，这是我的错（我不是想博取同情），我正在尽力做到这一点。

我已经尝试了一段时间了。我只是无法在 SVG 中正确获得上坡曲线，我尝试将其输入并使用 Inkscape，但我无法实现。

【问题讨论】：

让我提醒您，这是一个我们帮助人们的网站；如果你想让我们给你写一些代码，那么你还不如付钱给我们。向我们展示您所做的工作，我们将尝试修复代码并在此之后为您提供帮助。至少尝试一下。

标签： javascript html css svg

【解决方案1】：

function NormalDensityZx(x, Mean, StdDev) {
  var a = x - Mean;
  return Math.exp(-(a * a) / (2 * StdDev * StdDev)) / (Math.sqrt(2 * Math.PI) * StdDev);
}
//----------------------------------------------------------------------------------------------
// Calculates Q(x), the right tail area under the Standard Normal Curve. 
function StandardNormalQx(x) {
  if (x === 0) // no approximation necessary for 0
    return 0.50;

  var t1, t2, t3, t4, t5, qx;
  var negative = false;
  if (x < 0) {
    x = -x;
    negative = true;
  }
  t1 = 1 / (1 + (0.2316419 * x));
  t2 = t1 * t1;
  t3 = t2 * t1;
  t4 = t3 * t1
  t5 = t4 * t1;
  qx = NormalDensityZx(x, 0, 1) * ((0.319381530 * t1) + (-0.356563782 * t2) + (1.781477937 * t3) + (-1.821255978 * t4) + (1.330274429 * t5));

  if (negative == true)
    qx = 1 - qx;
  return qx;
}
//----------------------------------------------------------------------------------------------
// Calculates P(x), the left tail area under the Standard Normal Curve, which is 1 - Q(x). 
function StandardNormalPx(x) {
  return 1 - StandardNormalQx(x);
}
//----------------------------------------------------------------------------------------------
// Calculates A(x), the area under the Standard Normal Curve between +x and -x
function StandardNormalAx(x) {
  return 1 - (2 * StandardNormalQx(Math.abs(x)));
}
//----------------------------------------------------------------------------------------------
//Define values where to put vertical lines at
var verticals = [-1.4, -0.2, 1.2

];
/**
 * Calculate data
 */
var chartData = [];
for (var i = -5; i < 5.1; i += 0.1) {
  var dp = {
    category: i,
    value: NormalDensityZx(i, 0, 1)
  };
  if (verticals.indexOf(Math.round(i * 10) / 10) !== -1) {
    dp.vertical = dp.value;
  }
  chartData.push(dp);
}

/**
 * Create a chart
 */
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": chartData,
  "precision": 2,
  "valueAxes": [{
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "lineThickness": 3,
    "valueField": "value"
  }, {
    "balloonText": "",
    "fillAlphas": 1,
    "type": "column",
    "valueField": "vertical",
    "fixedColumnWidth": 2,
    "labelText": "[[value]]",
    "labelOffset": 20
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "category",
  "categoryAxis": {
    "gridAlpha": 0.05,
    "startOnAxis": true,
    "tickLength": 5,
    "labelFunction": function(label, item) {
      return '' + Math.round(item.dataContext.category * 10) / 10;
    }
  }

});

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script><script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

我希望这对你有帮助。谢谢

【讨论】：