0

AnythingSliderツールに詳しい人がいるといいのですが...

ここに契約があります: 私はあらゆる種類のコンテンツをこのツールに入れることができます (実際には、div ごとに 1 セットの < li > タグまたはスライドごとに入れたいコンテンツを使用するだけです。Google マップ、Google ストリートビューを入れるのに問題はありません。 、写真などを同時にこのことで. しかし、Google Vis API で作成された複数のグラフを使用しようとすると、リストされている最初のグラフのみが表示されます. 2 番目のグラフをスライダーから削除して、別の場所に配置するとページ、それは問題なく表示されます. 私は本当にそれをスライダーに入れて動作させる必要があります.

2 つのグラフを作成するスクリプトの例を次に示します。

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 をスライダーの外に移動して、ページの別の場所に配置すると、チャートは問題なく表示されます。

最後のスライドに他のコンテンツを配置してみました (実際には、この 2 枚だけでなく 4 枚のスライドがあります)。画像やテキストなどであれば、そのスライドに表示されます。でもそれがチャートなら.. 行かない。

更新: 私はこれを少し試して、スライダーに最大 3 つのチャートを投入しました。チャート div が表示されないのは、最後のタブ (li タグ) にある場合のみです。では、5 つのタブ/スライドがあり、中央の 3 つのタブに 3 つのグラフを配置すると、すべて表示されます。しかし、それらのチャートの 1 つが最後のタブにある場合、それは表示されません。残念ながら、私の必要としているのは、このばかげたことが最後のスライドにあるということです。そのため、何ができるかわかりません。

4

1 に答える 1

0

問題は、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>
于 2010-10-28T16:52:58.923 に答える