kasumil의 코딩 공작소

차트.JS 옵션에 대한 설명서가 필요했는데, 그것을 깔끔하게 설명한 내용이 이어서 가져와봤다. Chart.js ver 3.0 이상 적용코드이다. 원래는 내용을 그대로 안가져오는 편이긴하나 가끔 원본 글을 삭제하거나 비공개 처리해서 해당 코드를 못 보는 경우가 있어 가져왔다. 1️⃣anchor - 데이터레이블의 위치 👉🏻영어로는 '닻을 내리다, 정박하다'이다. 즉 데이터레이블이 차트 축에서 얼마나 떨어져있는지 정한다. start: 차트에서 가장 가까이 있다. center: default값이고 차트에서 중간 거리만큼 떨어져있다. end: 차트에서 가장 멀리 떨어져있다. start - center - end 👉🏻차례대로 속성을 start, center, end로 줬을 때이다.(미세한 차이!) 2️⃣clamp ..

차트 js를 사용하다보면 차트 내에서 해당 값이 어떤지 표시할 필요가 있다. 시안성 측면에서 매우 유리하니까. 그런데, 이게 기능구현이 매우 어려웠다. 왜 안되나 했더니 이게 확장 라이브러리로 지원하는 기능이었네? 사용방법은 3번째 링크를 참조하자. 대충 공식문서를 보면 plugins 코드 안에 설정하고, data 객체에도 따로 넣어주면 된다. 하지만 3번째 링크보면 더 자세히 설명되어 있다. Chart.defaults.set('plugins.datalabels', { color: '#FE777B' }); var chart = new Chart(ctx, { options: { plugins: { // Change options for ALL labels of THIS CHART datalabels: { ..

https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.js Getting Started Let's get started using Chart.js! First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness. Now that we have a canvas we can use, we need to include Chart.js in our page. Now, we c www.chartjs.org 차트 작성법은 뭐 대충 이렇고 레이다 차트의 속성이 중요하다. const rada..