Echarts动态产生高斯白噪声

最新推荐文章于 2024-03-18 23:00:14 发布

晨之清风

最新推荐文章于 2024-03-18 23:00:14 发布

阅读量809

点赞数

分类专栏： echarts 文章标签： echarts 高斯白噪声 javascript 实时数据处理

本文链接：https://blog.csdn.net/chentuo2000/article/details/110795146

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

陈拓 2020/12/04-2020/12/06

1. 高斯白噪声

百度百科，高斯白噪声：如果一个噪声，它的瞬时值服从高斯分布（正态分布），而它的功率谱密度又是均匀分布的，则称它为高斯白噪声。

2. 用Box-Muller变换生成高斯分布随机数

实现过程：产生两个满足[0, 1]上均匀分布的数据x、y，然后通过下面两个公式：

将x和y转换为相互独立的高斯分布数据X、Y，这两个公式使用一个即可。

对于产生的高斯随机数，进行归一化映射，映射至某个需要的幅度值区域。在给定均值m和标准偏差sd的情况下，只需要再做如下运算：

详细描述见参考文档1。

Box-Muller变换的证明见参考文档2。

3. HTML页面和js程序

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container1" style="position:absolute; left:10px; top:0px; height:320px; width:400px;"></div>
        <div id="container2" style="position:absolute; left:10px; top:280px; height:320px; width:400px;"></div>
        <div id="container3" style="position:absolute; left:400px; top:0px; height:320px; width:400px;"></div>
        <div id="container4" style="position:absolute; left:400px; top:280px; height:320px; width:400px;"></div>
        <div id="container5" style="position:absolute; left:800px; top:0px; height:320px; width:400px;"></div>
        <div id="container6" style="position:absolute; left:800px; top:280px; height:320px; width:400px;"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script type="text/javascript">
var dom1 = document.getElementById("container1");
var myChart1 = echarts.init(dom1);
var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
var dom3 = document.getElementById("container3");
var myChart3 = echarts.init(dom3);
var dom4 = document.getElementById("container4");
var myChart4 = echarts.init(dom4);
var dom5 = document.getElementById("container5");
var myChart5 = echarts.init(dom5);
var dom6 = document.getElementById("container6");
var myChart6 = echarts.init(dom6);
var app = {};
var option;

var x_axis1 = [];
var x_data1 = 0;
var y_axis1 = [];
var y_data1 = 0;
var x_axis2 = [0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9];
var y_axis2 = [0,0,0,0,0,0,0,0,0,0];
var x_axis3 = [];
var x_data3 = 0;
var y_axis3 = [];
var y_data3 = 0;
var x_axis4 = [0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9];
var y_axis4 = [0,0,0,0,0,0,0,0,0,0];
var x_axis5 = [];
var x_data5 = 0;
var y_axis5 = [];
var y_data5 = 0;
var x_axis6 = [0,1,2,3,4,5,6,7,8,9];
var y_axis6 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var N_POINT = 1000; // 采样点数

// 产生服从 U(0,1) 的均匀分布随机数random1和random2
function random1(x) {
    return Math.random();
}
function random2(x) {
    return Math.random();
}

// 用Box Muller方法生成正态分布随机数
function b_m(x, y) {
    var means=5; // 平均值，决定对称中线
    var sigma=1; // 标准方差，决定曲线的胖瘦
    z = Math.sqrt(-2 * Math.log(x)) * Math.cos(2 * Math.PI * y);
    return means + z * sigma;
}

// 生成x轴和y轴数据
function addData(shift) {
    x_data1++;
    x_axis1.push(x_data1);
    x_data3++;
    x_axis3.push(x_data3);
    x_data5++;
    x_axis5.push(x_data5);

    y_data1 = random1(); // 生成均匀分布的伪随机数
    y_axis1.push(y_data1);
    y_data3 = random2(); // 生成均匀分布的伪随机数
    y_axis3.push(y_data3);
    y_data5 = b_m(y_data1, y_data3); // 生成正态分布的随机数
    y_axis5.push(y_data5);
	
    if (shift) {
        x_axis1.shift();
        y_axis1.shift();
        x_axis3.shift();
        y_axis3.shift();
        x_axis5.shift();
        y_axis5.shift();
	}
}
// 生成N_POINT个数据，初始化x_axis和y_axis数组，数组的长度在这里被设置成N_POINT
for (var i = 0; i < N_POINT; i++) {
    addData(false);
}
// 噪声幅值直方图数据
function hist() {
    for (var i = 0; i < 10; i++) {
        y_axis2[i] = 0;
        y_axis4[i] = 0;
        y_axis6[i] = 0;
    }
    for (var i = 0; i < N_POINT; i++) {
        y_axis2[Math.round(10*y_axis1[i])]++;
        y_axis4[Math.round(10*y_axis3[i])]++;
        y_axis6[Math.round(y_axis5[i])]++;
    }
}

option1 = {
    title : { 
        show:true,
        padding: [20,20,100,100],
        text: '均匀分布随机数1',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: x_axis1
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        animation: false,
        showSymbol: false,
        clip: true,
        data: y_axis1,
        type: 'line'
    }]
};
option2 = {
    title : { 
        show:true,
        padding: [20,20,100,100],
        text: '均匀分布随机数1的直方图',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: x_axis2
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        animation: false,
        data: y_axis2,
        type: 'bar'
    }]
};

option3 = {
    title : { 
        show:true,
        padding: [20,20,100,100],
        text: '均匀分布随机数2',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: x_axis3
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        animation: false,
        showSymbol: false,
        clip: true,
        data: y_axis3,
        type: 'line'
    }]
};
option4 = {
    title : { 
        show:true,
        padding: [20,20,100,100],
        text: '均匀分布随机数2的直方图',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: x_axis4
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        animation: false,
        data: y_axis4,
        type: 'bar'
    }]
};

option5 = {
    title : { 
        show:true,
        padding: [20,20,100,100],
        text: '正态分布随机数',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: x_axis5
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        animation: false,
        showSymbol: false,
        clip: true,
        data: y_axis5,
        type: 'line'
    }]
};
option6 = {
    title : { 
        show:true,
        padding: [20,20,100,100],
        text: '正态分布随机数的直方图',
        x:'center'
    },
    xAxis: {
        type: 'category',
        data: x_axis6
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            animation: false,
            data: y_axis6,
            type: 'bar'
        },
        {
            animation: false,
            showSymbol: false,
            type: 'line',
            data: y_axis6,
            smooth: true,
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#c23531' //改变折线颜色
                    }
                }
            }
        }
    ]
};

setInterval(function () {
    addData(true); // 生成数据并左移
    myChart1.setOption(option1);
    myChart3.setOption(option3);
    myChart5.setOption(option5);
    hist(); // 直方图
    myChart2.setOption(option2);
    myChart4.setOption(option4);
    myChart6.setOption(option6);
}, 500); // 500ms刷新一次
        </script>
    </body>
</html>

上面的程序动态产生1000个区间为[0, 10]的高斯随机数。

验证见参考文档1。

4. 在浏览器中的效果图

参考文档

关于产生高斯白噪声
https://blog.csdn.net/weixin_32549329/article/details/88309909
利用Box-Muller变换生成正态分布的随机数
https://blog.csdn.net/m0_37772174/article/details/81356434

晨之清风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Echarts动态产生高斯白噪声

陈拓 2020/12/04-2020/12/061. 高斯白噪声百度百科，高斯白噪声：如果一个噪声，它的瞬时值服从高斯分布（正态分布），而它的功率谱密度又是均匀分布的，则称它为高斯白噪声。2. 用Box-Muller变换生成高斯分布随机数实现过程：产生两个满足[0, 1]上均匀分布的数据x、y，然后通过下面两个公式：将x和y转换为相互独立的高斯分布数据X、Y，这两个公式使用一个即可。对于产生的高斯随机数，进行归一化映射，映射至某个需要的幅度值区域。在给定均值m和标准偏差.
复制链接

扫一扫