在 deck.js 内转换时重新渲染（或动画）chart.js 图表

Question

我制作了一个 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>

Answer 1

我通过将定义图表的代码移动到 becameCurrent 事件函数中来实现它：

 $(function() {
    $.deck('.slide', {countNested: false});
    $.deck('showGoTo');
    $("#pie").bind('deck.becameCurrent', function(ev, direction) {
        const ctx1 = $("#NestedChart").get(0).getContext("2d");
        const myChart1 = new Chart(ctx1, {.....

这会在每次转换时重新呈现图表。 if 循环允许它仅在向前转换时设置动画。将 myChart1 变量声明放在其他任何地方会第一次初始化图表，但 becameCurrent() 函数中的 myChart1.render() 或 myChart1.reset().update() 似乎仍然没有做任何事情。

在 deck.js 内转换时重新渲染（或动画）chart.js 图表

Re-render (or animate) chart.js chart on transition within deck.js

javascript

jquery

deck.js

chart.js

chart.js2