일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 타입선언
- NonNullable
- 공통컴포넌트
- 레이아웃쪼개기
- React.js
- 폰트적용하기
- 티스토리꾸미기
- 커스텀
- typescript
- utilty type
- returnType
- const 단언문
- 반복줄이기
- click and drag
- 제네릭
- 타입좁히기
- javascript
- CSS
- 리액트
- 타입스크립트
- 누구나 자료구조와 알고리즘
- react
- 성능최적화
- TSDoc
- Chart.js
- JS console
- reactjs
- 개발콘텐츠
- vue.js
- 2022
- Today
- Total
목록Development/Chart.js (6)
몽땅뚝딱 개발자
1. 쉽게 사용할 수 있도록 전역변수를 설정해준다. Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"e282f478ff36cef0fd98943c37b1f54b","page_data":{},"locale":"en-US","layout":"fontello.layout"} fontello.com fontello를 사용하여 구현할 것이라 원하는 유니코드를 가져와서 구성하면 된다. (FontAwesome도 사용 가능) export enum Icon { 'EXCLAMATION' = 'EXCLAMATION', 'CHECK' = 'CHECK', 'BELL' = 'BELL', ..
이렇게 크기가 고정되면 레이블이 잘 보이지 않는 현상이 발생.. ◽ 기존 font: { size: 14, family: 'Pretendard', }, ◽ 변경 font: function (context) { const width = context.chart.width const size = Math.round(width / 32) return { size: size, family: 'Pretendard', } }, 크기에 맞게 가독성있는 크기로 잘 변환되었다. 출처 Limit labels number on Chart.js line chart I want to display all of the points on my chart from the data I get, but I don't want to dis..
아래 옵션을 적용하면 맨 첫번째 축은 start로, 맨 끝 축은 end로 적용되어 레이블이 모두 차트내부로 들어온다. align: 'inner', 이 옵션을 찾기 위해 chart.js github에서 사용자들이 요청하는 부분의 히스토리를 따라 가서 찾아냈다. 하지만... 글로 남기려고 적다보니 혹시 몰라 공식문서를 다시 확인하니 추가되어 있었다 ^_^ (3.9.1 버전기준) The tick alignment along the axis. Can be 'start', 'center', 'end', or 'inner'. inner alignment means align start for first tick and end for the last tick of horizontal axis 좋은 경험이었다..
Chart.js에서 기본적으로 제공하는 데이터 레이블이 구현하는데 한계가 있어 이 플러그인을 사용했다. chartjs-plugin-datalabels chartjs-plugin-datalabels.netlify.app ◽ Scriptable 옵션은 스크립팅이 가능한 경우도 있고 아닌 경우도 있어서 문서를 확인해보면 된다. Scriptable 항목이 'Yes'이면 동적으로 옵션을 줄 수도 있다. (하지만.. 문서에 스크립트를 사용할 수 없다고 작성되어 있었음에도 동작하는 것들이 있었다.) ◽ Option const dataLabelOption = { offset: 0, // 레이블의 패딩 적용 (기본값이 4이기 때문에 0으로 조정) borderRadius: '5', // 레이블을 감싸는 영역에 border..
뷰포트가 달라지면 원래의 비율을 유지한 채 늘어난다. 반응형인 경우 아래 옵션을 추가하면 비율이 아닌 부모의 크기에 맞춰 늘어나고 줄어든다. options: { maintainAspectRatio: false, } 출처 Responsive Charts | Chart.js Responsive Charts When it comes to changing the chart size based on the window size, a major limitation is that the canvas render size (canvas.width and .height) can not be expressed with relative values, contrary to the display size (canvas.styl..
plugins: [legendMargin], // 범례와 그래프 간 간격조정 const legendMargin = { id: 'legendMargin', beforeInit(chart, legend, options) { const fitValue = chart.legend.fit const spacing = 20 // 추가할 간격 chart.legend.fit = function fit() { fitValue.bind(chart.legend)() return (this.height += spacing) } }, } 출처 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.