jQuery AnythingSlider 不显示多个 Google Visualization API 图表

Question

希望有人熟悉AnythingSlider 工具...

这是交易：我可以将各种内容放入这个工具中（实际上，每个 div 只使用一组

标签或您想在每张幻灯片中放置的任何内容。 我可以同时将谷歌地图、谷歌街景、图片等放入这个东西。但是，当我尝试使用使用 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>