Hiển thị sai trục y trong biểu đồ phân cực

Question

Tôi cần trợ giúp với trục y của các biểu đồ cực như mạng nhện hoặc windrose. Tôi là một ứng dụng có trang tổng quan chứa một số tiện ích, mỗi ứng dụng chứa một iframe có biểu đồ Highcharts. Bởi vì các vật dụng này có thể tái chế, tôi đã có một số javascript để thay đổi kích cỡ vùng chứa của biểu đồ.

$(window).bind("resize", resizeChart); 
    function resizeChart() { 
     var width = $(document).width() - 55; 
     var height = $(document).height() - 60; 
     $("#container").css("width", width); 
     $("#container").css("height", height); 
    } 

Một số ví dụ: http://jsfiddle.net/CwnDw/

Vấn đề của tôi là, quy mô của các trục y thường trông rất xấu xí. Khi biểu đồ tải trục y chỉ có một dấu tích. Sau khi thay đổi kích thước biểu đồ thành + 10 px, nó không chứa dấu tích, và sau khi thay đổi kích thước thành kích thước inital, trục y hiển thị với 5 dấu tích. Tôi không hiểu tại sao. Trong ví dụ của tôi, tôi chỉ nhận được hiệu ứng này khi tôi thay đổi kích thước biểu đồ từ kích thước nhỏ thành kích thước lớn hơn rất nhanh.

Có cách nào tốt hơn để thay đổi kích thước biểu đồ không? Tôi đã thử hàm chart.setSize(), nhưng không có hiệu lực. Hoặc: có cách nào để tính lại/tính toán lại trục y không?

Cảm ơn bạn Torben

Answer 1

Hãy thử điều này:

function resizeChart() { 
    var width = $(document).width() - 55; 
    var height = $(document).height() - 60; 
    $("#container").css("width", width); 
    $("#container").css("height", height); 
    setTimeout(function() { 
     chart1.setSize(
      width, 
      height, 
      false 
     ); 
    },10); 
} 

http://jsfiddle.net/9YFB8/2/

Answer 2

Tôi không chắc chắn về một phương pháp vẽ lại rằng sẽ thực hiện những gì bạn đang tìm kiếm, nhưng với kinh nghiệm của tôi sử dụng Highcharts, tôi tìm thấy nó là tốt nhất để xác định vị trí đánh dấu để tránh bất kỳ kết quả bất ngờ.

Dưới đây là một liên kết đến tài liệu liên quan đến Highchart yAxis: tickPosition

http://api.highcharts.com/highcharts#yAxis.tickPositions

Có một ví dụ jsFiddle khá tốt đó mà nên bao gồm thực hiện.