0
deck.jsスライドショーを作成しました。スライドの1つにchart.js piechartがあります。deck.js内での遷移時のchart.jsグラフの再レンダリング（またはアニメーション化）
私は、スライドが移行されるたびにアニメーションを作成しようとしています。現在のところ、ブラウザが更新された後に初めて移行されたときにのみアニメートされます。
私はdeck.events.js拡張を追加し、chart.update()を使ってみましたが、グラフが定義されていないと言います。 deck.becameCurrentスニペットがないと、グラフが表示され、スニペットではconsole.logが機能します。
どのようにすれば、deck.eventにチャートインスタンスを認識させることができますか？
chart.update()ここで最初のアニメーションをトリガする正しい方法はありますか？
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
<script src='{% static "vendor/deckjs/core/deck.core.js" %}'></script>
<script src='{% static "vendor/deckjs/extensions/events/deck.events.js" %}'>
<div class="deck-container">
<section class="slide" id="pie">
<script>
var ctx1 = $("#NestedChart").get(0).getContext("2d");
var myChart1 = new Chart(ctx1, {
type: 'doughnut',
data: {
labels: [1,2,3,4,5],
datasets: [{
data: [10,89,4,34,33],
},
options: {
animation: {
duration:2000
},
});
})
</script>
<div style="position: relative; height: 500px; width:500px" class='col-sm-6'>
<canvas style="position:absolute; top: 0px; left: 0px" id="NestedChart" width="400" height="400"></canvas>
</div>
</section>
</div>
<script>
$(function() {
$.deck('.slide', {countNested: false});
$("#pie").bind('deck.becameCurrent', function(ev, direction) {
console.log("test chart update");
myChart1.update();
});
});
</script>
</body>