如何在容器尺寸的更改上调整Morris.js图表​​的大小

Question

我试图将Flex里面的Morris js圆环图放在Flex容器中,我希望flex中的图表:1容器会调整大小,但事实并非如此.有谁知道如何使图表在flex项目中响应？

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

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的大小调整,直接听取.

这是你的小提琴,更新了修复.

的jsfiddle

另外,这是Morris.js开发人员的一份说明

注意:我建议你谨慎地调用redraw(),因为这是一个非常昂贵的操作.尝试使用setTimeout技巧或类似功能,以避免为中间调整大小事件调用它.

注意这个建议的方法如下:

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

这是实现这一点的小提琴:

的jsfiddle