Highstock/Highcharts - yAxis Label oben

Mit Highstock oder Highcharts möchte ich mein yAxis-Label auf der Oberseite. Was ich nicht will, ist ein variierender Abstand zwischen dem linken Rand des Diagramms und dem Anfang der Rasterlinien.Highstock/Highcharts - yAxis Label oben

Wenn Sie einen Blick auf die folgende Geige: JSFiddle

Relevante Teil ist:

yAxis: { 
    title: { 
     align: 'high', 
     offset: 0, 
     text: 'Rainfall (mm)', 
     rotation: 0, 
     y: -10 
    } 
}

Das ist fast richtig, aber die Offset-Marge von der Etikettenbreite genommen wird. Wenn ich stattdessen offset: -41 einstelle, sieht es genau richtig aus. Das Problem ist, dass die -41 aufgrund der gerenderten Länge des Textes ist. Wenn ich den Text auf eine andere Länge ändere, wird das Label wieder falsch positioniert.

Gibt es eine Möglichkeit sicherzustellen, dass die Positionen in meiner obigen Definition von "richtig" immer korrekt sind, unabhängig von der Textlänge?

Screenshot, linker Teil falsch, richtig ist Teil richtig:

Quelle

2016-07-12 MilConDoin

Ich denke, dass Sie Text-Anker-Eigenschaft verwenden können, um Ihren Titel zu stylen, hier können Sie weitere Informationen über Text-Anker erhalten: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribut/Textanker und hier finden Sie Live-Beispiel mit dieser Option: http://jsfiddle.net/Ljwp7694/ –

@ GrzegorzBlachliński Machen Sie das eine Antwort, und Sie erhalten das Akzeptierungszeichen. Ich habe die fehlenden Parameter von deiner Geige. – MilConDoin

Glücklich zu lesen, dass mein Beispiel für Sie arbeitete. Ich habe es als Antwort gepostet. –

Ich denke, dass Sie Text-Anker-Eigenschaft verwenden, können Sie Ihren Titel stylen. Hier finden Sie weitere Informationen über Textanker Immobilien finden: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

title: { 
    align: 'high', 
    text: 'Rainfall (mm)', 
    style: { 
     'text-anchor': 'start' 
    }, 
    rotation: 0, 
    y: -10, 
    x: -25 
    },

Ich denke, dass Sie benötigen auch chart.marginLeft Parameter zu verwenden. Es gibt Ihnen die Möglichkeit, einen bestimmten linken Rand für Ihr Diagramm festzulegen. Hier finden Sie Informationen dazu. http://api.highcharts.com/highcharts#chart.marginLeft

Sie auch xAxis.labels.reserveSpace Parameter auszuschalten reservieren Platz für Etiketten verwenden: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace

Hier können Sie Live-Beispiel finden, wie Sie Ihre Tabelle können diese Möglichkeiten arbeiten: http://jsfiddle.net/Ljwp7694/

Mit freundlichen Grüßen,

Quelle

2016-07-12 12:47:05

Es war nicht allein der 'Textanker', der geholfen hat. Es war eine Kombination aus 'chart: {marginLeft: 50}', 'labels: {reserveSpace: false}' zusammen mit den 'title' Optionen, die den Trick gemacht haben. – MilConDoin

Natürlich bietet Ihnen marginLeft die Möglichkeit, einen bestimmten Abstand für Ihr Diagramm festzulegen, die reserveSpace-Option ist ebenfalls hilfreich. Ich werde meine Antwort mit diesen Informationen aktualisieren. –

Highstock/Highcharts - yAxis Label oben

Antwort

Verwandte Themen