Links Y-Achse Titel mit Beschriftungen in Highcharts

Question

In Highcharts möchte ich die Y-Achse Titel an der Spitze und haben es links ausgerichtet mit den Y-Achsenbeschriftungen.

Ich habe dies versucht:

$('#container').highcharts({ 
    ... 
    yAxis: { 
     ... 
     title: { 
      align: 'high', 
      text: 'Y-axis title', 
      rotation: 0, 
      y: -10, 

      //To left-align title with labels 
      textAlign: 'left', //This is undocumented, but appears to work 
      margin: 0 
     } 
    } 
}) 

Allerdings bekomme ich einen übermäßigen linken Rand, die mit der Länge des y-Achse Titel proportional zu sein scheint.

JsFiddle

Es sieht aus wie die Margin-Berechnung berücksichtigt nicht die textAlign: 'left' Einstellung.

UPDATE: Ich sollte sagen, dass meine aktuelle "Lösung" ist, einen Rand mit chart.marginLeft zu setzen, aber das ist nicht ideal, weil es behoben ist. Der linke Rand sollte gerade groß genug sein, um die Achsenbeschriftungen aufzunehmen (wie groß sie auch sein mögen).

Wie kann ich den Titel der y-Achse linksbündig ausrichten und einen angemessenen linken Rand haben?

Answer 1

Ich entschied mich, marginLeft zu verwenden (ja, Sie lesen das richtig), aber basierend auf der Länge Ihrer Achse Etikett, um die erforderliche Flexibilität bereitzustellen.

Was ich hier getan habe, ist Ihre Diagrammoptionen auf eine Variable namens chartOptions festgelegt. Ich berechnete dann die Länge (Anzahl der Zeichen) des Achsentitels, setzte die Eigenschaft marginLeft basierend auf diesem Wert und zeichnete dann das Diagramm mit den geänderten Diagrammoptionen.

chartOptions.chart.marginLeft = chartOptions.yAxis.title.text.length; 
var chart = $('#container').highcharts(chartOptions); 

Hier ist die Arbeits Geige: http://jsfiddle.net/brightmatrix/6eeuay58/9/

ich es mit einer unterschiedlichen Anzahl getestet, indem einige Ihrer Datenpunkte zu erhöhen.

Bitte lassen Sie mich wissen, ob dies nützlich und hilfreich für Sie ist.