Highcharts - làm cách nào để có biểu đồ có chiều cao động?

Question

Tôi muốn có một biểu đồ thay đổi kích thước với cửa sổ trình duyệt, nhưng vấn đề là chiều cao cố định là 400px. This JSFiddle example có cùng sự cố.

Tôi có thể làm như thế nào? Tôi đã thử sử dụng trình xử lý sự kiện chart.events.redraw để thay đổi kích thước biểu đồ (sử dụng .setSize), nhưng tôi đoán nó bắt đầu một vòng lặp không bao giờ kết thúc (trình xử lý sự kiện lửa, gọi setSize, sẽ kích hoạt một trình xử lý sự kiện khác, v.v.).

Answer 1

Chỉ cần không đặt thuộc tính chiều cao trong HighCharts và nó sẽ xử lý tự động cho bạn miễn là bạn đặt chiều cao trên phần tử chứa của biểu đồ. Nó có thể là một số cố định hoặc thậm chí là một phần trăm nếu vị trí là tuyệt đối.

Highcharts docs:

Theo mặc định, chiều cao được tính từ chiều cao bù đắp của chứa yếu tố

Ví dụ: http://jsfiddle.net/wkkAd/149/

#container { 
    height:100%; 
    width:100%; 
    position:absolute; 
} 

Answer 2

gì nếu bạn nối các sự kiện cửa sổ thay đổi kích thước:

$(window).resize(function() 
{  
    chart.setSize(
     $(document).width(), 
     $(document).height()/2, 
     false 
    ); 
}); 

Xem ví dụ fiddle here.

Tham chiếu API Highcharts: setSize().

Answer 3

Ngoài ra, bạn có thể trực tiếp sử dụng window.onresize javascript của

Một ví dụ, mã của tôi (sử dụng scriptaculos) là:

window.onresize = function(){ 
    var w = $("form").getWidth() + "px"; 
    $('gfx').setStyle({ width : w }); 
} 

đâu hình thức là một hình thức html trên trang web của tôi và gfx đồ họa highchart .

Answer 4

Xóa chiều cao sẽ khắc phục sự cố của bạn vì highchart đáp ứng theo thiết kế nếu bạn điều chỉnh màn hình của bạn cũng sẽ thay đổi kích thước.