• Echarts绘制任意数据的正态分布图


    一、什么是正态分布

       正态分布,又称高斯分布或钟形曲线,是统计学中最为重要和常用的分布之一。正态分布是一种连续型的概率分布,其概率密度函数(Probability Density Function,简称PDF)可以通过一个平均值(μ,mu)和标准差(σ,sigma)来完全描述。

     若随机变量X服从一个数学期望为μ、方差为σ2的正态分布,记为N(μ,σ2)。其概率密度函数为正态分布的期望值μ决定了其位置,其标准差σ决定了分布的幅度。当μ = 0,σ = 1时的正态分布是标准正态分布。且其概率密度函数为

    正态分布的概率密度函数的数学表达式为:

    正态随机变量服从的分布就称为正态分布,记作 

    可以读作X服从正态分布。 定义性的东西不进行过多赘述,可自行百度。

    二、数据准备

    上述内容中,我们已经知道了正态分布的数学表达式。所以说当我们得到任意一组数据时,需要先求出期望与标准差

    1. //任意数据
    2. let array=[1,2,3,6,5,4,2,1,6,5,8,2,15,8,4]
    3. // 平均值
    4. let mean=(array.reduce((a,b)=>a+b))/array.length
    5. // 方差
    6. let variance=array.map(x=>{
    7. return Math.pow(x-mean,2)
    8. }).reduce((a,b)=>a+b)/array.length
    9. // 标准差
    10. let StandardDeviation = Math.sqrt(variance)
    11. //计算方式可以百度
    12. let convertedData=[]
    13. for(let x=mean-3*StandardDeviation;x<=mean + 3*StandardDeviation;x++){
    14. //for循环中的条件代表你要生成几个标准差的数据,
    15. // 再带入正态分布公式,就可以生成一条整条分布曲线的数据
    16. let y=1/(StandardDeviation*Math.sqrt(2*(Math.PI)))*Math.exp(-(Math.pow(x-mean,2))/(2*(Math.pow(StandardDeviation,2))))
    17. convertedData.push([x,y])
    18. }

     三、绘图

    绘制图形使用echarts,我是直接在echarts的官网示例中进行测试的,下面附上全部代码。可以直接复制,粘贴到echarts折线图的代码编辑中查看效果。

    1. let array=[2,2,6,1,6,1,3,21,8,25,2,6,85,24,63,4,5,23,1];
    2. let mean=(array.reduce((a,b)=>a+b))/array.length;
    3. // 方差
    4. let variance=array.map(x=>{
    5. return Math.pow(x-mean,2);
    6. }).reduce((a,b)=>a+b)/array.length;
    7. // 标准差
    8. let StandardDeviation = Math.sqrt(variance);
    9. let convertedData=[];
    10. for(let x=mean-3*StandardDeviation;x<=mean + 3*StandardDeviation;x++){
    11. let y=1/(StandardDeviation*Math.sqrt(2*(Math.PI)))*Math.exp(-(Math.pow(x-mean,2))/(2*(Math.pow(StandardDeviation,2))));
    12. convertedData.push([x,y]);
    13. }
    14. let xdata=convertedData.map(item=>{
    15. return item[0];
    16. });
    17. let ydata=convertedData.map(item=>{
    18. return item[1];
    19. });
    20. option = {
    21. xAxis: {
    22. type: 'category',
    23. data:xdata
    24. },
    25. yAxis: {
    26. type: 'value'
    27. },
    28. series: [
    29. {
    30. data: ydata,
    31. type: 'line',
    32. smooth: true
    33. }
    34. ]
    35. };

    四、展示效果

                                              初来乍到,如有错误,敬请指教。

  • 相关阅读:
    CSR格式如何更新? GES图计算引擎HyG揭秘之数据更新
    去掉表格里某一列单元格的所有后缀
    final 在 java 中有什么作用?
    WinForm应用实战开发指南 - 教你如何实现表头的全选操作?
    Worthington羧基转移丨碳酸酐酶的应用和文献参考
    吉他效果器开发方法
    虚拟人三维动画宣传片案例分享 | 广州“五羊”城市文化IP商业体裸眼3D广告影片
    学校档案管理系统软件-学校数字档案室解决方案
    Android 安卓 Soong构建系统——Blueprint Android.bp配置文件解析
    centralwidget 不能布局
  • 原文地址:https://blog.csdn.net/tsunami_______/article/details/132730915