javascript chartjs3 [자바스크립트 + Chart.js] Pie 차트 예제 만들기 (Pie Chart, Doughnut Chart) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Pie 모양의 차트와 Doughnut 모양의 차트를 만들어 보려고 합니다. 요즘 차트 만드는 것을 많이 하다 보니 계속 차트 관련 글을 작성하고 있는데요. 차트 만드는 게 처음에는 조금 어려운 것 같아도 하다 보면 시각적인 효과가 크다 보니 재미있기도 하고 배우는 것도 금방인 것 같아요! 지난번에는 막대 차트와 라인 차트를 만들었고, 오늘은 이어서 Pie와 Doughnut 차트를 만들려고 합니다. 두 모양 모두 원 모양으로 Pie는 피자 조각처럼 생겼고, Doughnut은 가운데가 뚫려있는 도넛의 모양을 하는 차트입니다. 이런 모양의 차트는 유사한 데이터의 비중을 서로 비교할 때 적절한 것 같아요! 그럼 Pie 차트와 Doughnut 차트는 어.. 2023. 2. 12. 자바스크립트 chart.js 라인 차트 만들기 (line chart) 안녕하세요. 오늘은 자바스크립트와 chart.js를 활용한 Line Chart를 만들어 보려고 합니다. Line Chart는 말 그대로 라인 형태의 시각화 차트입니다. Line Chart는 보통 날짜, 시간 기준으로 해서 데이터의 변화하는 과정은 라인으로 이어서 볼 때 효과가 좋습니다. 그 외에도 기준만 잘 잡아준다면 데이터의 흐름을 파악하는데 활용도가 정말 높습니다. 정말 간단하면서도 활용도 높은 Line Chart를 하나씩 배워보도록 하겠습니다. 1. Line Chart 기본 예시 chart.js 라이브러리 import chart.js를 사용하기 위해 위와 같이 chart.js 라이브러리를 import 시켜줍니다. 저는 간단하게 cdn 방식으로 연동을 하였고, 상황에 따라 직접 설치하여 import .. 2023. 2. 6. 자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트) 안녕하세요. 오늘은 Chart.js를 활용한 bar 형태의 차트를 만들어 보려고 합니다. Chart.js는 다양한 데이터의 시각화를 하기 위해 만들어진 오픈 소스 라이브러리입니다. 차트의 유형은 여러 가지가 있는데 오늘은 그중에서 Bar 유형의 차트를 만들어보려고 합니다. 점점 데이터의 양은 많아지고, 데이터의 분석을 위해 시각화를 많이 하기도 합니다. 그래서 많은 분들이 Chart.js와 같은 시각화 라이브러리를 많이 찾아주시는 것 같습니다. 저도 회사에서 몇 년째 데이터 시각화를 위한 차트 개발을 많이 하고 있습니다. 그래서 이렇게 간단한 기능부터 하나씩 포스팅을 해보려고 합니다. :) Bar 차트란 데이터를 막대 형식으로 시각화한 차트입니다. 그러면 예제를 통해 하나씩 보도록 하겠습니다. 1. Ba.. 2023. 2. 4. 이전 1 다음 728x90
