使用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();                              }                          }                      }                  }              })        };