Liniendiagramm CanvasJS/ChartJS

Question

Ich bin derzeit verschiedene Visualisierungsbibliotheken lernen, habe ich ein Liniendiagramm mit canvasjs gebaut, https://jsfiddle.net/r60xdqbb/

Ich versuche, das gleiche mit chartjs gebaut, aber nicht in der Lage ähnliche Animation hinzuzufügen. Ich fand einen Ansatz von unten nach oben, ich versuchte mehrere Ansätze wie das Hinzufügen von Datasets zu Graphen mit Looping, aber in diesem Fall wächst der gesamte Graph einschließlich der X- und Y-Achse.

Gibt es eine Möglichkeit, das gleiche Verhalten mit Chartjs zu generieren?

Vielen Dank im Voraus.

CanvasJS JS:

var chart = new CanvasJS.Chart("chartContainer", { 
     animationEnabled: true, 
     axisY: { 
     title: " Y AXIS", 
     tickLength: 0, 
     lineThickness: 0, 
     margin: 0, 
     valueFormatString: " ", //comment this to show numeric values 
     includeZero: false, 
     gridColor: "transparent", 
     }, 
     axisX: { 
     title: "X Axis", 
     tickLength: 0, 
     margin: 0, 
     lineThickness: 0, 
     valueFormatString: " ", //comment this to show numeric values 
     includeZero: false, 
     }, 
     data: [{ 
     type: "line", 
     color: "#E77973", 
     dataPoints: [ 
      { y: 450 }, 
      { y: 414 }, 
      { y: 520 }, 
      { y: 460 }, 
      { y: 450 }, 
      { y: 500 }, 
      { y: 480 }, 
      { y: 480 }, 
      { y: 410 }, 
      { y: 500 }, 
      { y: 480 }, 
      { y: 510 } 
     ] 
     }, 
     { 
     type: "line", 
     lineDashType: "dash", 
     color: "black", 
     markerType: "none", 
     dataPoints: [ 
      { y: 460 }, 
      { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 }, { y: 460 } 

     ] 
     }] 
    }); 
    chart.render(); 

ChartJS Javascript-Code

var ctx = document.getElementById('myChart').getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'line', 
    options: { 
     legend: { 
     display: false, 
     }, 
     scales: { 
     xAxes: [{ 
      gridLines: { 
      display: false, 
      }, 
      ticks: { 
      fontSize: 15, 
      fontColor: 'lightgrey' 
      } 
     }], 
     yAxes: [{ 
      gridLines: { 
      drawBorder: false, 
      }, 
      ticks: { 
      beginAtZero: true, 
      fontSize: 15, 
      fontColor: 'lightgrey', 
      maxTicksLimit: 5, 
      padding: 25, 
      } 
     }] 
     }, 
     tooltips: { 
     backgroundColor: '#1e90ff' 
     } 
    }, 
    data: { 
     labels: ['M', 'Tu', 'W', 'Th', 'F', 'Sa', 'Su'], 
    datasets: [{ 
     data: [0, 0, 0, 11, 9, 17, 13], 
     tension: 0.0, 
     borderColor: 'rgb(255,190,70)', 
     backgroundColor: 'rgba(0,0,0,0.0)', 
     pointBackgroundColor: ['white', 'white', 'white', 'white', 'white', 'white', 'rgb(255,190,70)'], 
     pointRadius: 4, 
     borderWidth: 2 
    }] 
    } 
}); 

Answer 1

Chart.js haben keine Animationen so. Sie bieten nur die Animation "Von unten wachsen".

Sie können möglicherweise etwas zusammen mit ihrem onAnimationComplete Callback hacken, und dann einen neuen Datenpunkt nach dem letzten hinzufügen hinzugefügt. Ich weiß nicht, wie die Aufführung aussehen würde, aber in der Theorie würde es funktionieren.

In meiner Erfahrung mit Chart.js, wenn Sie etwas tun möchten, das nicht aus der Box angeboten wird, sind Sie besser dran, eine andere Bibliothek zu betrachten.