Highcharts - đặt phạm vi tối đa cho yAxis nhưng giữ cho trục động trong phạm vi đó

Question

Trước hết, xin lỗi cho tiêu đề bài đăng, nhưng tôi đã không thể đưa ra mô tả tốt hơn cho vấn đề của mình.

Có cách nào trong highcharts để đặt giá trị tối đa cho yAxis, ví dụ: 1000 (tức là qua max: 1000) nhưng giữ nó động nếu giá trị tối đa thấp hơn giá trị tối đa đã đặt? Ví dụ, giả sử chúng ta có hai bộ dữ liệu.

Phạm vi đầu tiên nằm trong khoảng từ 0 đến 1500. Tại đây, không được hiển thị bất kỳ dữ liệu nào> 1000. Đặt yAxis: { max: 1000 } thực hiện thủ thuật.

Bây giờ, chúng tôi cập nhật chuỗi dữ liệu với tập dữ liệu thứ hai nằm trong khoảng từ 0 đến 48. Bây giờ max: 1000 làm cho đường hầu như ôm trục x. Vì vậy, ở đây sẽ là tốt nhất nếu Highcharts điều chỉnh động yAxis từ 0-50.

Dưới đây là một fiddle để minh họa cho vấn đề: http://jsfiddle.net/PanicJ/s7fZu/1/

T.B. Chỉ cần nhận thấy cài đặt minRange trong Highcharts. Bây giờ, tại sao không có maxRange tương đương? Hay là có?

Answer 1

Dường như không có maxRange tương đương (tính năng yêu cầu, Torstein?) Để tối đa trục phải được xác định trước khi Highcharts được gọi. Xây dựng dựa trên gợi ý Sanath của một giải pháp sẽ là:

$(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 
     }] 
    }); 
}); 

Một ví dụ làm việc: http://jsfiddle.net/PanicJ/H2pyC/8/

Answer 2

xin vui lòng sử dụng

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); 
     } 
    }); 
}); 

Giải pháp này sẽ làm việc cho bạn, bạn chỉ cần cài đặt cực yAxis cho biểu đồ, nếu bạn biết phạm vi dữ liệu tối đa cho mỗi chuỗi nó sẽ dễ dàng, nếu không bạn cần tính toán giá trị tối đa cho mỗi chuỗi.

Answer 4

Vì Highcharts 4.0, chúng tôi có thể sử dụng yAxis.ceiling và 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] 
    }] 
});