调整<div>容器大小的图表呈现问题
当调整容器的大小时，我有两个问题用于图表呈现。
的第一件事是，当容器的大小调整时，如何正确地呈现图表。
也就是说，最大化/恢复问题，在第一次呈现时它工作得很好，但是当我恢复窗口的大小时，图表开始与以前的大小重叠。从下面的图片中可以看到：
我知道，如果您设置了一个调整大小的处理程序(并等待了一小段时间)来刷新图表，那么只要调整窗口的大小，问题就可以解决。我在想，是否还有其他方法让图表流到合适的大小，而不用每次刷新图表。
的第二个是:如果图表区域位于<div>容器中，那么容器的大小将随着大小条的调整而改变。我使用下面的代码使它在调整窗口大小的情况下工作。但是，不允许使用移动的调整大小条。
$(window).resize(function () {
setTimeout(function () {
createChart(chartData);
}, 300);
});备注：网格组件在任何情况下都运行得很好，而我总是遇到麻烦的图表。我使用的是HighCharts、kendoUI网格，它们都是在jQueryUI portlet中呈现的。
任何评论都很感谢！这个问题花了我很长时间。
更新：，因为我认为我对这个问题的解释不够清楚，为了更好地理解，我添加了JSFiddle实例。基本上，我想要两件事: 1.当窗口调整大小时，再流图的大小以适应它的容器；2.当调整大小的条移动时，再流图的大小以适合它的容器。
在本例中，我使用插件高图集绘制图表，使用jQuery UI布局进行布局管理。对于我正在使用的其他插件，请参考这里，我不确定它们是否有冲突。
谢谢!
回答 2
Stack Overflow用户
发布于 2012-07-09 13:58:40
我不相信你想要的东西可以不挂钩调整大小事件和重新绘制图表。
要解决您的"div“调整大小问题，请查看类似这的内容，它允许您将调整大小事件绑定到窗口以外的东西(这是您的”容器“div)。
这是它在行动中的小提琴。
Stack Overflow用户
发布于 2017-01-25 14:31:37
有一个类似的问题，并解决了它做了以下工作：
在定义包含高图表的可调整大小的div时：
$("#container").resizable({
resize: function (event, ui) {
var delay = 1000;
setTimeout(function () {
$(window).resize();
}, delay);
}
});在图表的定义中：
var chart = new Highcharts.Chart({
.........
$(window).resize(function() {
chart.reflow();
..........
});因此，基本上，您是调整窗口的延迟。不太优雅，但对我来说很好。
https://stackoverflow.com/questions/11371374
复制相似问题
腾讯云开发者
