Highchart dataLabels Neupositionierung auf Überlappung

Question

ich eine Highchart Komponente habe, wo die Benutzer Kommentare zu einem Diagramm hinzufügen können, und der Kommentar zeigt als DATALABEL in einer Streu Serie auf. Mir ist jedoch aufgefallen, dass die allowOverlap standardmäßig nur die kollabierenden dataLabels entfernt, und meine Frage dazu lautet: Wäre es möglich, die kollidierenden dataLabels übereinander zu stapeln? Ich denke, dass, da die allowOverlap: true erkennen kann, welche kollidieren, könnte es einen Weg geben, davon zu profitieren? Diese

ist, wie mein dataLabels jetzt aussehen:

Das ist mein Ziel:

Hoffnung, dass jemand mir mit einer cleveren Lösung helfen kann, ich weiß, dass ich aus Ideen bin!

Übrigens, die DataLabels erhalten jetzt ihre xAxis-Position, indem sie die xAxis :{ max: value } durch 1,5 teilen. Dies ist nur, um es gleichmäßig auf alle meine Diagramme, die alle min und max Werte haben. Könnte erwähnenswert sein.

Answer 1

Es ist möglich, die funciton außer Kraft zu setzen, die die überschneidende Beschriftungen und Position der überlappenden Labels wie dies verstecken sollte anpassen:

$(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 in JSFiddle: http://jsfiddle.net/ozLtvwke/1/