Chart.js 2

Vue) Chart.js update 안됨. chart.js update not working, canvas is already in use

상황 검색해서 나온 데이터들을 chart로 보여주는데, 같은 페이지 내 검색 조건을 다르게 해서 데이터가 달라질 경우 chart를 다시 띄우는데 새로 그려지지가 않는다. 처음에는 canvas is already in use 오류를 만났고 다음에는 차트가 변경되지 않는 오류를 만났다. 오류 설명 canvas is already in use 는 차트가 이미 있는데 또 New Chart()로 생성을 하려고 해서 생긴 오류다. New Chart()는 처음만들때 한번만 가능하고, 이미 같은 차트가 있는데 또 생성을 할 수는 없다. 재 생성하려면 기존 차트를 없애야 한다. 차트가 변경되지 않는 이유는 분병 리스트의 데이터 값는 달라졌는데 차트가 그대로 유지가된다. 해결방법 1) 차트를 아예 없애고 다시 생성하기 -..

Front-end/Vue.js 2023.12.20

Vue) Vue3 그래프 그리기 chart.js 적용 방법. 막대그래프, 꺽은선그래프

Vue 프로젝트에 데이터 시각화를 위해 그래프를 붙이고 싶었다. 찾아보니 chart.js 가 있었고, 제일 많이 추천하는 오픈 소스 라이브러리였다. - 무료 - Js, HTML5, Canvas 기반 - 반응형 지원 이 세가지만 봐도 사용하기 충분했다. 사이트 : https://www.chartjs.org/ Chart.js Simple yet flexible JavaScript charting library for the modern web www.chartjs.org 1. chart.js 설치하기 npm install chart.js pakage.json 에 가서 버전을 확인하자. 버전을 따로 지정하지 않았으면 아마 최신버전이 설치됐을것이다. 나는 4.4.0이다. 2. 기본 Bar 차트 만들어보기 우선 ..

Front-end/Vue.js 2023.09.08
반응형