Question

我尝试将带有2个弹性项目的Morris js圆环图放在Flex容器中，我期望flex中的图表：1个容器会调整大小，但事实并非如此。有谁知道如何让图表在flex项目中做出响应？

以下是我的示例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元素导致布局“＆＃34; flex＆＃34;根据用户输入，您需要在那里调用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

Answer 2

我的解决方案是收听调整大小事件。如果您在过去的第二天中有任何调整大小事件，则会调整图表的大小。通过这种方式，您不会错过任何窗口调整大小。

var haveToResizeCharts = false;

$(window).resize(function() {
    haveToResizeCharts = true;
});

setInterval(function(){ 
    if(haveToResizeCharts) {
        chart1.redraw();
        chart2.redraw();
        haveToResizeCharts = false;
    }
}, 1000);

thedarklord47的答案部分错误，因为如果你在过去200毫秒内已经有一个调整大小，那么最后的调整大小没有效果！

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

2 个答案:

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

2 个答案:

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