x Achsbeschriftung Zeilenumbruch in High-Charts Radarkarte

Question

Im Versuch, das X-Achse-Label für Radar-Chart in highchart einzustellen und ich könnte nicht die 2-Etiketten beheben. wenn seine auf geringe Breite Bildschirm, sind einige Etiketten nicht vollständig gesehen. Der Screenshot angebracht ist img

Hier ist die Geige Link:

https://jsfiddle.net/xs9zb3f6/6/enter code here

kann jemand bitte helfen? Ich möchte, dass die Beschriftungen entweder innerhalb des Radardiagramms oder des Zeilenumbruchs ausgerichtet werden, so dass das Wort bei einem kleinen Bildschirm nicht abgeschnitten wird.

Answer 1

Sie können Ihre eigene Funktion zum Verschieben von Etiketten schreiben.

Get bbox des Label-Element und prüfen, ob es im Inneren des Behälters (> = 0 oder < = Behälterbreite). Eine Einschränkung in bbox bekommen - die Etiketten gedreht werden, so bedeutet dies, dass die bbox Sie bekommen params des Elements hat, die noch nicht gedreht wird - in Ihrem Fall, wenn die Drehung nicht ändern Text viel Breite - Sie einige Pixel hinzufügen können, um Versetze diesen Unterschied.

function moveLabels() { 
    const ticks = this.xAxis[0].ticks; 
    const safeDistance = 10; 

    Object.keys(ticks).forEach(value => { 
    const label = ticks[value].label; 
    const bbox = label.getBBox(true); 

    if (bbox.y >= 0) { 
     if (bbox.x - safeDistance < 0) { 
     label.attr({ 
      x: label.xy.x + Math.abs(bbox.x - safeDistance) 
     }) 
     } else if (bbox.x + bbox.width + safeDistance > this.chartWidth) { 
     label.attr({ 
      x: label.xy.x - (bbox.x + bbox.width + safeDistance - this.chartWidth) 
     }); 
     } 
    } 
    }) 
} 

Verschieben Etiketten auf Last/Ereignisse neu zu zeichnen:

chart: { 
polar: true, 
    type: 'line', 
    events: { 
     load: moveLabels, 
     redraw: moveLabels 
    } 
    }, 

Beispiel: https://jsfiddle.net/nd5fob5d/