본문 바로가기
html, css, javascript

[javascript] chart.js로 차트 그리기

by 타닥타닥 토다토닥 부부 2022. 12. 10.
반응형

Chart.js로 차트 그리기

본 페이지 내용은 아래 사이트의 그래프를 단순히 옮겨놓은 것입니다. 아래 페이지로 이동하시면 더 많은 차트를 보실 수 있습니다 !!

 

tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

 

 

10 Chart.js example charts to get you started

A list of 10 graphs (bar chart, pie, line, etc.) with data set up to render charts that you can copy and paste into your projects

tobiasahlin.com

1. 바차트 (bar chart)

See the Pen barchart by hyunho (@momalcy) on CodePen.

2. 라인차트(line chart)

See the Pen linechart by hyunho (@momalcy) on CodePen.

3. 파이 차트 (pie chart)

See the Pen pie chart by hyunho (@momalcy) on CodePen.

4. 레이더 차트(rader chart)

See the Pen Rader chart by hyunho (@momalcy) on CodePen.

5. 폴라 에리어 차트 (polar area chart)

See the Pen polar area chart by hyunho (@momalcy) on CodePen.

6. 도넛 차트 (doughnut chart)

See the Pen doughnut chart by hyunho (@momalcy) on CodePen.

7. 수평 바 차트 (horizontal bar chart)

See the Pen horizontal bar plot by hyunho (@momalcy) on CodePen.

데이터 분석 결과를 웹서비스 형태로 보여줄 때 ...

차트를 표현해야 하고 ...

파이썬으로 그린 차트를 표현 하자니...

그림 파일로 저장해서 다시 서버사이드로 넘기고 어쩌고 ....는 복잡하고 

저의 경우 chart.js 같은 자바 스크립트 코드를 통해 html 에 표현하고 그래프를 표현하는데 필요한 수치 및 축의 이름 등만 파이썬에서 도출하여 json 이나 list 형태로 서버 단에 넘겨 그래프를 그립니다. !!! 

 

 

본 페이지 내용은 아래 사이트의 그래프를 단순히 옮겨놓은 것입니다. 아래 페이지로 이동하시면 더 많은 차트를 보실 수 있습니다 !!

 

tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

 

10 Chart.js example charts to get you started

A list of 10 graphs (bar chart, pie, line, etc.) with data set up to render charts that you can copy and paste into your projects

tobiasahlin.com

 

반응형

댓글