直方图的算法与图表

最新推荐文章于 2021-06-17 16:46:33 发布
最新推荐文章于 2021-06-17 16:46:33 发布
阅读量467 收藏 1
点赞数
分类专栏： 开发笔记 文章标签： html5 css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chuan6752/article/details/115018523
版权

 开发笔记，有缘人，阅

 

<template>
  <header>
    <body>
  
  <div id="two">
    <a> {{msg}} </a>

    
  </div>
  

  <div class="pass">
		<div class="xinzeng1">5</div>
		
		<div class="xinzeng4">
      <div class="text">
      <div id="myChart2" :style="{width: '100%', height: '100%'}"></div>  
      </div>

      <div class="text2">
        <p>sdfsfdsdfsdfsdfsdfsdffd </p>
			</div>

      <button @click="CalcBatCPK(1.3045,10.2615,24,7,15,text,19.456,8.36)">CPK 测试</button>
      <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6FB7B7;"></span>

		</div>
	</div>

  <div id="yu">
    <p>sdfsfdsdfsdfsdfsdfsdffd </p>
    <h1> dfsdfsdf5555 </h1>
    <a> {{msg}} </a>

  </div>


    </body>
  </header>
</template>

<style scoped>

body{
  /*background-image: url("./assets/12.jpg");*/
  background-repeat:no-repeat;
  width:1208px;
  height: 900px;
}

.pass{
margin: 0;
padding: 0;
width:99%;
height: 90%;
position: absolute;
}

.xinzeng1{
width:72%;
height: 55%;
float:left;
background:rgb(230, 245, 188);
}

.xinzeng4{
width:28%;
height: 55%;
float:left;
background:rgb(255, 255, 205);
}

.text{
  width:100%;
  height: 90%;
  border-radius:15px
}

.text2{

  width:100%;
  height: 10%;
  border-radius:15px
}

</style>

<script>
export default {
  name: 'two',
  data () {
    return {
      msg: 'I am twocccccccccccccccccccccccccccccccccccccccccccccc',
      BarX:[3,2,5,6,15,17,21,26,42,37,45,44,53,33,35,27,25,17,17,7,12,5,3,1,2],
      LineX:[0.0195362866170644,0.0329676330209117,0.0528824759946282,0.080633230425571,0.116867728390018,0.161010207774185,0.210858194283367,0.262485803952267,0.310598548927497,0.34935847986543,0.373526501931662,0.379620639910312,0.366738477627864,0.336776208697881,0.293971070499289,0.243919234823682,0.192382590687355,0.144232706593539,0.102787428835202,0.069629698804273,0.0448360448847198,0.0274434267282686,0.0159671588832651,0.00883070180317537,0.00464238396251034],
      RangX:[7.39794436659249,7.6343913412363,7.87083831588011,8.10728529052393,8.34373226516774,8.58017923981155,8.81662621445537,9.05307318909918,9.289520163743,9.52596713838681,9.76241411303062,9.99886108767444,10.2353080623182,10.4717550369621,10.7082020116059,10.9446489862497,11.1810959608935,11.4175429355373,11.6539899101811,11.8904368848249,12.1268838594688,12.3633308341126,12.5997778087564,12.8362247834002,13.072671758044],
      XX:["sfsdf","dfgdf","dfgdf","dfgdf","dfgdf"],
      uu:"22222",
      LSLine:"",
      USLine:"",
      Min:"",
      Max:"",
      DtRange:[],
      text:"2021/03/12 08:00:00$abcefg1639800$19.456@#2021/03/12 08:01:00 $abcefg1519685$12.491@#2021/03/12 08:02:00 $abcefg9230974$9.751@#2021/03/12 08:03:00 $abcefg1221880$10.461@#2021/03/12 08:04:00 $abcefg6320151$11.066@#2021/03/12 08:05:00 $abcefg6973407$10.142@#2021/03/12 08:06:00 $abcefg8085600$9.47@#2021/03/12 08:07:00 $abcefg6559525$8.365@#2021/03/12 08:08:00 $abcefg4086197$11.487@#2021/03/12 08:09:00 $abcefg7564426$9.394@#2021/03/12 08:10:00 $abcefg7573168$9.682@#2021/03/12 08:11:00 $abcefg7594452$11.186@#2021/03/12 08:12:00 $abcefg5448205$8.519@#2021/03/12 08:13:00 $abcefg8009836$8.668@#2021/03/12 08:14:00 $abcefg2723945$8.918@#2021/03/12 08:15:00 $abcefg6584766$11.58@#2021/03/12 08:16:00 $abcefg6977861$10.786@#2021/03/12 08:17:00 $abcefg7046163$8.498@#2021/03/12 08:18:00 $abcefg8276548$11.702@#2021/03/12 08:19:00 $abcefg2607741$12.967@#2021/03/12 08:20:00 $abcefg1177848$10.185@#2021/03/12 08:21:00 $abcefg4520452$9.185@#2021/03/12 08:22:00 $abcefg2855074$11.481@#2021/03/12 08:23:00 $abcefg4218669$10.845"
    
    }
  },

  methods:{

    drawLine2(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart2'));

        const labelOption = {
          show: true,
          position: 'insideRight'
        }

        let uu=this.XX;
        
        // 绘制图表
        myChart.setOption({
            //title: { text: '在Vue中使用echarts' },
            tooltip: {
				    /*/trigger: 'item',
            formatter: function(a){
              console.log(a);
              return "<div>"+a.marker+"</div>";

              //"{a} <br/>{b} : {c} ({d}%)"
              }*/
            },
            xAxis:[
              {
                data: this.RangX,
              },

              { //第二条 X 轴，放置规格上下限
                max:this.Max,
                min:this.Min,
                show:false,
                // splitLine:{
                //   show:false
                // },
                // axisLine:{     //x轴坐标轴，false为隐藏，true为显示
                //   show:false
                // },
                // axisLabel:{     //x轴坐标轴，false为隐藏，true为显示
                //   show:false
                // },
              }

            ],
   
			      //color: ['#00FF00', '#FF0000'],
            grid:{
              left: '5%', // 与容器左侧的距离
              right: '5%', // 与容器右侧的距离
              top: '5%', // 与容器顶部的距离
              bottom: '5%', // 与容器底部的距离
            },
            legend: {
              left: 'right',
              top:'top',
              data: ['IR', 'SK']
            },
			
            yAxis: [

              {
                show:false,
                // position: 'left',
                // splitLine:{
                //   show:false
                // },
                // axisLine: {onZero: false,show:false},
                // axisLabel:{show:false},//x轴坐标轴，false为隐藏，true为显示

              },
              {
                show:false,
                // position: 'right',
                // splitLine:{
                //   show:false
                // },
                // axisLine: {onZero: false,},
                // axisLabel:{show:false},//x轴坐标轴，false为隐藏，true为显示
              }
            ],
            
            //barGap: '10%', 
            
            series: [
                {
                  //name: "IR",
                  type: 'bar',
                  barCategoryGap:0.3,
                  color:'#6FB7B7',
                  data: this.BarX,
                  yAxisIndex:0,
                  
                },
                {
                  name: this.Txt,
                  type: 'line',
                  smooth:true,   //关键点，为true是不支持虚线，实线就用true
                  symbol: "circle", //取消关键点
                  symbolSize:2,
                  yAxisIndex:1,
                  //showSymbol: false,
                  itemStyle:{
                    normal:{
                      color:'#6C3365' ,
                      lineStyle:{
                        width:2,
                        type:'solid',  //'dotted'虚线 'solid'实线
                        color:'#6C3365' 
                      }
                    }
                  },
                  data: this.LineX,
                },

                {
                  name:'规格线',
                  type:'line',
                  xAxisIndex:1,
                  markLine : {
                      symbol:'none',
                      lineStyle: {
                          normal: {
                              //type: 'dotted',
                              color:'#6C3365' ,
                          }
                      },
                      data : [
                          {
                              name:'LSL',
                              label:{
                                  show:true,
                                  position:'end',
                                  formatter: '{b}: {c}'
                              },
                              xAxis:this.LSLine,
                          },
                          {
                              name:'USL',
                              label:{
                                  show:true,
                                  position:'end',
                                  formatter: '{b}: {c}'
                              },
                              xAxis:this.USLine,
                          },
                      ]
                  }
                }
                
			        ]
		      });
      },
      
      CalcBatCPK(sigm,mean,QTY,LSL,USL,DataX,Max,Min){//计算直方图的数据

        this.BarX=[];
        this.LineX=[];
        this.RangX=[];
        this.DtRange=[];
      
        /* 组距的算法：
           组距=(6*sigma)/sqrt(QTY) 
        */
        var Rangx=0;
        if(Math.sqrt(parseInt(QTY))<12){
           Rangx=(5* parseFloat(sigm))/12;
        }else{
          Rangx = (5* parseFloat(sigm))/Math.sqrt(parseInt(QTY));
        }
        // 最高支持 0.001的区分精度
        var roundupX=parseInt(0);
        if(Rangx<0.0001){
            Rangx= Rangx.toFixed(5);
            roundupX=5;
        }else if(Rangx<0.001){
            Rangx= Rangx.toFixed(4);
            roundupX=4;
        }else if(Rangx<0.01){
            Rangx= Rangx.toFixed(3);
            roundupX=3;
        }else if(Rangx<0.1){
            Rangx= Rangx.toFixed(2);
            roundupX=2;
        }else if(Rangx<10){
            Rangx= Rangx.toFixed(1);
            roundupX=1;
        }else{
            Rangx= Rangx.toFixed(0);
        }
        //*********************以上为组距的算法 */

        var DtLSL;
        var DtUSL;

        if(parseFloat(LSL)<parseFloat(Min)){
            DtLSL = parseFloat(LSL)-parseFloat(Rangx);
        }else{
            DtLSL = parseFloat(Min)-parseFloat(Rangx);
        }

        if(parseFloat(USL)>parseFloat(Max)){
            DtUSL = parseFloat(USL)+parseFloat(Rangx);
        }else{
            DtUSL = parseFloat(Max)+parseFloat(Rangx);
        }

        // this.USLine = USL;
        // this.LSLine = LSL;
        this.Max = DtUSL;
        this.Min = DtLSL;


        //console.log(DtLSL +"----"+ DtUSL);

        while(DtLSL<DtUSL){
            this.DtRange.push({"Rank":DtLSL,"bar":0,"Line":""});
            DtLSL=parseFloat(DtLSL)+parseFloat(Rangx);
            DtLSL=parseFloat(DtLSL.toFixed(roundupX));//避免出现0.99999999999999999的问题
            console.log(DtLSL);
        }

        var DataAll = DataX.split("@#");
        var DataItm = [];

        DataAll.forEach(ele => {
            DataItm = ele.split("$");// 第三个字符里放有计算CPK 的值
            this.FixRankData(DataItm[2]);
        });

        this.DtRange.forEach(ele => {
            ele.Line = this.FixRankLine(ele.Rank,mean,sigm);
        });

        this.DtRange.forEach(ele => {
            this.BarX.push(ele.bar);
            this.LineX.push(ele.Line);
            this.RangX.push(ele.Rank);
        });

        this.USLine = parseFloat(USL); 
        this.LSLine = parseFloat(LSL); 


        this.drawLine2();
        console.log(this.DtRange);

      },

      FixRankLine(x,mean,sigma){//计算直方图的正态曲线
          /* 正态分布线算法如下：
          f(x)= 1/(sigma*根号下2 Pi) * 自然常数E 的次方，次方数: -(x-mean)^2/(2*sigma^2)
        */
        var D2PI=2.506628274631; // 根号下2* pi
        var EXPx= 2.71828182845905; //自然常数E

        var sigma2Pi = 1/(parseFloat(sigma)*D2PI); // 1/(sigma*根号下2 Pi)

        var Ecifang = -Math.pow((parseFloat(x)-parseFloat(mean)),2)/(2*Math.pow(parseFloat(sigma),2)); //自然常数E 的次数

        return sigma2Pi*(Math.pow(EXPx,Ecifang));
      },

      FixRankData(x){//计算直方图每个柱子的高度
          var Ldata="";
          this.DtRange.forEach(ele => {
              if(x >= parseFloat(Ldata) && x < parseFloat(ele.Rank)){
                  ele.bar = parseInt(ele.bar)+1;
              }
              Ldata = ele.Rank;
          });
      }
    },
  
  mounted(){
    this.drawLine2();

  }
}
</script>

 

 

 

chuan6752
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图像处理系列——直方图统计算法
nanke_yh的博客
12-15 5798
直方图统计算法可指定对比度差的局部区域进行相应的提升，来实现图像局部区域的图像增强目的。直方图统计是根据模板大小内的像素邻域的均值、方差与全局的均值、方差的比较，来决定像素的操作。
Lightgbm 直方图优化算法深入理解
热门推荐
anshuai_aw1的博客
10-13 3万+
一、概述 在之前的介绍Xgboost的众多博文中，已经介绍过，在树分裂计算分裂特征的增益时，xgboost 采用了预排序的方法来处理节点分裂，这样计算的分裂点比较精确。但是，也造成了很大的时间开销。为了解决这个问题，Lightgbm 选择了基于 histogram 的决策树算法。相比于 pre-sorted算法，histogram 在内存消耗和计算代价上都有不少优势。 histogram算法简单来...
matlab计算斜方差_Matlab求方差，均值，均方差，协方差的函数
weixin_39796238的博客
12-20 527
1、均值数学定义：Matlab函数：mean>>X=[1,2,3]>>mean(X)=2如果X是一个矩阵，则其均值是一个向量组。mean(X,1)为列向量的均值，mean(X,2)为行向量的均值。>>X=[1 2 34 5 6]>>mean(X,1)=[2.5, 3.5, 4.5]>>mean(X,2)=[25]若要求整个矩阵的均值，则为...
【计算机视觉】借助图像直方图来检测特定物(MeanShift、CamShift算法)
Jason Ding的专栏
10-16 4627
均值漂移算法以迭代的方式锁定概率函数的局部最大值。它主要是寻找预定义窗口中数据点的重心点，或者说加权平均值。该算法将窗口中心移动到数据点的重心处，并重复这个过程直到窗口重心收敛到一个稳定点。 从数学角度上说，Mean Shift算法利用概率密度的梯度爬升来寻找局部最优。当输入一个图像的范围，然后根据反向投影图和输入的方框进行Mean Shift迭代，它是向重心移动，即向反向投影图中概率大的地方移动，所以始终会移动到目标上，Mean Shift算法是一个变步长的梯度上升算法。
25.直方图计算
罗伊的博客
04-10 3421
1.主要内容 直方图概念 API学习 代码演示 2.直方图概念 基本介绍 假设有图像数据8x8，像素值范围0~14共15个灰度等级，统计得到各个等级出现次数及直方图如下图所示，每个紫色的长条叫BIN（值的范围大小）。 将bins划分为16个等级，每个等级有16位 上述直方图概念是基于图像像素值，其实对图像梯度、每个像素的角度、等一切图像的属性值，我们都可以建立直方图。这个才是直...
金融数据分析 实验四 金融风险价值计算
拔牙不打麻药
12-06 4593
实验原理 VaR的定义：在正常的市场条件下，给定置信水平和持有期，某种投资组合可能发生的最大损失值。 VaR模型不仅描述了损失的大小，还描述了发生损失的概率。 VaR的数学定义：给定置信水平 1 - α 和时间间隔 t ,如果一家实体机构在时间间隔 t 内预计损失额超过M的概率小于α，则称这家实体机构在时间间隔 t 内的VaR为M。 即 P {损失额 > M} < α VaR的计算是以概率论与数理统计为基础，类似于区间估计 VaR模型可解决的问题：确定内部核心风险资本需求；设定风险限额（建立防
图表算法—有向图
01-24 632
1. 有向图（Directed Graphs） 　　有向图与无向图是很像的，如果对无向图不熟悉，建议先看一下无向图。 　　在讨论有向图的算法前，先讨论如何构建有向图。 　　构建有向图的方法基本与无向图的方法一模一样。　　 　　首先，有向图是长这样的： 　　 　　 　　也是有两个关键点： 　　a. 这个有向图有哪些点 　　b. 哪些点可以通往哪些点（箭头代表可通往的...
直方图的计算与绘制
hm成长之路
11-27 340
直方图的绘制 绘制H-S直方图 //=============================================================== //FileName: // H-S-Histogram.cpp //Date: // 2019/11/26 //Author: // khoing(https://blog.cs...
直方图修正和彩色变换算法.rar_直方图_直方图算法
09-14
直方图是一种统计图表，用于展示图像中像素强度分布的情况，而直方图算法则利用这种分布来调整图像的亮度、对比度和色彩平衡。 直方图的基本原理是将图像的像素强度值作为横坐标，出现该强度值的像素数量作为纵坐标...
直方图均衡_PSNR_直方图均衡化_
10-04
而 "txjh.m" 文件名中的 ".m" 扩展名通常与MATLAB编程语言相关，这可能是一个MATLAB脚本，用于实现直方图均衡化算法。 峰值信噪比（PSNR）是衡量图像质量的一个重要指标，它是通过比较原始图像（参考图像）与处理后...
颜色直方图匹配算法opencv实现
01-06
OpenCV（Open Source Computer Vision Library）是一个强大的开源库，提供了丰富的图像处理和计算机视觉功能，包括颜色直方图的计算与匹配。 在这个项目中，环境是基于OpenCV 2.3.1版本，使用Visual Studio 2008...
matlab自编直方图算法.pdf
10-30
在给定的“matlab自编直方图算法.pdf”文档中，主要涉及了以下几个重要的知识点： 1. 图像预处理： 在进行图像分析或处理之前，通常需要对图像进行预处理。在示例中，首先使用`imread`函数读取图像文件，例如'lena...
zhifangtu.zip_直方图均衡
09-23
这个MATLAB脚本"zhifangtu.m"应该包含了以上步骤，通过对输入图像执行直方图均衡化算法，并绘制均衡前后的直方图，帮助用户直观理解直方图均衡化的效果。通过分析和理解这段代码，不仅可以掌握直方图均衡化的基本...
向量场直方图算法（VHF）
小心小梦
04-09 1万+
矢量场直方图算法（VFH） 环境用网格表示（二维信息） 每个单元赋值表示该单元有障碍的可能性 在每一步环境信息转化为1维直方图 引入代价函数值G，为所有可以通过的方向赋值 选择具有最小代价函数值G的方向 G=a·目标方向+b ·轮转动角度+c ·原运动方向 VFH+ 用简单形式考虑机器人可行轨迹（动力学约束下） 机器人运动轨迹为弧形 挡住某方向的障碍物，阻止所有通过该方向...
十三种基于直方图的图像全局二值化算法原理、实现、代码及效果。
weixin_33816821的博客
09-07 517
      图像二值化的目的是最大限度的将图象中感兴趣的部分保留下来，在很多情况下，也是进行图像分析、特征提取与模式识别之前的必要的图像预处理过程。这个看似简单的问题，在过去的四十年里受到国内外学者的广泛关注，产生了数以百计的阈值选取方法，但如同其他图像分割算法一样，没有一个现有方法对各种各样的图像都能得到令人满意的结果。      在这些庞大的分类方法中，基于直方图的全局二值算法占有了绝对的市...
直方图均衡化算法原理与实现（三）
rjszcb的博客
06-17 245
直方图均衡化算法原理与实现 工作后，对原来学习的一些基本图像处理算法有了一些新的认识，比如Canny 算法，直方图均衡化算法等，今天就来说说直方图均衡化算法。 直方图均衡化原理 我们知道提高图像对比度的变换函数f(x)需要满足一下条件： f(x)在0<=x<=L−1上单调递增(不要求严格单调递增),其中L表示灰度级（L=256） f(x)的范围是[0,L−1] 我们知道当图像直方图完全均匀分布的时候，此时图像的熵是最大的（随机变量每个值的概率都相同时，概率最大），图像对比度是最大的。所以，理想情
图像直方图及直方图均衡总结（一）经典方法（附matlab和opencv端算法实现）
满城风絮
10-18 3万+
直方图的概念理解 图像直方图是反映一个图像像素分布的统计表，其实横坐标代表了图像像素的种类，可以是灰度的，也可以是彩色的。纵坐标代表了每一种颜色值在图像中的像素总数或者占所有像素个数的百分比。图像是由像素构成，因为反映像素分布的直方图往往可以作为图像一个很重要的特征。 图像灰度直方图：一副数字图像有[0~255]灰度级，直方图定义如下： h(gk)=nk 其中，gk是第k个灰
C#读取txt 乱码问题的解决方案
chuan6752的博客
02-16 3304
执行代码：StreamReaderreader=newStreamReader(response.GetResponseStream(),Encoding.GetEncoding("gbk")); 报错内容：ArgumentException: 'gbk' is not a supported encoding name. For information on defining a custom encoding, see the documentation for the Encodin...
利用直方图进行阈值分割
最新发布
05-11
直方图是一种用于展示图像像素值分布情况的图表，它可以帮助我们了解图像中像素值的分布情况。在阈值分割中，我们可以利用直方图中的信息来选择一个合适的阈值来将图像分割成两部分：一部分是大于等于阈值的像素，另...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值