调整 <div> 容器大小的图表呈现问题答案

【问题标题】：Chart rendering issue with resizing <div> container调整 <div> 容器大小的图表呈现问题
【发布时间】：2012-07-07 10:53:35
【问题描述】：

我有两个关于调整容器大小时图表渲染的问题。

首先是，如何在调整容器大小时正确呈现图表..

即最大化/恢复问题，在第一次渲染时它工作得很好，但是当我恢复窗口的大小时，图表开始覆盖它以前的大小。从以下图片可以看出：

我知道如果您设置一个调整大小处理程序（并等待一小段时间）以在调整窗口大小时刷新图表，问题就可以解决。我在想是否有其他方法可以让图表流动到正确的大小，而无需每次都刷新图表。

第二个是：如果图表区域位于<div> 容器中，则容器的大小将随着调整大小条而变化。我使用以下代码使其与窗口大小调整一起使用。但它不会与移动的调整大小栏一起使用。

$(window).resize(function () {
        setTimeout(function () {
            createChart(chartData);
        }, 300);
    });

注意：网格组件在任何情况下都可以正常工作，而我总是遇到麻烦的图表。我正在使用 HighCharts、kendoUI 网格，它们都在 jQueryUI portlet 中呈现。

感谢任何cmets！这个问题花了我很长时间..

更新：由于我认为我对这个问题的解释不够清楚，我添加了JSFiddle example 以便更好地理解。基本上我想要两件事：1。当窗口调整大小时，重新排列图表的大小以适应其容器； 2.当调整大小条移动时，重新排列图表的大小以适合其容器。

在此示例中，我使用插件highcharts 进行图表，jQuery UI Layout 用于布局管理。我正在使用的其他一些插件，请参考here，我不确定它们是否有冲突。

谢谢！

【问题讨论】：

你能把你的代码发到jsFiddle
谢谢，我已经用 JSFiddle 示例更新了我的问题。请看看我的更新。谢谢！
HMMmmm 看看这是否会给你一些想法jsFiddle 另一个建议是将其标记为 jqueryUI 和 css 人员
它仍然不能很好地工作，但感谢您的时间。

标签： javascript jquery css jquery-ui highcharts

【解决方案1】：

我不相信如果不挂钩调整大小事件并重新绘制图表就可以完成您想要的事情。

要解决您的“div”调整大小问题，请查看this 之类的内容，它允许您将调整大小事件绑定到窗口以外的事物（您的情况是您的“容器”div）。

这里有一个fiddle 正在运行。

【讨论】：

很好的答案，正是我想要的，在不重新加载图表的情况下重新排列容器的大小。谢谢马克。
为了提高性能，在您的场景中，您应该在图表上将 reflow 设置为 false，正如我在此处解释的那样：stackoverflow.com/questions/13768565/…

【解决方案2】：

遇到了类似的问题，通过以下方式解决了：

在定义将包含 higcharts 图表的可调整大小的 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();
           ..........
            });

所以基本上，您正在延迟调整窗口大小。不是很优雅，但对我来说很好。

【讨论】：