Google Charts và Twitter tab Bootstrap

Question

Tôi đang tạo biểu đồ thông qua Google Chart Tools, trong một trang web sử dụng khung công tác Twitter Bootstrap. Có ba loại biểu đồ được hiển thị - biểu đồ dạng bánh, đường và cột, mỗi biểu đồ trong tab riêng lẻ. Dữ liệu biểu đồ được nhận thông qua Ajax.

Ngay lập tức khi nhận dữ liệu qua Ajax, biểu đồ được hiển thị tốt. Nhưng nếu tôi chuyển sang tab khác, tức là, một biểu đồ khác và quay lại biểu đồ đầu tiên, các nhãn trong biểu đồ sẽ được căn chỉnh lại không chính xác.

bao gồm ở đây là những hình ảnh cho thấy vấn đề, trước và sau khi thay đổi tab:

Vấn đề này xảy ra cho các dòng và cột bảng xếp hạng quá.

Nhưng vấn đề không xảy ra nếu tôi thay đổi cửa sổ và sau đó quay lại hoặc nếu tôi ẩn và sau đó hiển thị lại biểu đồ. Nó chỉ xảy ra nếu tôi thay đổi các tab.

Các mark-up cho các tab là như thế này:

<div class="charts-div" style="text-align: center"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#tab-pie" data-toggle="tab">Pie</a></li> 
       <li><a href="#tab-line" data-toggle="tab">Line</a></li> 
       <li><a href="#tab-column" data-toggle="tab">Columns</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="tab-pie"> 
        <div class="chart pie-chart" id="pie-prt"></div> 
       </div> 
       <div class="tab-pane" id="tab-line"> 
        <div class="chart line-chart" id="line-prt"></div> 
       </div> 
       <div class="tab-pane" id="tab-column"> 
        <div class="chart column-chart" id="column-prt"></div> 
       </div> 
      </div> 

    </div> 

Checked trong Chrome 22, IE9 và Firefox 12. Kết quả là như nhau. Không có mã/sự kiện bổ sung được lập trình ở cuối của tôi để thay đổi tab hoặc sự kiện lấy nét tab.

Answer 1

Như mohitp đã chỉ ra có một số nhược điểm đối với giải pháp của davidkonrad. Nếu bạn vẫn muốn các biểu đồ vẫn hoạt động sau khi vẽ chúng, (nghĩa là, chú giải công cụ) thì bạn sẽ phải sử dụng Javascript để vẽ lại biểu đồ.

Với ví dụ của David (trừ mã chuyển dummy) chỉ cần di chuyển các biến bảng xếp hạng với đó là tùy chọn & DataTable nguyên vẹn đến một phạm vi toàn cầu và gọi phương thức bốc thăm lần nữa, bạn có thể thấy một ví dụ về điều này trong hành động ở đây: redraw-google-chart

với ví dụ của David, một khi bạn có biểu đồ của bạn và biểu đồ thông tin trên phạm vi toàn cầu bạn cần phải ràng buộc sau vào sự kiện thể hiện của tab của bạn như vậy:

$('a[data-toggle="tab"]').on('shown', function (e) { 
    chart.draw(data, options); 
    }) 

trong ứng dụng riêng của tôi, tôi vẽ biểu đồ của tôi dựa trên các yêu cầu json phía máy chủ & sẽ có những trường hợp mà tôi có thể có nhiều biểu đồ trên một trang vì vậy thay vào đó tôi thêm biểu đồ của mình & thông tin biểu đồ vào mảng toàn cục có thể được xử lý lại phía máy khách nhiều lần nếu cần.

Answer 2

Vâng, đó là rất dễ dàng reproduceable (nix/trình duyệt khác nhau) sử dụng đánh dấu của bạn và ví dụ piechart tại https://google-developers.appspot.com/chart/interactive/docs/quick_start

Dường như API mở rộng trung tâm giữa SVG khi vẽ văn bản để các tab ẩn. Nhưng tôi đã tìm thấy một giải pháp cho điều này: vẽ biểu đồ/dòng/thanh đến một phần tử giả và chuyển chúng ngay lập tức vào vùng chứa tab.

thay đổi ví dụ biểu đồ từ trên cao:

function drawChart(id) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 2], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300}; 

    var chart = new google.visualization.PieChart(document.getElementById('dummy')); 
    chart.draw(data, options); 
    $('#dummy').children().remove().appendTo('#'+id); 
    } 

nơi nào đó trong mã add

<div id="dummy"></div> 

vẽ các bảng xếp hạng (thông qua giả để bạn .. class="chart xxx" id="xxx-prt")

<script type="text/javascript"> 
$(document).ready(function() { 
    drawChart('pie-prt'); 
    drawChart('line-prt'); 
    drawChart('column-prt'); 
}); 
</script> 

thì biểu đồ được hiển thị theo cùng một cách trên các tab khác nhau, đây là một số f2 http://jsfiddle.net/sjW6Z/ chứng minh rằng nó thực sự hoạt động :)