Highcharts文字泡泡

Question

我有这样的图像：

我正在使用标记来处理文本气泡：

{
   type: 'flags',
   y: yPosition,
   name: 'Flags on series',
   showInLegend: false,
   data: [{
     x: xPosition,
     title: '<span class="status-legend ' + $filter('status')(impactType) + '"></span>'+'<span style="font-size: 14px; font-family: \'MyriadPro-Regular\'; color: white">' + date + ': ' + title + '</span><br>' + text + '<br>' + impact + '<br>'
   }],
   shape: 'squarepin',
   style: {
     fontSize: '12px',
     fontWeight: 'normal',
     fontFamily: 'MyriadPro-Regular',
     textAlign: 'left',
     color: '#E7E7E7'
   },
   fillColor: 'rgba(151, 151, 151, 1)',
   color: 'rgba(151, 151, 151, 1)',
   useHTML: true,
   zIndex: zIndex,
   states: {
     hover: {
       enabled: false
     }
   }
 }

我的问题是线路一直到底部，而不是停在红圈。我无法想出让这条线停下来的聪明方法。

我尝试过的一些事情：

1. 使用Highstock的onSeries - 这里的问题是气泡的位置现在基于yPosition与圆的位置。我已经编写了逻辑，以避免将两个盒子放在彼此之上，如果它们都有不同的起始位置，那么这个逻辑就更加困难和严格。标志的y值是一个像素值，而不是yAxis的比例，这说明了这个难点。

2. 使用标记间距 - 这仅适用于相同值的标记，左侧或右侧的标记将重叠。

3. 使用从红点到文字气泡的线形图 - 这里的问题是，红点的位置可以很容易找到，因为我知道它＆ ＃39; s yAxis值，但文本气泡的位置再次是像素值，与yAxis的比例不同。

我正在寻找任何方式来显示文字气泡，以便它们不重叠。我猜想，我最好的希望是有一些方法可以在标志上使用yAxis的比例，或者我可以使用其他方法放置使用yAxis比例的文本气泡。

寻找任何建议。谢谢！

Answer 1

将onSeries添加到您的旗帜See Here。您需要使用系列的ID填充它，否则如果它是空白，它将绘制到X轴。 Also See

{
   type: 'flags',
   y: yPosition,
   name: 'Flags on series',
   showInLegend: false,
   onSeries : '',
   data: [{
     x: xPosition,
     title: '<span class="status-legend ' + $filter('status')(impactType) + '"></span>'+'<span style="font-size: 14px; font-family: \'MyriadPro-Regular\'; color: white">' + date + ': ' + title + '</span><br>' + text + '<br>' + impact + '<br>'
   }],
   shape: 'squarepin',
   style: {
     fontSize: '12px',
     fontWeight: 'normal',
     fontFamily: 'MyriadPro-Regular',
     textAlign: 'left',
     color: '#E7E7E7'
   },
   fillColor: 'rgba(151, 151, 151, 1)',
   color: 'rgba(151, 151, 151, 1)',
   useHTML: true,
   zIndex: zIndex,
   states: {
     hover: {
       enabled: false
     }
   }
 }