在deck.js 中的过渡上重新渲染（或动画）chart.js 图表答案

【问题标题】：Re-render (or animate) chart.js chart on transition within deck.js在deck.js 中的过渡上重新渲染（或动画）chart.js 图表
【发布时间】：2017-09-05 16:31:59
【问题描述】：

我制作了一个 deck.js 幻灯片，其中一张幻灯片中有一个 chart.js 饼图。

我正在尝试让饼图在每次转换幻灯片时都进行动画处理。它目前仅在浏览器刷新后第一次过渡到动画。

我尝试添加deck.events.js 扩展并使用chart.update()，但它说图表未定义。没有deck.becameCurrent sn-p，图表显示，使用 sn-p，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>

【问题讨论】：

标签： javascript jquery chart.js chart.js2 deck.js

【解决方案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 变量声明放在其他任何地方都会第一次初始化图表，但在 becomeCurrent() 函数中的 myChart1.render() 或 myChart1.reset().update() 似乎仍然没有做任何事情。

【讨论】：