JQuery AnythingSlider не отображает несколько API визуализации Google диаграммы

Question

Надеются кто-то есть знакомые ж/AnythingSlider инструмента ...

Вот сделка: я могу поставить все виды контента в этот инструмент (который на самом деле просто использует один набор < li> тегов на div или любой контент, который вы хотите разместить на слайде. У меня нет проблем с размещением Google Maps, Google StreetView, фото и т. д. в то же время. Но когда я пытаюсь использовать несколько диаграммы, созданные с помощью API Google Vis, отобразится только первый из них. Когда я удаляю второй график с ползунка и помещаю его где-то еще на странице, он отображается в порядке. Мне действительно нужно получить его в слайдере и работать .

Вот пример моего сценария, который создает две таблицы:

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> 

Опять же, если я перееду Диво TTChart_div из ползуна и поместить его в другом месте на странице, на диаграмме отображается только штраф.

Я попытался разместить другой контент на последнем слайде (на самом деле есть четыре слайда, а не только эти два). Если это изображение или текст или что-то в этом роде, оно появляется на этом слайде. но если это график, он не пойдет.

ОБНОВЛЕНИЕ: Я немного экспериментировал с этим и выбросил в слайдер целых 3 диаграммы. Это ТОЛЬКО, когда диаграмма div находится на вкладке LAST (тег li), которую она не отображает. Итак, допустим, у меня есть 5 вкладок/слайдов, и я помещаю 3 диаграммы в средние три вкладки, они все отображаются! Но если одна из этих диаграмм находится на последней вкладке, она не отображается. К сожалению, мои потребности в том, что эта глупая вещь находится на последнем слайде, поэтому теперь я не уверен, что я могу сделать.

Answer 1

Проблема заключается в том, что AnythingSlider создает копию первой и последней вкладки и помещает их с обоих концов, чтобы анимация была гладкой. Я считаю, что лучшим решением было бы изменить идентификатор диаграммы на класс, а затем создать диаграмму после инициализации AnythingSlider. Что-то вроде этого:

Script

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