vue-chartjs로 막대 그래프의 왼쪽에 추가했을 때 애니메이션이 이상하지 않게 한다

vue-chartjs 은 Chart.js 을 Vue.js 에서 사용하기 위한 래퍼입니다. 조금 사용법에 궁리가 필요했던 곳을 발견했으므로 써 둡니다.

궁리가 필요한 것은 막대 그래프의 왼쪽에 데이터를 추가했을 때의 애니메이션입니다.

우선, 깨끗하게 움직이게 된 애니메이션을 봐 주세요. 왼쪽에 데이터를 5개 추가하고, 그 후 추가한 데이터를 지우고 있습니다.


다음에, 수정전의, 애니메이션이 조금 이상한 쪽을 봐 주세요. 뭔가, 잘 모르겠지만, 이상하네요.


vue-chartjs 로 그래프를 갱신하고 싶은 경우, vue-chartjs 의 그래프 컴퍼넌트에 건네준 chartData 를 변경하면 자동적으로 재기입됩니다.
하지만 애니메이션 시킬 때 기준으로 하는 것이 데이터 배열의 인덱스인 것 같고(아래에 덧붙여 있음), 데이터 배열의 추가나 삭제를 하는 경우에는 애니메이션이 이상해지는 것 같습니다.
배열의 맨 뒤(그래프적으로는 오른쪽)에 추가나 삭제를 하는 경우는 문제가 되지 않습니다만, 배열의 선두(그래프적으로는 왼쪽)에 추가하는 경우는, 이렇게 되어 버립니다 .

해결책으로 chartData를 다시 할당하는 대신 chartData의 요소를 변경하려고했습니다.

즉,

this.chartData = newChartData;

↑이런 느낌으로 재대입하는 부분을 ↓ 이런 식으로 바꿉니다.

this.chartData.labels.unshift('added');
this.chartData.datasets[0].data.unshift(Math.floor(Math.random() * 100));
this.$refs.chart.$data._chart.update();

chartData의 요소를 변경하는 것만으로는 vue-chartjs 적으로는 chartData의 변경으로 간주되지 않기 때문에, Chart.js 의 갱신을 명시적으로 부르고 있습니다.

샘플 코드는 다음을 참조하십시오.

See the Pen vue-chartjs barchart "add left" animation by mizukoshi akiya ( @akiyah )
on CodePen .

추가

『애니메이션시킬 때 기준으로 하는 것이 데이터의 배열의 인덱스인 것 같아』라고 썼습니다만, 조금 실수하고 있는 것 같습니다. 데이터의 배열의 인덱스만을 기준으로 한다면, 배열의 선두에 추가했을 경우, 아무래도 이전의 배열과 비교해 대응부를 할 수 없으니까요.

「chartData에 새로운 데이터를 재대입한 경우」에 한정하는 이야기라고 생각합니다. chartData의 배열 객체를 유지한 채로 추가나 삭제를 하면, 전후에서의 배열의 대응이 되어 있어, 애니메이션할 수 있는 것이라고 생각합니다.

조금 덤입니다만, vue-chartjs 는 아니고 Chart.js 그리고 왼쪽에 추가하는 샘플도 둡니다.

See the Pen qBEMzMZ by mizukoshi akiya ( @akiyah )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>