Cách thay đổi kích thước biểu đồ Morris.js về các thay đổi đối với kích thước vùng chứa

Question

Tôi cố gắng đặt biểu đồ Morris js donut trong thùng chứa flex với 2 mặt hàng flex, tôi hy vọng biểu đồ đó trong flex: 1 vùng chứa sẽ thay đổi kích thước, nhưng không. Có ai biết làm thế nào để làm cho biểu đồ được đáp ứng trong flex mục?

Dưới đây là ví dụ của tôi example cố gắng để thay đổi kích thước

JS:

$(function() { 
    Morris.Donut({ 
     element: 'container', 
     resize: true, 
     data: [ 
      {label: "Download Sales", value: 12}, 
      {label: "In-Store Sales", value: 30}, 
      {label: "Mail-Order Sales", value: 20} 
     ] 
    }); 

CSS:

html, body { 
height: 100%; 
margin: 0; 
} 

body { 
    display: -webkit-flex; 
} 

#container { 
    flex: 1; 
} 

.flex1 { 
    flex: 1; 
    border: 1px solid red; 
} 

Answer 1

Thêm một handler $(window).on('resize', ...) sự kiện sau đó gọi các đồ thị redraw() chức năng.

Nếu có phần tử UI động khiến bố cục "flex" dựa trên đầu vào của người dùng, bạn sẽ muốn gọi redraw() ở đó cũng như không có cách nào để trực tiếp lắng nghe thay đổi kích thước của div.

Đây là câu đố của bạn, được cập nhật với bản sửa lỗi.

jsFiddle

Ngoài ra, đây là một lưu ý từ một nhà phát triển của Morris.js

Lưu ý: Tôi đề nghị bạn gọi vẽ lại() cẩn trọng vì nó khá một hoạt động tốn kém. Hãy thử sử dụng một mẹo setTimeout hoặc tương tự để tránh gọi nó cho các sự kiện thay đổi kích thước trung gian.

Một cách để ý đến lời khuyên này là dưới đây:

$(window).on('resize', function() { 
    if (!window.recentResize) { 
     window.m.redraw(); 
     window.recentResize = true; 
     setTimeout(function(){ window.recentResize = false; }, 200); 
    } 
}); 

Đây là một fiddle với điều này thực hiện:

jsFiddle