Highcharts dataLabels reposition on overlap

Question

У меня есть компонент Highcharts, где пользователь может добавлять комментарии к графику, а комментарий отображается как dataLabel в серии разброса. Тем не менее, я заметил, что по умолчанию allowOverlap просто удаляет связанные с DataLabels, и мой вопрос: можно ли сделать столбец DataLabels друг на друга? Я думаю, что, поскольку allowOverlap: true может обнаружить, какие из них сталкиваются, может быть способ воспользоваться этим?

Это как мои dataLabels теперь посмотрите:

Это моя цель:

Надеется, что кто-то может помочь мне с умным решением, я уверен, что знаю, я из идей!

Кстати, сейчас данныеLabels получают свое положение xAxis путем деления xAxis :{ max: value } на 1,5. Это просто, чтобы поместить его одинаково на всех моих графиках, которые имеют разные значения min и max. Может быть, стоит упомянуть.

Answer 1

можно переопределить Funciton, которые должны быть Скрытие перекрывающихся меток и отрегулировать положение перекрывающихся меток, как это:

$(function() { 
 
    (function(H) { 
 
    var each = H.each, 
 
     UNDEFINED; 
 

 
    H.Chart.prototype.hideOverlappingLabels = function(labels, rerun) { 
 
     if (rerun === UNDEFINED || 
 
     rerun < 10) //infinity loop limit 
 
     { 
 
     var doTheRerun = false, 
 
      len = labels.length, 
 
      label, i, j, label1, label2, 
 
      isIntersecting, pos1, pos2, parent1, parent2, 
 
      padding, 
 
      intersectRect = function(x1, y1, w1, h1, x2, y2, w2, h2) { 
 
      return !(
 
       x2 > x1 + w1 || 
 
       x2 + w2 < x1 || 
 
       y2 > y1 + h1 || 
 
       y2 + h2 < y1 
 
      ); 
 
      }; 
 
     for (i = 0; i < len; i++) { 
 
      label = labels[i]; 
 
      if (label) { 
 
      label.oldOpacity = label.opacity; 
 
      label.newOpacity = 1; 
 
      } 
 
     } 
 
     labels.sort(function(a, b) { 
 
      return (b.labelrank || 0) - (a.labelrank || 0); 
 
     }); 
 
     for (i = 0; i < len; i++) { 
 
      label1 = labels[i]; 
 
      for (j = i + 1; j < len; ++j) { 
 
      label2 = labels[j]; 
 
      if (label1 && label2 && label1.placed && label2.placed && label1.newOpacity !== 0 && label2.newOpacity !== 0) { 
 
       pos1 = label1.alignAttr; 
 
       pos2 = label2.alignAttr; 
 
       parent1 = label1.parentGroup; // Different panes have different positions 
 
       parent2 = label2.parentGroup; 
 
       padding = 2 * (label1.box ? 0 : label1.padding); // Substract the padding if no background or border (#4333) 
 
       isIntersecting = intersectRect(
 
       pos1.x + parent1.translateX, 
 
       pos1.y + parent1.translateY, 
 
       label1.width - padding, 
 
       label1.height - padding, 
 
       pos2.x + parent2.translateX, 
 
       pos2.y + parent2.translateY, 
 
       label2.width - padding, 
 
       label2.height - padding 
 
      ); 
 
       if (isIntersecting) { 
 
       (label1.labelrank < label2.labelrank ? label1 : label2).addHeightOffset = true; 
 
       } 
 
      } 
 
      } 
 
     } 
 

 
     each(labels, function(label) { 
 
      var complete, 
 
      newOpacity; 
 
      if (label) { 
 
      if (label.addHeightOffset && label.placed) { 
 
       label.alignAttr.y -= label.height; 
 
       label.addHeightOffset = false; 
 
       doTheRerun = true; 
 
      } 
 
      label['attr'](label.alignAttr); 
 
      } 
 
     }); 
 
     if (doTheRerun) { 
 
      rerun = (rerun || 0) + 1; 
 
      H.Chart.prototype.hideOverlappingLabels(labels, rerun); 
 
     } 
 
     } 
 
    }; 
 
    }(Highcharts)) 
 

 
    $('#container').highcharts({ 
 
    series: [{ 
 
     dataLabels: { 
 
     enabled: true, 
 
     format: 'The value that is important for this point is: {y}' 
 
     }, 
 
     data: [1, 2, 1, 1, 2, 2, 2] 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 400px"></div>

Demo в JSFiddle: http://jsfiddle.net/ozLtvwke/1/