2016-04-13 47 views
7

plotly.js adresindeki onay etiketleri için daha fazla yer vermek mümkün mü? Haritalarımdaki uzun etiketler kesiliyor.pplely.js grafiğinde uzun kene etiketleri kesiliyor

enter image description here

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

ben API for y-axes tick settings içinde bunun nasıl göremez.

Grafiklerimin niteliği göz önüne alındığında, yatay bir yönelimi kullanmam gerekiyor. Bu yüzden kullanamadığım bir çözüm 90 derece döndürülen kene ile dikey bir yönelim.

+0

auto-marg planlanan eklenmiştir. bu sorunu takip edin https://github.com/plotly/plotly.js/issues/296 – eagor

cevap

9

Kendinize biraz daha yer açmak için arsa grafiklerinin kenar boşluklarını ayarlayabilirsiniz. Örneğin, değiştirin:

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

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

için burada marjları ayarlama hakkında daha fazla bilgi edinebilirsiniz: https://plot.ly/javascript/setting-graph-size/ ve genel düzen seçeneklerini burada: Ayrıca dinamik marj ayarlayabilirsiniz https://plot.ly/javascript/#layout-options

1

, esaslı etiketin uzunluğu:

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