2012-09-20 14 views
5

में कॉलम ओवरलैप को रोकने के लिए कैसे मेरा मानना ​​है कि यह एक सामान्य प्रश्न है जो मेरे उच्चतर डेटा से अधिक जानकारी की आवश्यकता नहीं है।हाइचार्ट्स

मैं स्तंभों को एक-दूसरे पर ढेर/ओवरलैप करने के लिए रोकना चाहता हूं, मैं यह कैसे कर सकता हूं?

देखें कैसे यह अब पर नीचे दी गई छवि लिंक

http://highslide.com/forum/download/file.php?id=3157

jsfiddle: http://jsfiddle.net/Dzs5q/

+2

jsFiddle कृपया –

उत्तर

11

कोशिश करते हैं और डिफ़ॉल्ट रूप से यहां त्रुटि पुन: पेश @http://jsfiddle.net/jugal/bgNBG/

Highcharts चालाकी स्तंभों की चौड़ाई कम कर देता है वहाँ इतनी के रूप में अतिव्यापी से बचने के लिए कर रहे हैं जिस तरह से भी उनमें से कई कृपया ।

कॉलम ओवरलैप करते हैं अगर आप column.pointWidth

column: {   
     pointWidth : 10 
    } 

जैसे निर्दिष्ट करने के द्वारा ऊपर उल्लिखित डिफ़ॉल्ट व्यवहार अधिरोहित है @http://jsfiddle.net/jugal/bgNBG/2/

तो अतिव्यापी से बचने के लिए, मैं दो विकल्प आपके पास देखते हैं।

विकल्प # 1। @http://jsfiddle.net/jugal/bgNBG/

विकल्प 2 #:column.pointWidth
यह आदेश नहीं ओवरलैप
जैसे में स्तंभों पतली कर देगा निकालें।
column.dataGrouping
इसका उपयोग कॉलम की निरंतर चौड़ाई में मदद करेगा, लेकिन अव्यवस्था/ओवरलैप से बचने के लिए कॉलम की संख्या को कम करने (उन्हें समूहित करके) कम करने में मदद मिलेगी।

dataGrouping = { 
    groupPixelWidth: 40, // Minimum width for each column 
    units: [[   // Permissible groupings 
     'day', 
     [1, 2, 3,4,5,6] // 1,2,3,4,5,6 days may be grouped into 1 column 
     ]] 
} 

उदाहरण के लिए: @http://jsfiddle.net/jugal/JraJW/4/
इसी प्रकार के प्रश्न @https://stackoverflow.com/a/12354111/1566575

+0

प्रतिक्रिया के लिए धन्यवाद, लेकिन मैं कुछ भी समूह नहीं कर सकता। –

+1

धन्यवाद, मैं वास्तव में ओवरलैपिंग चाहता था और इस जवाब ने मुझे सही दिशा में इंगित किया :) –

-1

कॉलम को नियंत्रित करने और बनाने के लिए सबसे अच्छा तरीका है सुनिश्चित करें कि वे ढेर नहीं है/एक दूसरे पर ओवरलैप चार्ट की चौड़ाई को नियंत्रित करके है। आप इसे <div> युक्त कर सकते हैं।

  • CSS: min-width ~ div को आकार बदलने की अनुमति देता है, लेकिन इसे एक निश्चित चौड़ाई के नीचे जाने से प्रतिबंधित करता है। आप ऐसा इसलिए करते हैं क्योंकि आप जानते हैं कि एक बार यह चौड़ाई के सामान के नीचे एक साथ धुंधला होना शुरू हो जाता है और अपठनीय है।
  • CSS: width ~ चार्ट की चौड़ाई को एक निश्चित मूल्य की अनुमति देता है।
  • CSS: no width set ~ ध्यान दें कि यदि आप ब्राउज़र विंडो को नीचे तक छोटा करते हैं तो यह चार्ट को अपठनीय बनाने के लिए शुरू होता है।

युक्त div की चौड़ाई को नियंत्रित करके और लेबल को c0deNinja के रूप में घुमाने के द्वारा, आप अधिकांश स्टैक ओवर/ओवरलैप मुद्दों को रोक सकते हैं। हालांकि, यदि आपके चार्ट में कई श्रृंखला/डेटा पॉइंट हैं, तो इससे भी मदद नहीं मिलेगी।

+0

उत्तर के लिए धन्यवाद, लेकिन यह विकल्प वांछित नहीं है। मुझे पता है कि दिए गए कॉलम के लिए जगह है, और चौड़ाई तय की गई है –

-1

मेरे समस्या समान था और मैं समाधान जो माध्यमिक अक्ष आदि करने के लिए आइटम ले जाया साथ कहीं नहीं हो रही थी तब मैंने पाया मेरी एक्स अक्ष में मान्यता प्राप्त किया जा रहा था एक निरंतरता के रूप में (इस मामले में: तिथि) और दो ओवरलैपिंग कॉलम निश्चित रूप से एक ही एक्स मान साझा कर रहे थे।

मैंने एक्स अक्ष का चयन करके समस्या हल की, "अक्ष प्रकार" नामक विकल्प मिला और इसे "टेक्स्ट अक्ष" में बदलकर "डेटा के आधार पर स्वचालित रूप से चयन करें" का चयन रद्द कर दिया। यह मेरे कॉलम पक्ष के साथ मिल गया।

आपकी समस्या के लिए थोड़ा अतिदेय लेकिन शायद सहायक।

संबंधित मुद्दे