重新呈現（或動畫）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過渡