Highcharts Align Daten Label basierend auf positiven/negativen Wert

Question

Ich erzeuge ein Balkendiagramm und derzeit sind alle Datenetiketten nach rechts ausgerichtet.

Für positive Werte möchte ich die Datenbeschriftung rechts von der Leiste ausrichten und für negative Werte möchte ich die Datenbeschriftung auf der linken Seite der Leiste ausgerichtet.

Wie kann ich das erreichen?

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'] 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true, 
        align: 'right', 
        inside: true 
       } 
      } 
     }, 
     series: [{ 
      data: [107, 31, 635, -203, -300] 
     }] 
    }); 
}); 

http://jsfiddle.net/tf2khzh2/1/

Answer 1

Es gibt wahrscheinlich durchaus ein paar Möglichkeiten, dies zu tun. Eine Möglichkeit ist das Setzen von punktspezifischen dataLabels Objekten. Je nach Größe Ihrer Daten dies direkt auf den Reihendaten durchgeführt werden könnte, wie dies (JSFiddle):

series: [{ 
    data: [107, 31, 635, { y: -203, dataLabels: { align: 'left' } }, { y: -300, dataLabels: { align: 'left' } }] 
}] 

Oder Sie könnten beispielsweise die Callback-Funktion verwenden, wenn die Diagramm Schleife über Ihre Serie zu initialisieren und Set es in der gleichen Art und Weise, wie diese (JSFiddle):

$('#container').highcharts({ 
    series: [{ 
     data: [107, 31, 635, -203, -300] 
    }] 
    // ... 
}, function() { 
    for(var i = 0; i < this.series.length; i++) { 
     for(var j = 0; j < this.series[i].points.length; j++) { 
      var point = this.series[i].points[j]; 

      if(point.y < 0) { 
       point.update({ dataLabels: { align: 'left'} }, false); 
      } 
     } 
    } 

    this.redraw(); 
}); 

Ein alternativer Ansatz, den ich nur beschreiben mehrere Serien ist, eine für die positive und eine für negative und dann link them und verschiedene align Spezifikationen für jede verwenden Serie.