devOhzl

💬 구현하고자 하는 기능 차트 컴포넌트의 사이즈를 고정해놓으면 라벨 갯수가 늘어날 때 Bar가 점점 작아진다. ① 처럼 라벨 갯수가 적으면 상관이 없었지만, ② 처럼 라벨 갯수가 점점 많아지면 그리드가 점점 좁아진다. 내가 그리는 차트같은 경우, 라벨 갯수가 몇 개까지 나올지 몰랐기 때문에 라벨 갯수가 많아지게 되면 Bar가 너무 작아지기 때문에 차트를 보기 힘들 것 같았다. 📌 기능 구현하기 1️⃣ div 한 개를 더 추가한다. - 수정 전 - 수정 후 2️⃣ css 추가하기 클래스 container 의 width, max-width 을 설정한다. .container { width: 1100px; max-width: 1100px; overflow-x: auto; overflow-y: hidden; he..

💬 개요 Chartjs를 이용한 Bar Chart에서 범례와 차트가 딱 붙어있는 현상 해결하기 0️⃣ 스크립트 작성 전 1️⃣ 차트 생성 후 플러그인 추가 :plugins="[legendMargin]" 2️⃣ 플러그인 객체 생성 legendMargin() { return { id: 'legendMargin', afterInit(chart,legend,options) { const fitValue = chart.legend.fit; chart.legend.fit = function fit() { fitValue.bind(chart.legend)(); return this.height += 20;// 원래 범례 높이에 20 더하기 } } } }, 3️⃣ 결과 💬 참고 https://youtu.be/87rnM..

💬 개요 차트는 프로젝트를 진행하면서 필수로 자주 사용하였다. echarts , chartjs를 사용해 보았는데, 그중 chartjs 사용법을 정리해보고자 한다. 📌 정의 vue-chartjs 라이브러리는 chart.js를 vue에서 사용할 수 있도록 한 라이브러리이다. chart.js를 사용하기 위해서는 chart.js, vue-chartjs 라이브러리가 기본적으로 필요하며, 기타 차트 관련 플러그인 라이브러리를 추가 설치할 수 있다. 📌 vue-chartjs 설치 npm install vue-chartjs chart.js 📌 chartjs 플러그인 라이브러리 설치 (필수X) ⏩ chartjs-plugin-datalabels 설치 : 차트 내에 데이터의 값을 표시하기 위한 플러그인 라이브러리 npm i..