javascript - Chart rendering issue with resizing <div> container - Stack Overflow

admin管理员组

文章数量:1297044

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

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:

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 ponent 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 ments 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!

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

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:

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 ponent 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 ments 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!

• javascript
• jquery
• css
• jquery-ui
• highcharts

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked Jul 7, 2012 at 0:45 sozhensozhen 7,6771414 gold badges3838 silver badges5353 bronze badges 4

• can you post your code at jsFiddle – Mina Gabriel Commented Jul 7, 2012 at 12:12
• Thanks, I have updated my question with a JSFiddle example. Please take a look at my update. Thank you! – sozhen Commented Jul 7, 2012 at 20:39
• HMMmmm see if this will give you some ideas jsFiddle another remendation is tagging this to the jqueryUI and css guys – Mina Gabriel Commented Jul 7, 2012 at 21:57
• Its still not working very well, but thanks for your time. – sozhen Commented Jul 7, 2012 at 23:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I don't believe what you want can be acplished 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.

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.

本文标签： javascriptChart rendering issue with resizing ltdivgt containerStack Overflow