Question

在调整容器大小时，我有两个问题用于图表呈现。

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

即。最大化/恢复问题，在它的第一次渲染它工作正常，但是当我恢复窗口的大小时，图表开始叠加为其先前的大小。从下面的图片可以看出： enter image description here

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

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

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

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

任何评论都赞赏！这个问题花了我很长时间..

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

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

谢谢！

Answer 1

我不相信你想要的东西可以在不挂钩调整大小事件和重绘图表的情况下完成。

解决你的问题＆＃34; div＆＃34;调整大小问题，查看类似this的内容，它允许您将resize事件绑定到窗口以外的其他内容（例如，您的＆＃34;容器＆＃34; div）。

这里有一个fiddle。

Answer 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();
           ..........
            });

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

调整<div>容器</div>的图表渲染问题

2 个答案: