Данные диаграммы пузырьков HighchartsLabels перекрываются, несмотря на z-индекс

Question

У меня проблема с пузырьковой диаграммой. На самом деле, у меня есть несколько точек, которые имеют одинаковые координаты с другим именем и, возможно, другого размера (точка z). Для этих точек у меня есть суперпозиция меток. Решение z-index не работает (https://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlappinghttps://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlapping).

Кто-нибудь знает о каком-либо решении этой проблемы?

Я думал сделать соединитель ярлыка, как круговая диаграмма, но я не знаю, как это сделать.

Мой код:

$(function() { 
    $('#container').highcharts({ 
     credits: { 
      enabled: false 
     }, 
     chart: { 
      type: 'bubble', 
      zoomType: 'xy' 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
        categories:['R0', 'R1', 'R2','R3', 'R4', 'R5', 'R6'] 
     }, 
     yAxis: { 
      title: { 
       text: '' 
      } 
     }, 
     plotOptions: { 
        bubble: { 
         dataLabels: { 
          enabled: true, 
          useHTML: true, 
          //inside: false, 
          //y:-10, 
          //overflow: false, 
          //crop: false, 
          style: { textShadow: 'none',fontSize: '10px',color:'black' }, 
          formatter: function() { 
           return "<i>" + this.point.name.split(' ').join('<br>') + "</i>"; 
          } 
         }, 
         tooltip : { 
              headerFormat: '<b>{series.name}</b><br>', 
              pointFormat : 'S : <i>{point.name}</i><br>Y : {point.y}<br>Num : {point.z}' 

             } 
        } 
       }, 
     series: [ 
      { 
      name: 'Sample1', 
      marker: { fillColor: '#89A54E' }, 
      data: [ 
      { name:'A',x:2,y:0.0,z:47}, 
      { name:'Z',x:3,y:1.0,z:35}, 
      { name:'E',x:4,y:0.5,z:9}, 
      { name:'R',x:0,y:1.0,z:34}, 
      { name:'T',x:3,y:0.0,z:37}, 
      { name:'T',x:2,y:0.0,z:22}, 
      { name:'p',x:0,y:1.0,z:39}, 
      { name:'m',x:2,y:0.5,z:47}, 
      { name:'h',x:0,y:0.5,z:48}, 
      { name:'l',x:5,y:1.0,z:25}, 
      ] 
      }, 
      { 
      name: 'Sample2', 
      marker: { fillColor: '#92A8CD' }, 
      data: [ 
      { name:'AB',x:2,y:0.5,z:23}, 
      { name:'CA',x:6,y:0.5,z:19}, 
      { name:'OP',x:3,y:0.5,z:21}, 
      { name:'CP',x:1,y:0.75,z:38}, 
      { name:'TS',x:3,y:1.0,z:13}, 
      { name:'SP',x:0,y:1.0,z:43}, 
      { name:'SE',x:4,y:1.0,z:2}, 
      { name:'CS',x:6,y:0.5,z:48}, 
      { name:'CL',x:1,y:0.5,z:5}, 
      { name:'H',x:1,y:0.0,z:11}, 
      ] 
      } 
     ] 
    }); 
}); 

Answer 1

Видимо есть labelrank свойства на точечных объектах Highcharts, которые могут быть использованы, чтобы диктовать, которые точечные метки на вершине. Он может быть использован, когда вы создаете ваши данные, как это:

data: [{ 
     x: 1, y: 1, labelrank: 1, name: 'A' 
     },{ 
     x: 1, y: 1, labelrank: 2, name: 'B' 
     }] 

Или он может быть обновлен на отдельной точке, чтобы принести dataLabel, что точка на фронте, делая что-то вроде этого: chart.series[0].points[0].update({labelrank: 3});

I имел аналогичную проблему и создал this вопрос о SO, на который был дан ответ.

EDIT

Они обновили свои документы, чтобы включить series.data.labelrank, а также: http://api.highcharts.com/highcharts#series.data.labelrank