Плохой размер карты холста в области вкладок Bootstrap на начальной загрузке страницы

Question

Я создаю приложение Rails 3.2.11 с Twitter Bootstrap и Flot (также HAML и Coffeescript).

В свете, у меня есть бутстрапе вкладки реализованы так, как (парциальные отображаются в закладке стекол.),

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

В частичной, у меня есть таблица. Я хочу отобразить карту флота в пределах td. Мои частичный, где я хочу, чтобы сделать график выглядит примерно так,

%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}} 

Я подаю размеры диаграммы с классом CSS, как это,

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

Мой CoffeeScript выглядит следующим образом. Я ожидаю, что график будет распечатан на документе. Уже

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

Я подтвердил это .js загружается.

Проблема:

Когда DOM первоначально нагрузки, график делает, но это неправильный размер. Область диаграммы (только для баров) задается с помощью CSS .barchart, но метки осей и т. Д. Находятся вне этого измерения (см. http://i36.tinypic.com/2vte1rp.jpg, красные штрихи - граница td).

После обновления (у меня есть .js, который обновляется до выбранной ранее вкладки), диаграмма отображает нужный размер (т. Е. Метки осей находятся внутри измерения, см. http://i38.tinypic.com/4qq15g.jpg).

Я думаю, что мне нужно получить правильные размеры заполнителя для флота, но не знаю, как это сделать. Добавление CSS ширины/высоты в td не устраняет проблему. Есть идеи?

Answer 1

Похоже, что заполнитель находится внутри элемента, который начинается с экрана. jQuery имеет проблемы с получением размеров скрытых элементов, что является общей причиной ошибочных графиков. Если это так, попробуйте показать элемент перед вызовом $ .plot (вы можете установить его абсолютно, вне экрана, чтобы избежать какого-либо мерцания), а затем сбросить его.