Web サイトにさまざまなプロットを表示するためのスライド カルーセルを作成しようとしています。プロットは Dygraph で行われます。プロットの 1 つを表示することはできますが、左または右にスライドすると、もう一方は表示されません。アクティブにしたプロットのみが表示されます。これは、bootstrap carousel/dygprah 間のキャンバス描画の競合ですか?
誰かがこの問題を解決しましたか? 最初のアイテムをアクティブにすると最初のプロットが表示されますが、スライドすると 2 番目のプロットは表示されず、2 番目のアイテムをアクティブにするとその逆になります。さらに興味深いことに、両方を「アクティブ」にすると、両方が同時に表示されますが (一方が他方の上に表示されます)、スライドすることで、両方のプロットが適切な場所に正しく表示されます。私のカルーセルのコードは次のとおりです。
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" id="plot1" style="height:300px;"></div>
<div class="item" id="plot2" style="height:300px;"></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
そして、dygraph プロットを生成するスクリプト:
<script type="text/javascript" charset="UTF-8">
$(function() {
var plotdiv = document.getElementById("plot1");
new Dygraph(plotdiv,csvdata,{});
plotdiv = document.getElementById("plot2");
new Dygraph(plotdiv,csvdata, {});
return true;
})
</script>
助けてくれてありがとう