調整大小的圖表渲染問題 <div> 容器

Question

調整容器大小時，我有兩個問題用於圖表渲染。

首先 ，如何在調整容器大小時正確呈現圖表。

即最大化/恢復問題，在它的第一次渲染它工作正常，但是當我恢復窗口的大小時，圖表開始疊加為其先前的大小。 從下面的圖片可以看出：

我知道如果你設置一個調整大小處理程序（並等待一小段時間），只要調整窗口大小，刷新圖表就可以解決問題。 我在想是否有其他方法讓圖表流動到正確的大小，而不是每次刷新圖表。

第二件事是：如果圖表區域位於<div>容器中，並且容器的大小將隨着調整大小條而改變。 我使用以下代碼來調整窗口大小。 但它不適用於移動的調整大小欄。

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

注意 ：網格組件在任何情況下都能正常工作，只是圖表我總是遇到麻煩。 我正在使用HighCharts，kendoUI網格，它們都在jQueryUI portlet中呈現。

任何評論贊賞！這個問題花了我很長時間..

更新：由於我認為我對該問題的解釋不夠清楚，我添加了JSFiddle示例以便更好地理解。 基本上我想要兩件事：1。當窗口調整大小時，重新調整圖表的大小以適合其容器; 2.當調整大小條移動時，重新調整圖表的大小以適合其容器。

我在本例中使用插件highcharts進行圖表處理， jQuery UI Layout用於布局管理。 對於我正在使用的其他一些插件，請參考這里 ，我不確定他們是否有沖突。

謝謝！

Answer 1

如果不掛鈎調整大小事件並重新繪制圖表，我不相信你想要的東西。

為了解決你的“格”調整問題，看像這個它允許你resize事件比窗口其他東西綁定（它的情況下，你的“容器” DIV）。

這是它在行動中的一個小提琴 。

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

所以基本上，你是在延遲調整窗口大小。 不是很優雅，但對我來說效果很好。