Rozmiar wykresu nieprawidłowego flopa w panelu zakładki Bootstrap podczas ładowania strony początkowej

Question

Buduję aplikację Rails 3.2.11 z Bootstrap i Flot na Twitterze (również HAML i Coffeescript).

W widoku mam bootstrap zaczepy realizowane podobnie jak (partials są wykonane w panelach tab.)

.tabbable 
    %ul.nav.nav-tabs 
     %li.active 
     %a{'data-toggle' => 'tab', :href => '#tab1'} This is tab 1 
     %li 
     %a{"data-toggle" => "tab", :href => "#tab2"} This is tab 2 

    .tab-content 
     #tab1.tab-pane.active 
     = render 'tab_one_content' 
     #tab2.tab-pane 
     = render 'tab_two_content' 

W częściowy mam tabeli. Chcę renderować wykres flotowy w td. Moja częściowe, gdzie chcę, aby uczynić wykres wygląda mniej więcej tak,

%table 
    %tr 
     %th 
     Some heading text… 
     %td 
     -# Make the 12-month barchart 
     - @chart_data = @barchart_12_mos_array.to_json 
     #my_barchart.barchart{:data => {:bardata => @chart_data}} 

ja stosowaniu aspektów wykresu z klasy CSS jak ta,

.barchart { 
    width: 240px; 
    height: 120px; 
} 

My coffeescript wygląda następująco. Spodziewam się, że wykres będzie działał na dokumencie. Już nie.

$ -> 
    $.plot $('#my_barchart'), [ 
    data: $("#my_barchart").data("bardata") 
    bars: 
     show: true 
     barWidth: (365/12)*24*60*60*1000*.75 
     align: 'center' 
    ], 
    xaxis: 
     mode: "time" 
     timeformat: "%b" 
     monthNames: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"] 
    yaxis: 
     position: 'right' 

Potwierdziłem, że .js się wczytuje.

Problem:

Gdy DOM początkowo ładunki, wykres świadczy, ale jest niewłaściwy rozmiar. Obszar wykresu (gdzie tylko paski są) jest ustawiony zgodnie z CSS .barchart, ale etykiety osi itp. Znajdują się poza tym wymiarem (zob. http://i36.tinypic.com/2vte1rp.jpg, czerwone kreski są granicą td).

Po odświeżeniu (mam .js, który odświeża do poprzednio wybranej karty), wykres renderuje we właściwym rozmiarze, który chcę (tj. Etykiety osi znajdują się wewnątrz wymiaru, patrz http://i38.tinypic.com/4qq15g.jpg).

Myślę, że muszę pobrać prawidłowe wymiary zastępcze do Flot, ale nie wiem jak. Dodanie szerokości/wysokości CSS do td nie rozwiązuje problemu. Jakieś pomysły?

Answer 1

Wygląda na to, że element zastępczy znajduje się w elemencie, który zaczyna się ukryć. jQuery ma problemy z uzyskaniem wymiarów ukrytych elementów, co jest częstą przyczyną niedokładnych wykresów. Jeśli tak jest, spróbuj pokazać element przed wywołaniem $ .plot (możesz ustawić go absolutnie, poza ekranem, aby uniknąć migotania), a następnie zresetować go.