हाइचार्ट्स - वाईएक्सिस के लिए अधिकतम रेंज सेट करें लेकिन उस श्रेणी के भीतर धुरी गतिशील रखें

Question

सबसे पहले, पोस्ट शीर्षक के लिए क्षमा चाहते हैं, लेकिन मैं अपनी समस्या का वर्णन करने के लिए बेहतर तरीके से आने में विफल रहा।

क्या उच्चतर में yAxis के लिए अधिकतम मूल्य निर्धारित करने के लिए कोई तरीका है, कहें, 1000 (यानी max: 1000 के माध्यम से) लेकिन यदि अधिकतम मान अधिकतम सेट से कम हैं तो इसे गतिशील रखें? उदाहरण के तौर पर, मान लीजिए कि हमारे पास दो डेटासेट हैं।

पहला वाला 0 और 1500 के बीच है। यहां कोई भी डेटा> 1000 प्रदर्शित नहीं होना चाहिए। yAxis: { max: 1000 } सेट करना चाल है।

अब हम डेटा डेटा को दूसरे डेटा सेट के साथ अपडेट करते हैं जो 0 और 48 के बीच है। अब max: 1000 लाइन को एक्स-अक्ष को लगभग गले लगाने का कारण बनता है। तो यहां सबसे अच्छा होगा अगर हाईचार्ट्स गतिशील रूप से yAxis को 0-50 से समायोजित करने के लिए समायोजित करता है। http://jsfiddle.net/PanicJ/s7fZu/1/

पी.एस.:

यहाँ समस्या को वर्णन करने के लिए एक बेला है ने हाइचार्ट्स में minRange सेटिंग को देखा। अब, maxRange समतुल्य क्यों नहीं है? या वहाँ है?

Answer 1

का उपयोग यह (, सुविधा का अनुरोध Torstein?) लगता है कोई maxRange बराबर है कि वहाँ इतना है कि अक्ष अधिकतम से पहले Highcharts कहा जाता है निर्धारित किया जाना है कृपया। सनत के सुझाव पर एक समाधान का निर्माण इस होगा:

$(function() { 
    var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]; 
    var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]; 
    var data = Math.random() < 0.5 ? setA : setB; 
    var height=Math.max.apply(Math, data); 
    if(height > 1000){ height = 1000; } 

    $('#container').highcharts({ 
     chart: { 
      marginRight: 80 // like left 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: [{ 
      lineWidth: 1, 
      max: height, 
      min: 0, 
      title: { text: 'yAxis' } 
     }], 
     series: [{ 
      data: data 
     }] 
    }); 
}); 

काम कर उदाहरण के रूप में: http://jsfiddle.net/PanicJ/H2pyC/8/

Answer 2

setExtremes to define a range. The JSfiddle has been updated. 

$('#button').click(function() { 
    var chart = $('#container').highcharts(

    ); 
    if ($(this).hasClass('big')) { 
     $(this).removeClass('big'); 
     chart.series[0].setData([29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]); 
     //chart.setSize(null,100,true); 
     chart.yAxis[0].setExtremes(0,50); 
    } else { 
     $(this).addClass('big'); 
     chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]); 
     //chart.setSize(null,1600,true); 
     chart.yAxis[0].setExtremes(0,1600); 
    } 
    }); 
}); 

Answer 3

Updated jsfiddle

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      marginRight: 80 // like left 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: [{ 
      lineWidth: 1, 
      max: 1000, 
      min: 0, 
      title: { 
       text: 'Primary Axis' 
      } 
     }, { 
      lineWidth: 1, 
      opposite: true, 
      title: { 
       text: 'Secondary Axis' 
      } 
     }], 
     series: [{ 
      data: [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4] 
     }] 
    }); 
    $('#button').click(function() { 
     var chart = $('#container').highcharts(); 
     if ($(this).hasClass('big')) { 
      $(this).removeClass('big'); 
      chart.series[0].setData([29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]); 
      chart.yAxis[0].setExtremes(0, 50); 
     } else { 
      $(this).addClass('big'); 
      chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]); 
      chart.yAxis[0].setExtremes(0, 1600); 
     } 
    }); 
}); 

यह समाधान आप के लिए काम करना चाहिए, तो आप सिर्फ के लिए yAxis चरम निर्धारित करने की आवश्यकता चार्ट, यदि आप प्रत्येक श्रृंखला के लिए अधिकतम डेटा सीमा जानते हैं तो यह आसान होगा, अन्यथा आपको प्रत्येक श्रृंखला के लिए अधिकतम मान की गणना करने की आवश्यकता है।

Answer 4

Highcharts 4.0 जब से हम yAxis.ceiling और yAxis.floor, demo उपयोग कर सकते हैं।

Highcharts.chart('container1', { 
    yAxis: { 
    floor: 0, 
    ceiling: 100 
    }, 
    series: [{ 
    data: [-10, 1, 0, 2, 3, 5, 8, 5, 15, 14, 25, 154] 
    }] 
});