[라이브러리] chart.js

chart.js는 프로젝트안에 그래프들을 그려줄 때 쓰기 유용한 라이브러리이다.

 

 

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

 

html 파일 안에 CDN을 작성해준다

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

 

그리고 chart가 그려지기 원하는 부분에 

 

<div>
  <canvas id="myChart"></canvas>
</div>

canvas 태그를 이용하여 위치시켜준다.

 

그리고 

https://www.chartjs.org/docs/latest/samples/scales/linear-step-size.html

Linear Scale - Step Size | Chart.js

이 페이지에 들어가면 여러 가지의 그래프들을 볼 수 있다.

이 중에서 원하는 디자인을 선택하고 그 아래 어떤 방식으로 작성되어 있는지 확인 후 

js파일이나 아니면 <script></script> 태그 사이에 작성해준다.