javascript79 자바스크립트 chart.js 라인, 막대차트 만들기 (line + bar) 안녕하세요. 오늘은 자바스크립트와 chart.js를 활용해서 막대 차트와 라인 차트를 합쳐서 하나의 차트로 구현하는 방법을 포스팅하려고 합니다. 막대 차트와 라인 차트 만드는 방법은 지난번에 포스팅을 하였으니 아래 링크를 참고하시면 됩니다. :) * 자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트) https://sancode.tistory.com/96 * 자바스크립트 chart.js 라인 차트 만들기 (line chart) https://sancode.tistory.com/98 라인 + 막대 차트 예시 (Line + Bar) chart.js 라이브러리 import chart.js의 기능을 구현하기 위해 라이브러리를 import 시켜줬습니다. DOM canvas 요소 추가 html 영역에.. 2023. 2. 7. 자바스크립트 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 Stacked Bar Chart 만들기 (스택 Bar 차트) 안녕하세요. 오늘은 지난 포스팅에 이어서 bar chart를 응용한 stacked bar chart를 만들어보려고 합니다. stack은 의미 그대로 쌓아 올리는 개념으로 bar chart를 데이터 유형별로 쌓이는 형태로 만드는 방식입니다. stack 형태의 bar chart도 활용하기가 아주 좋습니다. 하나의 시스템에서도 다양한 데이터를 시각화하기 위해서 다양한 방식의 차트를 필요로 합니다. 그럼 stacked 형태의 bar chart 만들기를 시작해 보겠습니다. 1. Stacked Bar Chart 예시 chart.js 라이브러리 import 가장 먼저 chart.js 라이브러리를 cdn 형식으로 import 시켜줬습니다. DOM canvas 요소 추가 chart.js는 기본적으로 canvas 요소에 .. 2023. 2. 5. 자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트) 안녕하세요. 오늘은 Chart.js를 활용한 bar 형태의 차트를 만들어 보려고 합니다. Chart.js는 다양한 데이터의 시각화를 하기 위해 만들어진 오픈 소스 라이브러리입니다. 차트의 유형은 여러 가지가 있는데 오늘은 그중에서 Bar 유형의 차트를 만들어보려고 합니다. 점점 데이터의 양은 많아지고, 데이터의 분석을 위해 시각화를 많이 하기도 합니다. 그래서 많은 분들이 Chart.js와 같은 시각화 라이브러리를 많이 찾아주시는 것 같습니다. 저도 회사에서 몇 년째 데이터 시각화를 위한 차트 개발을 많이 하고 있습니다. 그래서 이렇게 간단한 기능부터 하나씩 포스팅을 해보려고 합니다. :) Bar 차트란 데이터를 막대 형식으로 시각화한 차트입니다. 그러면 예제를 통해 하나씩 보도록 하겠습니다. 1. Ba.. 2023. 2. 4. 자바스크립트 bootstrap5 tooltip (툴팁) 만들기 안녕하세요. 오늘은 자바스크립트에서 bootstrap5의 tooltip 기능 구현을 하는 예제를 포스팅하려고 합니다. tooltip은 어떤 요소에 마우스를 올리게 되면 그 요소가 의미하고 있는 내용의 상세 정보를 보충하여 보여줄 수 있는 말풍선 기능입니다. 기능은 간단하지만 실제로 활용을 하면 효과가 상당한 기능입니다. bootstrap에서 지원하는 tooltip은 간단한 속성값 몇 개로 기능 구현이 가능하기 때문에 하나씩 진행해 보고 어떻게 작동하는지 확인해 보도록 하겠습니다. tooltip 툴팁 어떠한 요소의 내용을 보충해 줄 수 있는 상세한 내용을 간단하게 말풍선 효과를 줘서 표시해 주는 기능으로 지정할 요소에 지정을 해줘서 기능의 효과를 강조할 수 있다. 1. 기본 사용 예시 Tooltip boo.. 2023. 2. 4. 자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀) 안녕하세요. 오늘은 bootstrap5의 carousel (캐러셀) 기능에 대해 포스팅하려고 합니다. carousel의 뜻은 회전목마를 의미하며, 의미하는 것처럼 이미지 같은 요소를 회전시켜 가며 효과를 주는 기능입니다. 보통 슬라이드쇼라고도 합니다. 보통 홈페이지를 소개하는 요소가 있거나 광고할 요소가 많은 경우에 carousel 기능을 활용해서 한 화면에서 다양한 이미지나 영상을 보여줄 수 있습니다. 효과가 아주 좋습니다! carousel 캐러셀 carousel은 회전목마를 의미하며, 이미지나 영상과 같은 요소를 회전시켜가며 효과를 주는 기능 (슬라이드쇼와 같은 효과) 1. carousel 컴포넌트 Previous Next 간단한 샘플 이미지 3개를 연동해서 carousel 컴포넌트를 활성화시켰습니다.. 2023. 2. 3. 이전 1 2 3 4 5 6 7 8 ··· 14 다음
