हाईचार्ट्स में धुरी के लिए न्यूनतम ऊपरी बाउंड कैसे सेट करूं?

Question

मैं, एक न्यूनतम ऊपरी सीमा निर्धारित करने की कोशिश कर रहा हूँ विशेष रूप से:

• Y अक्ष शुरू कर देना चाहिए पर 0
• Y अक्ष कम से कम 10, या उच्चतर के पास जाना चाहिए (स्वचालित रूप से स्केल)
• वाई अक्ष के लिए ऊपरी बाउंड 10 से कम नहीं होना चाहिए

कुछ ऐसा लगता है जैसे हाईचार्ट करता है, लेकिन मुझे यह पता लगाना प्रतीत नहीं होता है। किसी के साथ इसका अनुभव है?

Answer 1

हाईचार्ट्स में चार्ट निर्माण समय पर ऐसा करने का विकल्प नहीं लगता है। हालांकि, वे चरम सीमाओं से पूछताछ करने और चरम सीमाओं को बदलने के लिए कुछ तरीकों का पर्दाफाश करते हैं, getExtremes() और setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) उनके documentation में पाए जाते हैं।

तो, एक संभव समाधान (चार्ट निर्माण के बाद):

if (chart.yAxis[0].getExtremes().dataMax < 10) { 
    chart.yAxis[0].setExtremes(0, 10); 
} 

yAxis[0] संदर्भ पहले y- अक्ष, और मैं यह सोचते कर रहा हूँ कि आप केवल इस मामले में एक धुरी है। doc बताता है कि अन्य अक्षों तक कैसे पहुंचे।

यह आदर्श नहीं है, क्योंकि चार्ट को फिर से निकालना है जो बहुत ध्यान देने योग्य नहीं है, लेकिन यह अभी भी वहां है। उम्मीद है कि, हाइचार्ट्स विकल्पों में निर्मित इस तरह की कार्यक्षमता प्राप्त कर सकते हैं।

Answer 2

HigtCharts के उदाहरणों के साथ सभी विधियों का वास्तव में अच्छा दस्तावेज है।

http://www.highcharts.com/ref/#yAxis--min

आपके मामले में मुझे लगता है कि आप "मिनट" और "yAxis" के "अधिकतम" गुण होना चाहिए।

मिनट: संख्या धुरी का न्यूनतम मूल्य। यदि शून्य मान स्वचालित रूप से गणना की जाती है। यदि startOnTick विकल्प सत्य है, तो न्यूनतम मान को गोलाकार किया जा सकता है। शून्य करने के लिए डिफ़ॉल्ट।

अधिकतम: संख्या धुरी का अधिकतम मूल्य। यदि शून्य है, तो अधिकतम मान स्वचालित रूप से गणना की जाती है। यदि एंडऑनटिक विकल्प सही है, तो अधिकतम मान को गोलाकार किया जा सकता है। वास्तविक अधिकतम मूल्य चार्ट.लिग्निक्स द्वारा भी प्रभावित होता है। शून्य करने के लिए डिफ़ॉल्ट।

आप अपने चार्ट बना रहे हैं गतिशील रूप से आप स्थापित करना चाहिए

मिनट = 0 अधिकतम = 10, अपने सभी डेटा मान रहे हैं कम 10

और

केवल मिनट = 0 , यदि आपके पास अधिक मूल्य है तो 10

शुभकामनाएं।

Answer 3

इसलिए की तरह अक्ष के न्यूनतम मूल्य और अक्ष इकाइयों में टिक के निशान के अंतराल सेट करके देखें:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    yAxis: { 
     min: 0, 
     max: 10, 
     tickInterval: 10 
    } 
}); 

इसके अलावा अधिकतम मूल्य निर्धारित करने के लिए मत भूलना।

उम्मीद है कि मदद करता है।

Answer 4

Julian D's very good answer में जोड़कर, निम्नलिखित संभावित पुन: स्थिति समस्या से बचा जाता है यदि आपकी गणना अधिकतम आपकी वांछित ऊपरी सीमा में अंकों की संख्या में भिन्न होती है।

मेरे मामले में मैं प्रतिशत डेटा वर्तमान में 20 के में जा रहा था, लेकिन मैं कम से कम 100 से 0 की एक श्रृंखला चाहता था, संभावना के साथ 100 से अधिक जाने के लिए यदि आवश्यक हो, तो कोड में & अधिकतम मिनट निम्नलिखित सेट है, तो यदि डेटामैक्स अधिक हो जाता है, तो इसके मूल्य तक अधिकतम पुन: असाइन किया जाता है। इसका मतलब यह है कि ग्राफ़ पोजिशनिंग को हमेशा "100" निचोड़कर टूटा हुआ 2-अंकों के लिए गणना के बजाय, 3-अंकों के मानों के लिए पर्याप्त कमरे के साथ गणना की जाती है, लेकिन इससे पहले समस्या होने से पहले "999" तक की अनुमति मिलती है।

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       thisSetMax = this.yAxis[0].getExtremes().max; 
       thisDataMax = this.yAxis[0].getExtremes().dataMax; 
       if (thisDataMax > thisSetMax) { 
        this.yAxis[0].setExtremes(0, thisDataMax); 
        alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax); 
       } 
      } 
     }   
    }, 
    title: { 
     text: 'My Graph' 
    }, 
    xAxis: { 
     categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013'] 
    }, 
    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      text: '% Due Tasks Done' 
     } 
    } 
    //Etc... 
}); 

Answer 5

एक तरह से यह विकल्प केवल का उपयोग कर (कोई घटनाओं या कार्यों) करना है:

yAxis: { 
    min: 0, 
    minRange: 10, 
    maxPadding: 0 
} 

यहाँ minRange को परिभाषित करता है धुरी की न्यूनतम अवधि। maxPadding 0.01 पर डिफ़ॉल्ट है जो अक्ष को 10 से अधिक लंबा बना देगा, इसलिए हम इसे शून्य पर सेट करते हैं।

यह setExtreme के समान परिणाम देता है। this JSFiddle demonstration देखें। घटनाओं {: `नई Highcharts.Chart ({ चार्ट: