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

Question

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 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:

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.

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

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..

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.

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.

Thanks!

Answer 1

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

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).

Here's a fiddle of it in action.

Answer 2

Had a similar problem and solved it doing the following:

When defining the resizable div that will contain the higcharts chart:

        $("#container").resizable({
            resize: function (event, ui) {
                var delay = 1000;
                setTimeout(function () {
                    $(window).resize();
                }, delay);
            }
        });

And inside the definition of the chart:

           var chart = new Highcharts.Chart({
           .........
            $(window).resize(function() {
                chart.reflow();
           ..........
            });

So basically, you are resizing the window with a delay. Not very elegant, but works fine for me.