वास्तव में लंबी श्रेणी के नामों के साथ हाईचार्ट्स बार चार्ट से निपटने

Question

मेरे पास हाईचार्ट्स के साथ एक बार चार्ट बनाया गया है जो इसकी एक्स-अक्ष के लिए श्रेणियों का उपयोग करता है - वास्तव में लंबी शब्दशः श्रेणियां। मैं यह सुनिश्चित करने के लिए एक अच्छा तरीका नहीं समझ सकता कि श्रेणियां हमेशा एक पंक्ति पर रहें। मैं उन्हें तब तक संक्षिप्त नहीं कर सकता जब तक कि मैं माउस होवर-ओवर या किसी अन्य सहज उपयोगकर्ता इंटरैक्शन पर लंबे संस्करण को दिखाने के लिए टूलटिप या कुछ का उपयोग नहीं कर सकता। जब श्रेणियां लाइन-रैप होती हैं, तो यह टेक्स्ट की दीवार की तरह दिखने लगती है।

लंबी श्रेणियों और डेटा को एक साफ तरीके से प्रदर्शित करने के लिए कोई विचार? मैं एक अलग प्रकार के चार्ट पर विचार करने के लिए तैयार हूं जब तक यह एक स्पष्ट और अच्छे दिखने वाले तरीके से डेटा प्रदर्शित करता है। मैं हाईचार्ट्स के साथ रहना चाहता हूं लेकिन केवल तभी संभव हो।

संपादित: काफी प्रयास के बाद, मैं (IE6 +) जिस तरह से एक क्रॉस-ब्राउज़र में एक एक्स-अक्ष श्रेणी लेबल के लिए एक टूलटिप जोड़ने का विचार पर छोड़ दिया गया है। JQuery के साथ भी यह संभव या व्यावहारिक प्रतीत नहीं होता है। मैं अभी भी किसी भी समाधान की तलाश कर रहा हूं जो मुझे इन लंबी श्रेणियों को अच्छी तरह से प्रदर्शित करने की अनुमति देता है (मैं fiddle से पहले खुश नहीं हूं क्योंकि मैंने पहले बनाया था क्योंकि डेटा बार पर होवर करना उपयोगकर्ता के लिए पर्याप्त नहीं है)।

समस्या ग्राफ की एक तस्वीर, श्रेणियों ब्लैक आउट कर के साथ:

JSFiddle कोड:

HTML:

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
<div id='mytoolTip'></div> 

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

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'bar' 
      }, 
      title: { 
       text: 'Historic World Population by Region' 
      }, 
      subtitle: { 
       text: 'Source: Wikipedia.org' 
      }, 
      xAxis: { 
       categories: ['Africa blahblahblah blah blah blah ', 'America blahblahblah blah blah blah ', 'Asia blahblahblah blah blah blah', 'Europe blahblahblah blah blah blah ', 'Oceania blahblahblah blah blah blah '], 
        title: { 
         text: null 
        }, 
        labels: { 
         formatter: function() { 
          return(this.value.substring(0,10) + "..."); 
         } 
        }        
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Population (millions)', 
         align: 'high' 
        }, 
        labels: { 
         overflow: 'justify' 
        } 
       }, 
       tooltip: { 
        formatter: function() { 
         $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
         return false ; 
        } 
       }, 
       plotOptions: { 
        bar: { 
         dataLabels: { 
          enabled: true 
         } 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -100, 
        y: 100, 
        floating: true, 
        borderWidth: 1, 
        backgroundColor: '#FFFFFF', 
        shadow: true 
       }, 
       credits: { 
        enabled: false 
       }, 
       series: [{ 
        name: 'Year 1800', 
        data: [107, 31, 635, 203, 2] 
       }, { 
        name: 'Year 1900', 
        data: [133, 156, 947, 408, 6] 
       }, { 
        name: 'Year 2008', 
        data: [973, 914, 4054, 732, 34] 
       }] 
      }); 
     }); 
    }); 

Answer 1

इस बेला का प्रयास करें:http://jsfiddle.net/a6zsn/70/

हम ने वही समस्या है जो हम अंततः लेबल HTML का उपयोग करने की अनुमति देकर हल किया था। हालांकि हम नीचे पोस्ट किए गए सटीक समाधान के साथ नहीं गए थे, यह आपके लिए काम करना चाहिए क्योंकि यह होवर पर पूरा पाठ दिखाने के लिए jQueryUI टूलटिप विजेट का उपयोग करता है।

ध्यान दें कि मैं xAxis.labels ऑब्जेक्ट को कैसे परिभाषित कर रहा हूं।

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'bar', 
       events: { 
        load: function (event) { 
         $('.js-ellipse').tooltip(); 
        } 
       } 
      }, 
      title: { 
       text: 'Historic World Population by Region' 
      }, 
      subtitle: { 
       text: 'Source: Wikipedia.org' 
      }, 
      xAxis: { 
       categories: ['Africa is the best place to do safari. Label is soooo big that it iss ugly now. =(. -38023-8412-4812-4812-403-8523-52309583409853409530495340985 ', 'America is the best place you can ever live in ', 'Asia is the best food ever ', 'Europe best chicks ever on earth ', 'Oceania i dont know any thing about this place '], 
       title: { 
        text: null 
       }, 
       labels: { 
        formatter: function() { 
         var text = this.value, 
          formatted = text.length > 25 ? text.substring(0, 25) + '...' : text; 

         return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>'; 
        }, 
        style: { 
         width: '150px' 
        }, 
        useHTML: true 
      } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Population (millions)', 
        align: 'high' 
       }, 
       labels: { 
        overflow: 'justify' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
        return false ; 
       } 
      }, 
      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -100, 
       y: 100, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: '#FFFFFF', 
       shadow: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Year 1800', 
       data: [107, 31, 635, 203, 2] 
      }, { 
       name: 'Year 1900', 
       data: [133, 156, 947, 408, 6] 
      }, { 
       name: 'Year 2008', 
       data: [973, 914, 4054, 732, 34] 
      }] 
     }); 
    }); 

}); 

Answer 2

jsFiddle

काम कर टूल टिप चलती:

एचटीएमएल

<div id='mytoolTip'></div>​ 

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

tooltip: { 
      formatter: function() { 

       $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
       return false ; 
      } 
     }, 

यह कैसे आप उपकरण की नोक

मँडरा से श्रेणी के नाम पर प्राप्त कर सकते है

 this.key 

jsFiddle

Answer 3

लेबल

xAxis: { 
      categories: ['Foo afkhbakfbakjfbakfbnbafnbaf', 'Bar', 'Foobar'], 
      labels: { 
       formatter: function() { 
        return this.value.substring(0, 8); 
       } 
      } 
     },