घूर्णन एक्स-एक्सिस लेबल ग्राफ़ को ओवरलैप करते हैं

Question

मैं घुमावदार एक्स-अक्ष लेबल के साथ संघर्ष कर रहा हूं। यदि वे 5-6 वर्णों से अधिक हैं, तो वे ग्राफ को ओवरलैप करते हैं जैसा कि आप यहां देख सकते हैं: http://jsfiddle.net/kmfT9/215/ यदि यह प्रदर्शित नहीं होता है, तो आप एक जेएसफ़ाइल विंडो में कोड के नीचे चिपकने वाली त्रुटि को पुन: पेश कर सकते हैं।

var chart = new Highcharts.Chart({ 

chart: { 
renderTo: 'container', 
marginLeft: 120 
}, 

xAxis: { 
categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45 } 
}, 

yAxis: { 
lineWidth: 1, 
offset: 0, 
labels : { x: -20 }, 
title: { 
text: 'Primary Axis' 
}, 
tickWidth: 1 
}, 

series: [{ 
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
}] 

}); 

हालांकि लेबल संपत्ति पर वाई-वैल्यू सेट करने के बावजूद यह केवल छोटे लेबलों के लिए सम्मानित है।

कोई भी समाधान जानता है या मैं क्या गलत कर रहा हूं?

Answer 1

आप संरेखण जोड़ने का प्रयास कर सकते हैं: x-axis लेबल ऑब्जेक्ट पर 'दाएं'।

उदा।

 
xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45, align: 'right' } }, 

Answer 2

कभी कभी तुम कि ग्राहकों को चाहता है क्या करना चाहिए, और मैं जिस तरह से पता है कि नीचे यह सबसे अच्छा तरीका है नहीं है, लेकिन यह किसी को मदद मिलेगी हो सकता है)। इसलिए जैसा कि मुझे पता है, हाई-चार्ट चार्ट को देखने के लिए दो तरीकों का उपयोग करता है। यह SVG (उदाहरण के लिए क्रोम, आईई> 8 ब्राउज़र समर्थित) और VML (आईई < = 8 द्वारा समर्थित) है। इसलिए प्रत्येक तरीके में ऐसे बिंदु होते हैं जहां इस समस्या को हल किया जा सकता है जिसे आपको नरम तोड़ने की आवश्यकता होती है।

एसवीजी में यह हल करने के लिए आप buildText समारोह खोजने के लिए और इस बिंदु पर संशोधित करने के लिए है:

// check width and apply soft breaks 
if (width) { 
... 
} 

नई अलग प्रतीक जोड़ने के लिए उदाहरण के लिए

:

... 
var words = span.replace(/\\/g, '\\ ').replace(/-/g, '- ').split(' '), 
... 
tspan.appendChild(doc.createTextNode(words.join(' ').replace(/\\ /g, '\\').replace(/- /g, '-'))); 
... 

आप यह काम बनाना चाहते हैं वीएमएल में संभावना आप अपनी खुद की समारोह है कि एक ही buildText समारोह में उस कोड बनाने के लिख सकते हैं:

function softBreaks() 
     { 
      //if ie and vml 
      hasSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect; 
      if(!hasSVG) 
      { 
       //for each 
       $.each($('.highcharts-axis > span > div'), function(index, value) { 

        var width = value.parentNode.style.posWidth; 
        var div = value; 
        if (width) { 
         var words = value.innerText.replace(/\//g, '/ ').replace(/\\/g, '\\ ').replace(/\./g, '. ').replace(/-/g, '- ').split(' '), 
         tooLong, 
         actualWidth, 
         rest = []; 

         while (words.length || rest.length) { 

          //actualWidth = value.parentNode.offsetWidth; 
          actualWidth = value.parentNode.scrollWidth; 
          tooLong = actualWidth > width; 

          if (!tooLong || words.length === 1) { // new line needed 
           words = rest; 
           rest = []; 
           if (words.length) { 
            div = document.createElement("div"); 
            value.parentNode.appendChild(div); 
            if (actualWidth > width) { // a single word is pressing it out 
             width = actualWidth; 
            } 
           } 
          } else { 
           div.removeChild(div.firstChild); 
           rest.unshift(words.pop()); 
          } 
          if (words.length) { 
           div.appendChild(document.createTextNode(words.join(' ').replace(/\/ /g, '/').replace(/\\ /g, '\\').replace(/\. /g, '.').replace(/- /g, '-'))); 
          } 
         } 
        } 
       }); 
      } 
     } 

और इस के बाद आप www.highcharts.com/ref/#chart-events--load जब चार्ट भरी हुई इस समारोह कॉल करना होगा (क्षमा करें मैं नया उपयोगकर्ता)। यदि आपके पास पृष्ठ पर कई चार्ट हैं तो आप softBreaks() फ़ंक्शन पर पैरामीटर चार्ट आईडी के रूप में पास कर सकते हैं।