javascript 调整 <div> 容器大小的图表呈现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11371374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart rendering issue with resizing <div> container
提问by sozhen
I have twoquestion for chart rendering when its container is resized.
调整容器大小时，我有两个关于图表渲染的问题。
Firstthing is, how to render chart correctly when its container is resized..
第一件事是，如何在调整容器大小时正确呈现图表。
i.e. Maximize / Restore problem, at its first rendering it works just fine, however when I restore the size of the window, the charts begin to overlay as its previous size. As you can see from the following pics:
即最大化/恢复问题，在第一次渲染时它工作得很好，但是当我恢复窗口的大小时，图表开始像以前的大小一样重叠。正如您从以下图片中看到的：
I know if you set a resize handler (and wait a small amount of time) to refresh the chart whenever the window is resized, the problem can be solved. I am thinking whether there are some other approaches to let the chart flow to the right size without refreshing the chart every time.
我知道如果您设置调整大小处理程序（并等待一小段时间）以在调整窗口大小时刷新图表，则问题可以解决。我在想是否有其他一些方法可以让图表流到正确的大小，而无需每次都刷新图表。
The secondthing is:
If the charting area is in a <div>container, and the size of the container will change with a resize bar. I use the following code to get it work with the window resizing. But it won'twork with a moving resize bar.
的第二件事是：如果制图区域是一个<div>容器，容器的尺寸将与调整大小酒吧改变。我使用以下代码使其与窗口大小调整一起工作。但它不适用于移动的调整大小栏。
$(window).resize(function () {
setTimeout(function () {
createChart(chartData);
}, 300);
});
Note: The grid component works just fine in any case and just the chart I am always having troubles. I am using HighCharts, kendoUI grid and both of them are rendered in jQueryUI portlets.
注意：网格组件在任何情况下都可以正常工作，只是图表我总是遇到麻烦。我正在使用 HighCharts、kendoUI 网格，并且它们都在 jQueryUI portlet 中呈现。
Any comments appreciated!This problem has taken me a long time..
任何意见表示赞赏！这个问题花了我很长时间..
Update:Since I think my explanation of the issue is not clear enough, I added JSFiddle examplefor better understanding. Basically I want two things: 1. reflow the size of the chart to fit its container when window is resizing; 2. reflow the size of chart to fit its container when the resize bar is moving.
更新：由于我认为我对问题的解释不够清楚，我添加了JSFiddle 示例以便更好地理解。基本上我想要两件事：1. 在调整窗口大小时重排图表的大小以适应其容器；2. 当调整大小条移动时，重排图表的大小以适合其容器。
I am using plugins highchartsfor charting, jQuery UI Layoutfor layout management in this example. For some other plugins I am using, please refer to here, I am not sure whether they have conflicts.
在本例中，我使用插件highcharts进行图表绘制，使用jQuery UI Layout进行布局管理。对于我使用的其他一些插件，请参考这里，我不确定它们是否有冲突。
Thanks!
谢谢！
采纳答案by Mark
I don't believe what you want can be accomplished without hooking the resize event and redrawing the chart.
我不相信如果不挂钩调整大小事件并重新绘制图表，就无法实现您想要的。
To solve your "div" resize problem, look at something like thiswhich allows you to bind the resize event to things other than the window (it your case your "container" div).
要解决您的“div”调整大小问题，请查看类似这样的内容，它允许您将调整大小事件绑定到窗口以外的事物（您的情况是“容器”div）。
Here's a fiddleof it in action.
这里有一个拨弄它在行动。
回答by Martin Nicolas Mayer
Had a similar problem and solved it doing the following:
有一个类似的问题，并解决它执行以下操作：
When defining the resizable div that will contain the higcharts chart:
在定义将包含 higcharts 图表的可调整大小的 div 时：
$("#container").resizable({
resize: function (event, ui) {
var delay = 1000;
setTimeout(function () {
$(window).resize();
}, delay);
}
});
And inside the definition of the chart:
在图表的定义中：
var chart = new Highcharts.Chart({
.........
$(window).resize(function() {
chart.reflow();
..........
});
So basically, you are resizing the window with a delay. Not very elegant, but works fine for me.
所以基本上，您正在延迟调整窗口大小。不是很优雅，但对我来说很好用。
