devOhzl

💬 개요 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..

☑️ grid - containLabel : 그리드 영역에 축 눈금 레이블이 포함되어 있는지 여부 true : 축을 동적으로 사용 가능 / false : 축을 grid.left/right/top/bottom 에 맞춰 고정 가능 - width/height : 차트 그리드의 너비/높이 - top/bottom/left/right : 그리드와 차트 사이의 거리 , 쉽게 말하면 padding 값 ☑️ yAxis - splitNumber : y축 갯수 제한 - interval : y축 눈금 간격 설정 -- 계속 추가 예정

📌 개요 차트는 프로젝트를 진행 하면서 필수로 자주 사용하였다. echarts , chartjs를 사용해보았는데, echarts가 document나 exmaple이 많아서 사용하기 편리했다. 📌 적용하기 ⏩ echarts 설치 npm install echarts ⏩ vue.js 에 적용하기