调整大小的图表呈现问题< div>容器 [英] Chart rendering issue with resizing <div> container

问题描述

我在图片呈现时遇到两个问题，它的容器已调整大小。

I have two question for chart rendering when its container is resized.

以在其容器调整大小时正确呈现图表。

First thing is, how to render chart correctly when its container is resized..

ie最大化/恢复问题，在它的第一次渲染它工作正常，但是当我恢复窗口的大小，图表开始重叠为其以前的大小。正如你可以从以下图片中看到的：

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:

我知道如果你设置了一个resize处理程序少量的时间）刷新图表每当窗口调整大小，问题可以解决。我想是否有其他方法让图表流动到正确的大小，而不刷新图表每次。

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.

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

The second thing 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't work with a moving resize bar.

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

注意：网格组件在任何情况下都很好，图我总是有麻烦。
我使用HighCharts，kendoUI网格，它们都在jQueryUI portlet中呈现。

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.

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

Any comments appreciated!This problem has taken me a long time..

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

Update: Since I think my explanation of the issue is not clear enough, I added JSFiddle example for 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.

我使用 highcharts 插件来制作图表，本示例中的 jQuery UI布局用于布局管理。对于我使用的其他插件，请参阅 此处 ，我不确定他们是否有冲突。

I am using plugins highcharts for charting, jQuery UI Layout for layout management in this example. For some other plugins I am using, please refer to here, I am not sure whether they have conflicts.

谢谢！

推荐答案

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

I don't believe what you want can be accomplished without hooking the resize event and redrawing the chart.

要解决您的div调整大小问题，请查看类似这个，它允许你绑定resize事件的窗口之外的东西（它的情况下你的containerdiv）。

To solve your "div" resize problem, look at something like this which allows you to bind the resize event to things other than the window (it your case your "container" div).

这是一个小提琴 。

这篇关于调整大小的图表呈现问题< div>容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！