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>