如何使用CSS和JavaScript绘制正态分布曲线（贝尔曲线）？

Question

1. 它不需要在数学上准确。
2. 它必须是对称的。
3. 它需要有颜色渐变。
4. 我需要在曲线上动态添加一个点。 （但我想我可以 由我自己做 - 但任何帮助都将受到高度赞赏）

我是新手，这是我的错（我不是在努力获得同情），我正尽力做到这一点。

我一直试图这样做一段时间。我只是无法在SVG中正确地获得上坡曲线，我尝试输入它并使用Inkscape但我无法实现它。

Answer 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>

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