Google Charts和Twitter Bootstrap標籤

Question

我在使用Twitter Bootstrap框架的網頁中通過Google Chart Tools創建圖表。有三種類型的圖表顯示 - 餅圖，行和列圖表，每個都在單獨的選項卡中。圖表數據通過Ajax接收。

立即通過Ajax接收數據，圖表顯示正常。但是，如果我移動到另一個選項卡（即另一個圖表），並返回到第一個選項卡，則圖表中的標籤會錯誤地重新對齊。

此處所包括的是顯示該問題，前和標籤改變之後的圖像：對行和列的圖表發生

此問題了。

但是，如果我改變窗口，然後回來，或者如果我隱藏，然後重新顯示圖表，則不會發生問題。只有當我更改標籤時纔會發生。

的標記爲向上的標籤是這樣的：

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

經過在鉻22，IE9和Firefox 12.結果是相同的。在我的結尾處沒有爲選項卡更改或選項卡焦點事件編寫額外的代碼/事件。

Answer 1

正如mohitp指出的，davidkonrad的解決方案有一些缺點。如果您仍然希望圖表在繪製之後保持功能（即工具提示），那麼您將不得不使用Javascript重新繪製圖表。

由於大衛的例子（減去虛位移代碼）只需要移動圖表變量與它的選項&數據表完整的全球範圍內，並再次調用draw方法，你可以在行動中看到這樣的例子在這裏：redraw-google-chart

隨着大衛的例子，一旦你有你的圖表和圖表信息在全球範圍內，你需要綁定以下到您的標籤的顯示事件像這樣：

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

在我自己的應用程序，我畫我的圖表基於服務器端的json請求&會有這樣的情況，我可能在單個頁面上有很多圖表，因此我將圖表&圖表信息附加到全局範圍的數組，可以根據需要多次重新處理客戶端。

Answer 2

沒錯，就是用你的標記和餅圖例子很容易reproduceable（尼克斯/各種瀏覽器）在https://google-developers.appspot.com/chart/interactive/docs/quick_start

看來，繪製文本隱藏標籤時的API擴展了SVG的中部中心。但是我找到了一個解決方法：將圖表/線條/圖形繪製到一個虛擬元素並將它們立即移動到選項卡容器。

改變的圖表示例從上方：

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); 
    } 

某處代碼添加

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

繪製圖表（經由虛設到您.. class="chart xxx" id="xxx-prt"）

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

則圖表在不同的選項卡上呈現相同的方式，這裏是一個小提琴http://jsfiddle.net/sjW6Z/證明它實際上有效:)