如何根据容器尺寸的变化调整 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 元素导致布局根据用户输入 "flex"，您将需要在那里调用 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

Answer 2

我的解决办法是监听resize事件。如果您在过去一秒内有任何调整大小事件，您将调整图表的大小。这样你就不会错过任何 window 调整大小。

var haveToResizeCharts = false;

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

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

thedarklord47 的回答有一部分是错误的，因为如果您在过去 200 毫秒内已经进行了调整，那么最后的调整没有任何效果！

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

How to resize Morris.js chart on changes to container dimensions

javascript

jquery

flexbox

responsive-design

morris.js