Problem z renderowaniem wykresu przy zmianie rozmiaru kontenera <div>

mamdwa pytanie o renderowanie wykresu, gdy jego rozmiar zostanie zmieniony.

Pierwszy Rzecz w tym, jak poprawnie renderować wykres, gdy jego rozmiar jest zmieniany ..

tj. problem maksymalizacji / przywracania, przy pierwszym renderowaniu działa dobrze, jednak po przywróceniu rozmiaru okna wykresy zaczynają nakładać się na swój poprzedni rozmiar. Jak widać z następujących zdjęć:

Wiem, że jeśli ustawisz program obsługi rozmiaru (i poczekasz trochę czasu) na odświeżenie wykresu za każdym razem, gdy zmienia się rozmiar okna, problem można rozwiązać. Zastanawiam się, czy istnieją inne metody pozwalające wykresowi płynąć do właściwego rozmiaru bez odświeżania wykresu za każdym razem.

Thedruga rzecz jest: jeśli obszar wykresów jest w a<div> pojemnik, a rozmiar pojemnika zmieni się za pomocą paska zmiany rozmiaru. Używam następującego kodu, aby działał przy zmianie rozmiaru okna. Ale toprzyzwyczajenie pracować z ruchomym paskiem zmiany rozmiaru.

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

Uwaga: Komponent siatki działa w każdym razie dobrze i tylko wykres zawsze mam problemy. Używam HighCharts, siatki kendoUI i oba są renderowane w portletach jQueryUI.

Wszelkie komentarze docenione! Ten problem zabrał mi dużo czasu ..

Aktualizacja: Ponieważ uważam, że moje wyjaśnienie problemu nie jest wystarczająco jasne, dodałemPrzykład JSFiddle dla lepszego zrozumienia. Zasadniczo potrzebuję dwóch rzeczy: 1. przepuść rozmiar wykresu, aby dopasował się do jego kontenera, gdy zmienia się rozmiar okna; 2. przepełnij rozmiar wykresu, aby dopasować go do pojemnika, gdy pasek zmiany rozmiaru jest w ruchu.

Używam wtyczekwysokie karty do sporządzania wykresów,Układ jQuery UI do zarządzania układem w tym przykładzie. W przypadku niektórych innych wtyczek, których używam, zapoznaj się ztutaj, Nie jestem pewien, czy mają konflikty.

Dzięki!

questionAnswers(2)

yourAnswerToTheQuestion