Highcharts - Überlappende Scatterplot-Etiketten sind nicht lesbar

Question

Ich möchte alle Datenbeschriftungen für ein Streudiagramm mit Highcharts übersichtlich anzeigen.

Ich habe ein Punktdiagramm, wo die Möglichkeit besteht, dass die Punkte sich überlappen oder sehr nahe beieinander liegen. Standardmäßig blendet Highcharts überlappende Labels aus, aber alle Labels müssen sichtbar sein. Ich habe versucht, 'allowOverlap: true' zu setzen. Dadurch werden alle Beschriftungen wie gewünscht angezeigt, aber die Beschriftungen sind nicht immer lesbar. Gibt es einen saubereren Weg, um sicherzustellen, dass alle Etiketten in einem Punktdiagramm sichtbar sind oder jemand überlappende Etiketten erkennen und ausgleichen konnte?

JSFiddle wo nur drei von vier Etiketten angezeigt werden: https://jsfiddle.net/jholwell/vbc58Luh/

Highcharts.chart('container', { 
    series: [{ 
     data: [[1, 1], [1.8, 1.8], [1.9, 1.8], [5, 2]], 
     type: 'scatter' 
    }], 
    plotOptions: { 
     scatter: { 
     dataLabels: { 
      enabled: true, 
     } 
     } 
    } 

}); 

Answer 1

Highcharts derzeit doesn't have collision detection for labels, aber Gebäude auf an answer to a similar question, können Sie Ihre eigenen Kollisionsdetektor (hier: staggerDataLabels()) implementieren und auf dem Chart laufen load und redraw Ereignisse:

Highcharts.chart('container', { 
    chart: { 
    events: { 
     load: function() { 
     staggerDataLabels(this.series); 
     }, 
     redraw: function() { 
     staggerDataLabels(this.series); 
     } 
    }, 
    }, 
    ... 
}); 

function staggerDataLabels(series) { 
    ... 

https://jsfiddle.net/vbc58Luh/2/