5

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

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

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

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

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

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

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

任何意见表示赞赏！这个问题花了我很长时间..

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

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

谢谢！

4

2 回答 2

3

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

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

这是它在行动中的一个小技巧。

于 2012-07-09T13:58:40.437 回答
0

有类似的问题并通过以下方式解决了它：

在定义将包含 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();
           ..........
            });

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

于 2017-01-25T14:31:37.237 回答