Javascript 如何在HighCharts中呈现从dataLabels到graph上标记的线条？

我有一个HighCharts样条曲线图，数据标签出现在点上方。我想画一条从标签到图表上的点的线，以帮助用户看到标签对应的内容

请参见此处的示例：

代码是：

Highcharts.chart('container', {
    xAxis: {
        minPadding: 0.05,
        maxPadding: 0.05
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                y: -20,
                allowOverlap: true,
                useHTML: true
            }
        },
    },
    series: [{
        data: [
            {name: 'First', x: 0, y: 29.9},
            {name: 'Second <br>&nbsp;', x: 0.1, y: 29.9},
            {name: 'Third', x: 1, y: 1.5},
            {name: 'Fourth', x: 2, y: 106.4}
        ]
    }]
});

Highcharts.chart（'container'{
xAxis：{
平均值：0.05，
最大填充：0.05
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：“{point.name}”，
y:-20，
allowOverlap：是的，
useHTML:true
}
},
},
系列：[{
数据：[
{name:'First'，x:0，y:29.9}，
{name:'Second
'，x:0.1，y:29.9}，
{name:'Third'，x:1，y:1.5}，
{name:'Fourth'，x:2，y:106.4}
]
}]
});

---

请注意，我不能将标签直接放在点上，因为有时标签相互重叠，我必须垂直交错

您需要设置数据标签的形状。指向该点的唯一可用形状是详图索引，但它与连接线大不相同

您需要定义自己的形状：

Highcharts.SVGRenderer.prototype.symbols.connector = function(x, y, w, h, options) {
  var anchorX = options && options.anchorX,
      anchorY = options && options.anchorY,
      path,
      yOffset,
      lateral = w / 2,
      H = Highcharts;

  if (H.isNumber(anchorX) && H.isNumber(anchorY)) {

    path = ['M', anchorX, anchorY];

    // Prefer 45 deg connectors
    yOffset = y - anchorY;
    if (yOffset < 0) {
      yOffset = -h - yOffset;
    }
    if (yOffset < w) {
      lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
    }

    // Anchor below label
    if (anchorY > y + h) {
      path.push('L', x + lateral, y + h);

     // Anchor above label
    } else if (anchorY < y) {
      path.push('L', x + lateral, y);

    // Anchor left of label
    } else if (anchorX < x) {
      path.push('L', x, y + h / 2);

    // Anchor right of label
    } else if (anchorX > x + w) {
      path.push('L', x + w, y + h / 2);
    }
  }
  return path || [];
};

---

示例：

是否有一种方法可以使直线与具有不同y值的标记保持90度的直线，例如，每个文本必须位于标记的正上方

      dataLabels: {
    shape: 'callout',
    enabled: true,
    format: '{point.name}',
    y: -20,
    allowOverlap: true,
    borderWidth: 1,
    borderColor: 'black',
    useHTML: true
  }