본문 바로가기

프로그래밍/Chart JS6

chart.js 크기 조정 / 사이즈 조정 chart.js 샘플을 가져와 실행시켜보면 엄청 크다 ... 그래서 chart의 크기를 변경하는 방법을 찾아보았다. 1. chart.js 정적 크기 우선 chart를 그려줄 canvas태그를 넣어주고 원하는 높이와 넓이를 설정해 준다. 그 다음 차트 옵션에 responsive: false 를 추가시켜 준다. responsive는 디폴트로 true로 되어있기 때문에 false로 변경하여 주면 원하는 크기의 chart를 만들어 줄 수 있다. 2. chart.js 동적 크기 chart를 반응형으로 만들고 싶다면 reponsive는 false로 두고 canvas를 수정해 주면 된다. vh vw를 이용하여 반응형으로 만들어 주었다. vh vw를 이용하여 퍼센트처럼 사용할 수 있다. 위 처럼 reponsive옵션을.. 2019. 7. 25.
Chart.js CDN / chart.js 다운로드 / chart.js 사용 예제 Chart.js 사이트 : https://www.chartjs.org/ 깃허브 다운로드 링크 : https://github.com/chartjs/Chart.js CDN : https://cdnjs.com/libraries/Chart.js 다운로드를 받으려면 GitHub에 들어간 뒤 43 releases를 클릭 후 아래로 내리다 보면 Assets가 있다. 원하는 버전의 Assets에 있는 Chart.js.zip파일을 다운받아 주면 된다. CDN을 이용하시려면 위 링크에 접속하여 CDN 주소를 확인 후 head부분에 추가해 주면 된다. 사용 예제 head에 스크립트를 등록해 준 뒤, 차트를 그릴 canvas 태그를 만들어 준다. 그 다음, 스크립트로 그려주면 된다. ctx에 canvas를 담고 chart에 .. 2019. 7. 25.