Biểu đồ Google tải cực kỳ nhỏ khi được bao gồm trong các tab dựa trên jQuery

Question

Tôi đang sử dụng line chart của Google gần như chính xác như bản trình diễn - chỉ dữ liệu đã thay đổi - bên trong this jQuery tab plugin không có sửa đổi. Có thể 50% thời gian, biểu đồ sẽ tải ở mức 400x200 mặc dù nó đã được chỉ định để tải ở 700x250. Div chứa sẽ có chiều rộng và chiều cao thích hợp, nhưng biểu đồ như được hiển thị bởi API sẽ tải bên trong đó ở mức 400x200.

Tôi nghi ngờ điều này là do các tab không được hiển thị khi API cố gắng hiển thị. Bởi vì điều đó, nó cố gắng để render trong một cái gì đó nó xem xét null và do đó buộc chính nó vào độ phân giải mặc định nhỏ nhất.

Suy nghĩ của tôi là nếu hiển thị biểu đồ có thể bị trì hoãn cho đến khi tab thích hợp được nhấp vào, nó sẽ giải quyết được sự cố. Đáng buồn thay, tôi không có ý tưởng làm thế nào để làm điều đó, và nghiên cứu của tôi đã không được hiệu quả. Gần nhất tôi có thể tìm thấy là this thread, nhưng tôi không tìm thấy bất kỳ câu trả lời thực sự ở đó.

Tôi đánh giá cao bất kỳ lời khuyên nào nếu bạn có, và tôi rất vui khi được theo dõi thêm thông tin nếu cần.

Answer 1

tùy chọn biểu đồ thay đổi để thiết lập chiều rộng và chiều cao như bạn cần

var options = { 
      title: 'Company Performance' 
      ,width:900 
      ,height:500 
     }; 

Answer 2

Rendering bảng xếp hạng trong một div ẩn (đó là những gì các tab không được lựa chọn một giao diện người dùng tab khả năng nhất là) messes với Visualization Khả năng phát hiện thứ nguyên của API, vì vậy bạn muốn thực hiện một trong hai thứ: hoặc hiển thị tất cả các biểu đồ trước khi tạo các tab hoặc (như bạn đã bắt gặp) để kết hợp trình xử lý sự kiện để vẽ biểu đồ khi tab được mở lần đầu tiên. Đặt chiều cao và chiều rộng trong các tùy chọn của biểu đồ là không đủ để giải quyết vấn đề trong tất cả các trình duyệt.

tôi quét qua các tài liệu easytabs, và có vẻ như bạn sẽ có thể làm điều gì đó như thế này:

// draw chart(s) in your default open tab 

// track which tabs you've drawn charts in 
var chartsDrawn = { 
    tab1: true, 
    tab2: false, 
    tab3: false 
    // etc 
}; 

$('#tab-container').bind('easytabs:after', function (e) { 
    if (e.tab == 'tab-2' && !chartsDrawn.tab2) { 
     // draw chart(s) in tab 2 
     chartsDrawn.tab2 = true; 
    } 
    else if (e.tab == 'tab-3' && !chartsDrawn.tab3) { 
     // draw chart(s) in tab 3 
     chartsDrawn.tab3 = true; 
    } 
    // etc 
}); 

Answer 3

Đây là cách tôi giải quyết bằng góc-bootstrap https://angular-ui.github.io/bootstrap/

<div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div> 

<tab heading="Past Week" select="googleChartSizeFix()"> 

googleChartSizeFix = function() { 
    $('svg').parent().css({ opacity:"0" }); 
    $(window).resize(); 
}; 

displayGoogleCharts = function() { 
    $('svg').parent().css({ opacity:"1" }); 
}; 

Mỗi thời gian một Tab được chọn (chức năng googleChartSizeFix được kích hoạt) Google Chart được đặt thành trong suốt (opacity = 0, vì vậy nó không biến mất khi sử dụng hide(), nhưng giữ kích thước của nó vì nội dung của nó là trong suốt) theo sau là thay đổi kích thước cửa sổ đang kích hoạt d, điều này bắt buộc Google Chart để phù hợp với div chứa nó, bằng cách sử dụng chiều rộng 100% và chiều cao 100%:

"options": { 
    "chartArea": { 
     "width":'100%', 
     "height":'100%' 
    } 
} 

và cuối cùng một lần Chart Google đã sẵn sàng (sau khi thay đổi kích thước) các displayGoogleCharts chức năng được kích hoạt và độ mờ của biểu đồ google được đặt lại thành 1, do đó nội dung sẽ hiển thị lại một lần nữa.

Answer 4

Tôi tình cờ gặp "tính năng" này trong các tab Bootstrap. Khi cắt và dán nhiều tab trong HTML của tôi, tôi đã vô tình rời khỏi < div class = "tab-pane đang hoạt động"> ở trạng thái "hoạt động" cho tất cả các tab. Kết quả là nội dung cho tất cả các tab được hiển thị tuần tự trong tab đầu tiên, nhưng đã biến mất khi bạn chuyển tab.

Giải pháp của tôi cho các tab ẩn là xác định chúng là hoạt động và sau đó loại bỏ lớp "hoạt động" khỏi div sau khi tôi gọi chart.draw.

<div class="tab-pane active" id="myid" role="tabpanel"> 
    <script type="text/javascript"> 
     // all the chart stuff 
     chart.draw(data, options); 
     $('#myid').removeClass('active'); 
    </script> 
</div> 

Tôi thấy rằng các tab jQuery cũng sử dụng lớp "hoạt động". Có lẽ mẹo này cũng sẽ hoạt động ở đó.