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

一、什么是正态分布

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

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

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

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

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

二、数据准备

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

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

 三、绘图

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

 let array=[2,2,6,1,6,1,3,21,8,25,2,6,85,24,63,4,5,23,1];
 let mean=(array.reduce((a,b)=>a+b))/array.length;
    // 方差
    let variance=array.map(x=>{
      return Math.pow(x-mean,2);
    }).reduce((a,b)=>a+b)/array.length;
    // 标准差
    let StandardDeviation = Math.sqrt(variance);
    let convertedData=[];
    for(let x=mean-3*StandardDeviation;x<=mean + 3*StandardDeviation;x++){
      let y=1/(StandardDeviation*Math.sqrt(2*(Math.PI)))*Math.exp(-(Math.pow(x-mean,2))/(2*(Math.pow(StandardDeviation,2))));
      convertedData.push([x,y]);
    }
    let xdata=convertedData.map(item=>{
      return item[0];
    });
    let ydata=convertedData.map(item=>{
      return item[1];
    });
option = {
  xAxis: {
    type: 'category',
    data:xdata
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: ydata,
      type: 'line',
      smooth: true
    }
  ]
};

四、展示效果

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

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要使用Echarts正态分布,你可以按照以下步骤进行操作: 1. 首先,你需要引入Echarts库。你可以在HTML文件中添加以下代码来引入Echarts库的CDN链接: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> ``` 2. 创建一个HTML元素,用于显示表。你可以在HTML文件中添加一个具有指定宽度和高度的div元素,例如: ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 3. 在JavaScript代码中,使用Echarts的API来配置和绘制正态分布。以下是一个示例代码,用于画一个简单的正态分布: ```javascript // 获取chart元素 var chartElement = document.getElementById('chart'); // 初始化echarts实例 var chart = echarts.init(chartElement); // 配置表选项 var option = { xAxis: { type: 'value', name: 'X' }, yAxis: { type: 'value', name: 'Y' }, series: \[{ type: 'line', smooth: true, data: \[\] // 此处填入正态分布数据 }\] }; // 使用配置项绘制表 chart.setOption(option); ``` 4. 在上述代码中,你需要将正态分布数据填入`data`数组中。你可以使用数学库(如Math.js)来生成正态分布数据,或者手动输入一些数据点。 5. 最后,你可以在浏览器中打开HTML文件,就可以看到绘制好的正态分布了。 请注意,上述代码只是一个简单的示例,你可以根据自己的需求进行更复杂的配置和样式调整。同时,你也可以参考Echarts的官方文档来了解更多关于配置和使用Echarts的信息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值