Chart.js 2.1.2 Balkendiagramm Animation Ausgabe

Question

Ich habe ein Balkendiagramm in chart.js 2.1.2, das ich gerade von 1. etwas aktualisiert habe. In 1. können Sie angeben, wann das Balkendiagramm animiert werden soll. Im Wesentlichen lade ich das Diagramm beim Laden der Seite und setze dann einen Timer, um die Daten zu aktualisieren und das Diagramm alle 5 Sekunden neu zu zeichnen, ohne dass der Benutzer die Seite neu laden muss. Ich möchte, dass das Balkendiagramm nur beim ersten Laden animiert wird und nicht bei nachfolgenden Aktualisierungen. In der Version 1. musste man nur die Animationseigenschaft des Balkendiagramms ändern, wenn es aktualisiert wurde. In Version 2.1.2 sehe ich keinen Weg, dies zu tun. An dieser Stelle würde ich mich freuen, wenn ich die Animation des Balkendiagramms komplett deaktivieren könnte. Ich habe jedoch auch andere Kreisdiagramme auf der Seite, auf denen die Animationseinstellungen funktionieren, so dass ich die Animationseinstellungen nicht global ändern möchte.

HTML (Auszug)

<div class="text-center"> 
    <div class="row"> 
    <div id="regbyhour-container" class="col-sm-12"> 
     <h4>Registrations by Hour</h4> 
     <canvas id="regbyhour"></canvas> 
    </div> 
    </div> 
</div> 

Javascript

 <script type="text/javascript"> 
      var barData = defineBarDataArray(); 

      $(function() { 
       // Global Chart Options 
       Chart.defaults.global.legend.display = false; 
       Chart.defaults.global.maintainAspectRatio = true; 
       // Bar Chart Options 
       Chart.defaults.bar.scaleBeginAtZero = false; 

       updateBarChart(true) 

       setInterval(function() { 
        updateBarChart(false) 
       }, 5000); 
      }); 

      function defineBarDataArray() { 
       return { 
        labels: [], 
        datasets: [{ 
         label: "Registrations", 
         backgroundColor: "rgba(151,187,205,0.5)", 
         borderColor: "rgba(151,187,205,0.8)", 
         borderWidth: 3, 
         data: [] 
        }] 
       }; 
      }; 

      function drawRegByHourChart(animate) { 

       $("#regbyhour").remove(); 
       $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>'); 

       var context = $("#regbyhour"); 
       var chart = new Chart(context, { 
        type: 'bar', 
        data: barData 
        // Need to enable or disable animation here based on animate parameter 
       }); 
      }; 

      function updateBarChart(animate) { 
       barData = defineBarDataArray(); 
       barData.labels.push("12:00 PM"); 
       barData.labels.push("1:00 PM"); 
       barData.labels.push("2:00 PM"); 
       barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000)); 
       barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000)); 
       barData.datasets[0].data.push(1 + Math.floor(Math.random() * 2000)); 
       drawRegByHourChart(animate); 
      }; 
     </script> 

Ich sehe nichts in der Dokumentation here, das sagt die Animations-Optionen angeben können, wie Sie können mit einem Kuchendiagramm. Was vermisse ich?

Answer 1

Ich habe dies als Fehler auf der chart.js GitHub Seite posten, da ich hier keine Antworten erhalten habe. Nach dem Vorschlag von etimberg änderte ich die drawRegByHourChart Funktion von dieser:

function drawRegByHourChart(animate) { 

      $("#regbyhour").remove(); 
      $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>'); 

      var context = $("#regbyhour"); 
      var chart = new Chart(context, { 
       type: 'bar', 
       data: barData 
       // Need to enable or disable animation here based on animate parameter 
      }); 
     }; 

Um dies:

function drawRegByHourChart(animate) { 

     $("#regbyhour").remove(); 
     $("#regbyhour-container").append('<canvas id="regbyhour"></canvas>'); 

     var context = $("#regbyhour"); 
     var chart = new Chart(context, { 
      type: 'bar', 
      data: barData 
     }); 
     if (!animate) { 
      chart.update(0); 
     } 
    };