chart.js(2)
-
Vue에서 Chart.js 차트 데이터 업데이트
차트 생성방법: https://crispypotato.tistory.com/146 Vue에서 Chart.js만 사용하는 방법 vue-chart.js와 같은 vue에서 chart.js를 쉽게 사용할수있는 라이브러리가 있지만 chart.js를 그대로 사용하는게 react와같은 프레임워크가 다른 곳에서도 사용하기 좋을꺼같아 chart.js만 사용하여 데이터 crispypotato.tistory.com 위에 링크대로 차트를 구현하고 안에 데이터값만 변경해주면 mounted 될 때 자동 적용/변경 이라고 생각을 했다. 하지만 이전 데이터가 출력이 되는 현상이 생겨 알아보니 데이터가 변경되는것을 감지해야한다. 순서 1. props 또는 vuex를 이용한 데이터 받아오기 2. let chart 변수 생성 3. cre..
2021.11.18 -
Vue에서 Chart.js만 사용하는 방법
vue-chart.js와 같은 vue에서 chart.js를 쉽게 사용할수있는 라이브러리가 있지만 chart.js를 그대로 사용하는게 react와같은 프레임워크가 다른 곳에서도 사용하기 좋을꺼같아 chart.js만 사용하여 데이터를 만들어 보았다. 1. 설치방법 npm i chart.js 2. 이용 순서 2-1. vue 파일 생성 2-2. chart.js를 import 2-3. 차트를 그리기 위해 canvas태그를 생성 2-4. 차트를 만들기 위한 데이터, 함수 생성 2-1. vue 파일생성 BarChart2.js 라는 bar차트를 생성한다. bar chart 2-2. chart.js import chart.js가 오래되어 지난 버전을 설명하시는 블로그가 있지만 3.6버전에서는 오류를 발생시킨다. 3.6...
2021.11.18