Geek asks and answers

Error rendering chart with resizing container <div>

I have a question two for rendering a chart when resizing a container.

The first thing is how to correctly display the chart when resizing the container.

i.e. The Maximize / Restore problem, when it is first rendered, it works very well, however, when I restore the window size, the diagrams begin to overlap like the previous size. As you can see from the following photos:   enter image description hereenter image description here

, ( ), , , . , , , .

: <div>, . , . .

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

. grid , . HighCharts, kendoUI, jQueryUI.

! .

:. , , JSFiddle . , : 1. , ; 2. , .

highcharts , jQuery UI Layout ​​ . , , , , .

!

+5
2

, , , .

"div", this, , ( "" div).

fiddle .

+3

:

div, higcharts:

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

:

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

, . , .

0

More articles:


All Articles