Highcharts＆gt;在列之间定位数据标签

Question

我正在使用Highcharts来显示列之间的％差异。 列上方的标签表示总计。列之间的百分比显示每个条之间的百分比变化。我已将x轴定位好，但y轴值很难。我的目标是： 在y轴上（图表高度的一半）和列之间<％>将％值对齐到50％，这样它就会显示一条直线。目前，这些数字是相对于柱列值的高度。

http://jsfiddle.net/tellmehow/1sr9ab6d/15/

在此处查看图片：

我的代码如下。

$(function(){
  var data = [1000,800,700,300,250,234,10,1,0,0];

  function percent(data) {
    var result = [];
    for (var i=0; i<data.length -1; i++) {
     if(data[i] === 0) {
       result[data[i]] = 100;
     } else {
       result[data[i]] = 100 - (data[i] - data[i +1]) * 100 / data[i];
     }
   }
   return result;
 } //percent

 $('#highcharts-panel').highcharts({
  chart: {
    type: 'column',
    events: {
      redraw: function(event) {
        refreshArrowPos();
      }
    }
  },
  xAxis: {
    categories: [{
      text: "various...",
    }]
  },
  yAxis: {
    min: 0,
    title: {
      text: 'whatever'
    }
  },
  tooltip: {
    enabled: false,
    followTouchMove: false
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0,
      dataLabels: {
        enabled: true
      },
    }, //col
    series: {
      marker: {
        enabled: false
      },
      shadow:false,
      borderWidth:0,
      dataLabels:{
        useHTML: true,
        enabled:true,
        formatter:function() {
          var percents = percent(data);
          return (Highcharts.numberFormat(this.y,0) + "<div class='dataPercent'>" + (this.y == data[data.length - 1] ? '' : Highcharts.numberFormat(percents[this.y]) + '%' + "<div class='arrow'></div>") + "</div>");
        },
        style: {
          fontSize: "14px",
        }
      }
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    name: 'Total users',
    data: data,
  }],

}

  );


  function refreshArrowPos() {

    $('.dataPercent').each (function(){

      var colWidth = ($('#highcharts-panel').width() / data.length);    
      var colHeight = ($('#highcharts-panel').height() / data.length);

      $(this).css({ left: ($(this).position().left + (colWidth / 2) - ($(this).width() /　4 )) + 'px',
                    top: ($(this).position().top + (colHeight / 2)) + 'px'
                  }); //end css

      }); //dataPErcent fun

  } //refreshArrowPos

  refreshArrowPos();

});//highCharts Func

 <div id="highcharts-pannel" class="funnelChart"></div>