重新呈现（或动画）chart.js图表在deck.js过渡

我做了一个deck.js幻灯片，其中一张幻灯片中有一个chart.js饼图。重新呈现（或动画）chart.js图表在deck.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>

来源

2017-04-10 Yobmod

我这通过移动定义图表的代码是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变量声明放在其他任何位置时首次初始化图表，但在replacurrent（）函数中的myChart1.render()或myChart1.reset().update()仍然不会执行任何操作。

来源

2017-04-11 10:21:00 Yobmod

重新呈现（或动画）chart.js图表​​在deck.js过渡

回答

相关问题

重新呈现（或动画）chart.js图表在deck.js过渡