x軸標籤自動換行高圖中的雷達圖表

Question

我試圖調整雷達圖的X軸標籤在高圖中，我不能修復2個標籤。當它在小寬度屏幕上時，一些標籤看不到完全。附截圖 img

這裏是小提琴鏈接：

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

可以有人幫忙嗎？我希望標籤可以進一步在雷達圖表或文字包裝的內部進行對齊，以便在小屏幕上不會剪切文字。

Answer 1

您可以編寫自己的功能來移動標籤。

獲取標籤元素的bbox並檢查它是否在容器內（> = 0或< =容器的寬度）。獲得bbox的一個警告 - 標籤是旋轉的，所以這意味着你得到的bbox有一個不旋轉的元素的參數 - 在你的情況下，當旋轉不會改變文本寬度 - 你可以添加一些像素抵消了這種差異。負載

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) 
     }); 
     } 
    } 
    }) 
} 

移動標籤/重繪事件：

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

例如：https://jsfiddle.net/nd5fob5d/