0

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

交易是这样的：我可以将各种内容放入这个工具中（它实际上只使用每个 div 的一组 < li > 标签或您想在每张幻灯片中放置的任何内容。我可以毫无问题地放置谷歌地图、谷歌街景, pics, etc in this thing 同时。但是当我尝试使用使用 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 个图表放在中间的三个选项卡中，它们都会显示！但是，如果其中一个图表位于最后一个选项卡中，则不会显示。不幸的是，我的需要是这个愚蠢的东西在最后一张幻灯片中，所以现在我不确定我能做什么。

4

1 回答 1

0

问题是，AnythingSlider 创建第一个和最后一个选项卡的副本并将它们放在任一端，因此动画很流畅。我认为最好的解决方案是将图表 ID 更改为一个类，然后在 AnySlider 初始化后创建图表。像这样的东西：

脚本

//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>
于 2010-10-28T16:52:58.923 回答