使用higncharts 绘制误差图

深藏阁楼爱情的钟 2022-06-04 00:16 253阅读 0赞

![Center][]

/**
             * 绘制误差图
             * id HTML Canvas 的ID
             * title 标题
             * subtitle 子标题
             * yTitle 纵轴标题
             * labels 横轴坐标值数组
             * data 数据  [{ "name":"第一组名称","data":[ 第一组数据]},{ 'name':"第二组名称"......
             * cols 有几组数据
             */
            var draw=function(id,title,subtitle,yTitle,labels,data,cols){
                  //常规配置,使用column布局
                  $('#'+id).highcharts({
                      chart:{
                          type:'column',
                          height:600,
                          width:labels.length*20*cols+40    //这里有一个根据数据组数和横向数据量指定宽度
                      },
                      title:{text:title},
                      subtitle:{text:subtitle},
                      xAxis:{categories:labels,crosshair:true},
                      yAxis:{min:0,title:{text:yTitle}},
                      tooltip: {
                          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                          '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
                          footerFormat: '</table>',
                          shared: true,
                          useHTML: true
                      },
                      plotOptions: {
                          column: {
                              pointPadding: 0.2,
                              borderWidth: 0
                          }
                      },
                      series:data
                  },function(chart){
                      //这里是重要的,用来绘制误差线
    
                      //这个就是cols,有几组数据
                      var days=chart.series.length,codes=chart.series[0].data.length;
    
                      //计算 纵向点阵坐标与纵向数据值的比例
                      var yPercent=chart.yAxis[0].len/(chart.yAxis[0].max-chart.yAxis[0].min);
    
                      //每一个数据(包括几组)
                      for(i=0;i<codes;i++){
                          //计算个数,总和
                          var cnt=0,sum=0;
                          for(j=0;j<days;j++){
                              //空值不计入
                              if(chart.series[j].data[i].y !==null){
                                  cnt++;
                                  sum+=chart.series[j].data[i].y;
                              }
                          }
                          if(cnt){
                              //平均值
                              var avg=sum/cnt;
    
                              //计算 均方根
                              var rms=0;
                              for(j=0;j<days;j++){
                                  if(chart.series[j].data[i].y !==null) {
                                      rms += (chart.series[j].data[i].y - avg) * (chart.series[j].data[i].y - avg);
                                  }
                              }
                              rms=Math.sqrt(rms/cnt);
    
                              //开始绘制
                              if(rms>0) {
                                  //计算纵轴偏移的高度
                                  var yOffset=rms*yPercent;
                                  for(j=0;j<days;j++){
                                      //一个数据点
                                      var p=chart.series[j].points[i];
    
                                      //绘制上横线
                                      chart.renderer.path([
                                          'M',p.barX+chart.plotLeft,p.plotY+chart.plotTop-yOffset,
                                          'L',p.barX+chart.plotLeft+p.pointWidth,p.plotY+chart.plotTop-yOffset
                                      ]).attr({stroke:'red','stroke-width':1,zIndex:6}).add();
    
                                      //绘制下横线
                                      chart.renderer.path([
                                          'M',p.barX+chart.plotLeft,p.plotY+chart.plotTop+yOffset,
                                          'L',p.barX+chart.plotLeft+p.pointWidth,p.plotY+chart.plotTop+yOffset
                                      ]).attr({stroke:'red','stroke-width':1,zIndex:6}).add();
    
                                      //绘制中间竖线
                                      chart.renderer.path([
                                          'M',p.barX+chart.plotLeft+p.pointWidth/2,p.plotY+chart.plotTop-yOffset,
                                          'L',p.barX+chart.plotLeft+p.pointWidth/2,p.plotY+chart.plotTop+yOffset
                                      ]).attr({stroke:'red','stroke-width':1,zIndex:6}).add();
                                  }
                              }
                          }
                      }
                  })
            };

[Center]: /images/20220604/8ae7c33507dc41119089474076f15b07.png