javascript - 如何根据容器尺寸的变化调整 Morris.js 图表的大小

Question

我尝试将 Morris js 圆环图放入具有 2 个 flex 项目的 flex 容器中，我希望 flex: 1 容器中的图表会调整大小，但它不会。有谁知道如何使图表在弹性项目中响应？

这是我的例子example尝试调整它的大小

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

添加一个 $(window).on('resize', ...) 事件处理程序，然后调用图形 redraw() 函数。

如果有一个动态 UI 元素导致布局根据用户输入“弯曲”，您将需要在那里调用 redraw() 并且无法直接监听调整 div 的大小。

这是您的 fiddle ，已更新修复。

jsFiddle

此外，这是来自 Morris.js 开发人员的注释

Note: I suggest you call redraw() sparingly as it's quite an expensive operation. Try using a setTimeout trick or similar to avoid calling it for intermediate resize events.

注意此建议的方法如下:

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

这是一个实现了这个的 fiddle :

jsFiddle