Kích thước biểu đồ canvas nổi bật trong ngăn tab Bootstrap trên trang tải ban đầu

Question

Tôi đang xây dựng ứng dụng Rails 3.2.11 với Twitter Bootstrap và Flot (cũng là HAML và Coffeescript).

Trong một cái nhìn, tôi có các tab Bootstrap thực hiện như vậy (partials được thực hiện tại các panes 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' 

Trong một phần, tôi có một bảng. Tôi muốn vẽ một biểu đồ flot trong một td. một phần của tôi, nơi tôi muốn làm cho biểu đồ trông giống như thế này,

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

Tôi đang áp dụng các kích thước biểu đồ với một lớp CSS như thế này,

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

My Coffeescript trông như thế này. Tôi hy vọng biểu đồ sẽ được vẽ trên document.ready

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

Tôi đã xác nhận .js đang tải.

Vấn đề:

Khi DOM ban đầu tải, biểu đồ này hiển thị, nhưng nó là kích thước sai. Khu vực biểu đồ (nơi các thanh chỉ) được thiết lập bằng CSS .barchart, nhưng các nhãn trục, vv nằm ngoài kích thước đó (xem http://i36.tinypic.com/2vte1rp.jpg, dấu gạch ngang màu đỏ là đường viền của td).

Khi làm mới (tôi có .js làm mới tab đã chọn trước đó), biểu đồ hiển thị đúng kích cỡ tôi muốn (nghĩa là các nhãn trục nằm bên trong thứ nguyên, xem http://i38.tinypic.com/4qq15g.jpg).

Tôi nghĩ rằng tôi phải có được các thứ nguyên trình giữ chỗ chính xác cho Flot nhưng không biết cách thực hiện. Thêm CSS chiều rộng/chiều cao vào td không khắc phục được sự cố. Bất kỳ ý tưởng?

Answer 1

Có vẻ như trình giữ chỗ nằm trong phần tử bắt đầu bị ẩn. jQuery gặp khó khăn trong việc thu thập các yếu tố ẩn, đó là nguyên nhân phổ biến của các lô có kích thước sai. Nếu trường hợp đó xảy ra, hãy thử hiển thị phần tử trước khi gọi $ .plot (bạn có thể định vị nó hoàn toàn, tắt màn hình, để tránh bất kỳ nhấp nháy nào), sau đó đặt lại nó sau đó.