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

Posted 2021-05-02

我试图将Flex里面的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;
}

答案

添加一个$(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

另一答案

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

var haveToResizeCharts = false;

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

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

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