vẽ biểu đồ flot bên trong vấn đề tab bootstrap

Question

Tôi đang cố gắng sử dụng biểu đồ flot bên trong tab khởi động, tất cả mặc dù javascript không vẽ biểu đồ chính xác, nó bị bóp méo, văn bản quá gần với biểu đồ ..

<div id="tab3" class="tab-pane fade"> 
<div class="chart_flot" style="width:600px;height:300px;"></div> 
</div> 

Bên ngoài tab, biểu đồ hoạt động tốt. Tôi đã thử chơi với xung quanh với css, nhưng giải pháp duy nhất tôi đã tìm thấy là không thiết lập các phong cách tab (display: none) như mặc định, trước khi tab được lựa chọn, ví dụ:

<div id="tab3" class="tab-pane fade" style="display:block"> 
<div class="chart_flot" style="width:600px;height:300px;"></div> 
</div> 

Tôi đã thử để đặt hiển thị: chặn trên tab được sử dụng cho biểu đồ và biểu đồ được rút ra tốt nhưng trên lựa chọn tab khác, canvas sẽ không biến mất.

Giải pháp.

Tôi nhắc nhở đây là biểu đồ bên trong lỗi tab mặc định của trình khởi động. Lý do khiến nó bị bóp méo là vì biểu đồ không thể vẽ chính xác trong một div ẩn (hiển thị: không).

Có 3 tùy chọn khắc phục sự cố này.

1. Thêm trình kích hoạt javascript sẽ vẽ biểu đồ CHỈ sau tab với biểu đồ được chọn.
2. Không sử dụng trình khởi động và chỉ tạo tập lệnh tab riêng sẽ ẩn các tab đang tải và không hiển thị: không có tab mặc định trên các tab được chọn .

3. Cách dễ dàng, với css

   #tabid { 
       width:0; 
       display:block; 
       visibility:hidden; 
       height:0; 
   } 
   #tabid.active { 
       width:100%; 
       height:100%; 
       visibility:visible; 
   } 
   

Tôi hy vọng điều này sẽ có ích cho một số người.

Answer 1

Giải pháp.

Tôi nhắc nhở đây là biểu đồ bên trong lỗi tab mặc định của trình khởi động. Lý do nó bị bóp méo là vì biểu đồ không thể được vẽ chính xác trong một div ẩn (hiển thị: none).

Có 3 tùy chọn khắc phục sự cố này.

1. Thêm trình kích hoạt javascript sẽ vẽ biểu đồ CHỈ sau tab với biểu đồ được chọn.
2. Không sử dụng trình khởi động và chỉ tạo tập lệnh tab riêng sẽ ẩn các tab đang tải và không hiển thị: không có tab mặc định trên các tab được chọn .

3. Cách dễ dàng, với css

   tabid {

   width:0; 
   display:block; 
   visibility:hidden; 
   height:0; 
   

   }

   tabid.hoạt động {

   width:100%; 
   height:100%; 
   visibility:visible; 
   

   }