Nhãn đánh dấu dài bị cắt trong biểu đồ plotly.js

Question

Có thể cung cấp thêm chỗ cho nhãn đánh dấu trong plotly.js không? Nhãn dài trong biểu đồ của tôi bị cắt.

HTML:

<div id="plot"></div> 

JavaScript:

var data = [{ 
    type: 'bar', 
    x: [20, 14, 23], 
    y: ['giraffes', 'orangutans', 'a looooooooong string'], 
    orientation: 'h' 
}]; 

var layout = { 
    title: 'Bar Chart' 
}; 

Plotly.newPlot('plot', data, layout); 

Tôi không thể nhìn thấy làm thế nào để làm điều này trong API for y-axes tick settings.

Với bản chất của biểu đồ, tôi cần sử dụng hướng ngang. Vì vậy, một giải pháp tôi không thể sử dụng là một hướng dọc với ve quay 90 độ.

Answer 1

Bạn có thể điều chỉnh lề của biểu đồ lôgic để có thêm không gian. Ví dụ, thay đổi:

var layout = { 
    title: 'Bar Chart' 
}; 

để

var layout = { 
    title: 'Bar Chart', 
    margin:{ 
    l:200 
    } 
}; 

bạn có thể đọc thêm về điều chỉnh lề ở đây: https://plot.ly/javascript/setting-graph-size/ và tổng thể tùy chọn bố trí ở đây: https://plot.ly/javascript/#layout-options

Answer 2

Bạn cũng có thể thiết lập lề tự động, dựa trên độ dài nhãn:

var maxLabelLength = d3.max(data, d => d3.max(d.y, label => label.length)); 
const letterWidth = 7; 
var layout = { 
    title: 'Bar Chart', 
    margin:{ 
    l: maxLabelLength * letterWidth 
    } 
};