Creating Beautiful Charts Using Vue.js Wrappers for Chart.js - SitePoint

www.sitepoint.com

위 페이지를 들어가면 vue에서 차트 그리는 것에 대한 간단한 예제 소스를 볼 수 있다.

vue-charts, vue-chartjs, vue-chartkick 를 이용한 예제이고,

vue-cli 에서 작업하였으니 어렵지 않게 따라할 수 있을 것이다.

맨 마지막에 3가지에 대해 차이점을 정리해 놓았는데, 간단히 옮겨 보자면…

vue-charts

세가지 중에 가장 파워풀하다. 반응성이나 유연함에 있어서 좋다. (데이터의 변화가 있을 때 자동으로 re-render 된다.)

vue-chartjs 와 다르게(?) 셋팅이 쉽다. 데이터를 처리하고 render 하기 위해 콤포넌트를 분리할 필요가 없다.(예제 소스 한번 보세요) dataset 에서의 변화가 있으면 자동으로 re-render 되는 유연함을 가지고 있다.

셋중에 가장 쉬울 것이다. vue-chartkick에서는 2가지 방법으로 dataset 이 추가 될 수 있다.

예제와 같이 inline 으로 할 수도 있다.

<bar-chart :data=”[[‘Work’, 1322], [‘Play’, 1492]]”></bar-chart>

또는

<line-chart :data=”chartData”></line-chart>

이렇게 이렇게 하고서는 Vue data 에 chartData array 를 만들면 된다.

차트를 이미지로 다운로드 할 수 있게 하는 기능을 가지고 있다. (다른 wrapper 라이브러리들을 가지고 있지 않다)

단점이 있다면 데이터의 변화를 즉각적으로 반영하지 않는 다는 것이다.

code 와 샘플 페이지는 아래에서 확인할 수 있다.

github.com

참고 :