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

Posted 2023-03-07

【中文标题】如何根据容器尺寸的变化调整 Morris.js 图表的大小

【英文标题】：How to resize Morris.js chart on changes to container dimensions

【发布时间】：2016-05-29 22:44:22

【问题描述】：

我尝试将 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;

【参考方案1】：

我的解决方案是监听调整大小事件。如果您在过去一秒内有任何调整大小事件，则调整图表大小。这样您就不会错过任何窗口调整大小。

var haveToResizeCharts = false;

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

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

thedarklord47 的回答部分错误，因为如果您在过去 200 毫秒内已经调整大小，则最终调整大小无效！

【参考方案2】：

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

【讨论】：

很高兴我能帮上忙！另外，由于您似乎是 *** 的新手，我只是想提醒一下答案左侧有一个灰色复选标记。单击它会将其变为绿色，这是表示答案已解决您的问题的方式。选择一个答案会给你和回答的人带来声誉点数:)