如何使用CSS和JavaScript绘制正态分布曲线(Bell曲线）

How to draw a Normal Distribution Curve (Bell curve) using CSS and JavaScript?

本文关键字：曲线 Bell 正态分布 绘制 何使用 CSS JavaScript      更新时间：2023-09-26
  1. 它不需要在数学上精确
  2. 它需要对称
  3. 它需要有一个颜色梯度
  4. 我需要在曲线上动态添加一个点。（但我想我可以我自己做，但如果有任何帮助，我们将不胜感激）

我是一个新手，这是我的错（我没有试图获得同情），我正在尽我所能做到这一点

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

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>

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

相关文章：