使用higncharts 绘制 误差图

 /**
         * 绘制误差图
         * 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();
                              }
                          }
                      }
                  }
              })
        };