折れ線グラフCanvasJS/ChartJS

Question

私は現在、別の可視化ライブラリを勉強は、私がcanvasjsを使用して折れ線グラフ、 https://jsfiddle.net/r60xdqbb/

私が構築され、同じ使用chartjsしようとしたが、同様のアニメーションを追加することができませんを構築しています。私はループ用いてグラフ化するデータセットを追加することによってのような複数のアプローチを試みたが、その場合、全体のグラフはX軸とY軸を含む増加している、私は1つ https://codepen.io/anon/pen/xqGGaV

を発見したが、それが下から上に発信されます。

Chartjsを使用して同じ動作を生成する方法はありますか？

ありがとうございました。

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のコード

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はそのようなアニメーションを持っていません。彼らは「底から成長する」アニメーションだけを提供します。

onAnimationCompleteコールバックを使用して何かをハッキングし、最後にonを追加した後に新しいデータポイントを追加することができます。私はパフォーマンスがどのように見えるかはわかりませんが、理論的にはうまくいくでしょう。

Chart.jsでの私の経験では、すぐに利用できないものをしたいのであれば、別のライブラリを見る方が良いでしょう。