我尝试将 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;
}
最佳答案
添加一个 $(window).on('resize', ...)
事件处理程序,然后调用图形 redraw()
函数。
如果有一个动态 UI 元素导致布局根据用户输入“弯曲”,您将需要在那里调用 redraw()
并且无法直接监听调整 div 的大小。
这是您的 fiddle ,已更新修复。
此外,这是来自 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 :
关于javascript - 如何根据容器尺寸的变化调整 Morris.js 图表的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35470089/