라인 차트 CanvasJS/ChartJS

Question

나는 현재 다른 시각화 라이브러리를 배우고, 나는 canvasjs를 사용하여 선형 차트, https://jsfiddle.net/r60xdqbb/

내가 만든 같은 사용 chartjs하려고하지만, 비슷한 애니메이션을 추가 할 수 없습니다입니다을 구축했다. 하나를 찾았습니다 https://codepen.io/anon/pen/xqGGaV

그러나 아래에서 위로 가기 때문에 루프를 사용하여 그래프에 데이터 집합을 추가하는 등의 여러 방법을 시도했지만이 경우 전체 그래프가 X 축과 Y 축을 포함하여 증가하고 있습니다.

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 자바 스크립트 코드

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 콜백을 사용하여 무언가를 해킹 한 다음 마지막에 추가 한 후에 새 데이터 요소를 추가 할 수 있습니다. 성능이 어떻게 될지 모르지만 이론적으로는 효과가 있습니다.

Chart.js를 사용해 본 경험이있는 경우, 기본적으로 제공되지 않는 기능을 사용하려면 다른 라이브러리를 보는 것이 좋습니다.