jQuery的AnythingSlider不顯示多個谷歌可視化API圖表

Question

希望有人在那裏熟悉瓦特/ AnythingSlider工具...

這裏的交易：我能夠把各種內容到這個工具（這真的只是使用一組< li>標籤每格或任何內容，你想放在每張幻燈片 我沒有任何問題，同時把谷歌地圖，谷歌街景，圖片等，但當我嘗試使用多個使用Google Vis API創建的圖表，只顯示第一個列表，當我從滑動條中移除第二個圖表並將其放在頁面上的其他位置時，它顯示得很好，我真的需要將它放入滑動條並工作。

下面是一個創建兩個圖表我的腳本的例子：

google.load('visualization', '1', {'packages':['geomap', 'corechart']}); 

// Set a callback to run when the API is loaded. 
google.setOnLoadCallback(drawExistMap); 
google.setOnLoadCallback(drawTrussChart); 

// Callback that creates and populates a data table 
function drawExistMap() { 
var data = new google.visualization.DataTable(); 

//do a bunch of stuff here to populate the table and create the chart 

//Create the table visualization object and call the draw method on it. 
var container = document.getElementById('existMap'); 
var geomap = new google.visualization.GeoMap(container); 
geomap.draw(data, options); 

} 

//drawTrussChart creates pie chart showing truss types of returned bridges 
function drawTrussChart() { 
//do more stuff similar to the above ...... 
var chart = new google.visualization.PieChart(document.getElementById('TTChart_div')); 
chart.draw(data, options); 
} 

//The slider on my page looks like: 
<!-- AnythingSlider #1 --> 
<ul id="slider1"> 
    <li><div id="existMap"></div></li> 
    <li><div id="TTChart_div"></div></li> 
</ul> 

再次，如果我移動DIV TTChart_div出滑塊，並把它在其他地方的頁面上，圖表顯示就好了。

我試過在最後一張幻燈片中放置其他內容（實際上有四張幻燈片，而不僅僅是這兩張）。如果它是一個圖像或文字或類似的東西，它會出現在幻燈片中。但如果它是圖表，它不會去。

更新：我已經試驗了這一點，並拋出了多達3個圖表到滑塊。它只有在圖表div處於LAST選項卡（li標籤）中時纔會顯示。所以，假設我有5個選項卡/幻燈片，並將3個圖表放在中間的三個選項卡中，它們都顯示出來！但如果其中一個圖表位於最後一個標籤中，則不會顯示。不幸的是，我的需求是，這愚蠢的事情是在最後一張幻燈片，所以現在我不知道我能做什麼。

Answer 1

問題是AnythingSlider創建了第一個和最後一個選項卡的副本，並將它們放在任一端以便動畫平滑。我認爲最好的解決方案是將圖表ID改爲類，然後在AnythingSlider初始化後創建圖表。事情是這樣的：

腳本

//drawTrussChart creates pie chart showing truss types of returned bridges 
function drawTrussChart() { 
//do more stuff similar to the above ...... 
var chart = new google.visualization.PieChart($('.TTChart_div')[0]); // target class 
chart.draw(data, options); 
} 

// Initialize Slider first 
$('#slider1').anythingSlider(...); 

// After anythingSlider is set up, initialize the charts 
drawTrussChart(); 

HTML

<!-- AnythingSlider #1 --> 
<ul id="slider1"> 
<li><div class="existMap"></div></li> 
<li><div class="TTChart_div"></div></li> 
</ul>