2016-04-13 18 views
7

plotly.js में टिक लेबल के लिए और अधिक जगह देना संभव है? मेरे चार्ट में लंबे लेबल कट ऑफ हो रहे हैं।plotly.js चार्ट में लंबे टिक लेबल काट रहा है

enter image description here

HTML:

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

जावास्क्रिप्ट:

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

मैं कैसे API for y-axes tick settings में यह करने के लिए नहीं देख सकता।

मेरे चार्ट की प्रकृति को देखते हुए, मुझे क्षैतिज अभिविन्यास का उपयोग करने की आवश्यकता है। तो मैं जिस समाधान का उपयोग नहीं कर सकता वह एक लंबवत अभिविन्यास है जिसमें 90 डिग्री घुमाए गए टिक हैं।

+0

ऑटो-मार्ज नियोजित अतिरिक्त है। इस समस्या का पालन करें https://github.com/plotly/plotly.js/issues/296 – eagor

उत्तर

9

आप कुछ और जगह देने के लिए साजिश चार्ट के मार्जिन समायोजित कर सकते हैं। उदाहरण के लिए, बदलने के लिए:

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

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

आप यहाँ मार्जिन का समायोजन के बारे में अधिक पढ़ सकते हैं: यहाँ https://plot.ly/javascript/setting-graph-size/ और समग्र लेआउट विकल्प: https://plot.ly/javascript/#layout-options

1

तुम भी गतिशील रूप से मार्जिन सेट कर सकते हैं, के आधार लेबल की लंबाई पर:

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 
    } 
}; 
संबंधित मुद्दे