CSS 차트 구현 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- CSS 기반 차트 개발에 관심 있는 프론트엔드 개발자
- 웹 애플리케이션에서 데이터 시각화를 구현하는 개발자
- CSS 테크닉과 접근성 설계에 관심 있는 중급 이상 개발자
핵심 요약
- CSS로 차트 구현 시
attr()
과conic-gradient
활용
- attr(data-value type(
로 데이터 값 추출
- conic-gradient
사용하여 파이 차트 및 도넛 차트 생성
- 접근성 및 응답형 설계 강화
-
커스텀 엘리먼트로 차트 컨테이너 역할 수행
- @container
쿼리로 응답형 레이아웃 구현
- 다양한 차트 유형 지원
- 컬럼, 영역, 라인, 바, 파이, 도넛 차트 구현 가능
섹션별 세부 요약
1. 차트 기반 구조 설정
사용하여 접근성 및 가독성 강화data-value
,min
,max
속성을 사용한 CSS 변수(--_v, --_min, --_max) 정의
커스텀 엘리먼트로 응답형 차트 컨테이너 역할aria-label
,role="figure"
등 접근성 속성 적용
2. 컬럼 차트 구현
calc()
와var(--_v)
로 차트 높이 동적 계산100cqb
로 컨테이너 높이 기준 설정- 라벨 높이(
--data-chart-label-h
)를 높이 계산에 반영
3. 영역/라인 차트 구현
data-prev
속성을 사용한 이전 데이터 값 추출clip-path: polygon(...)
으로 다이아몬드 형태 경로 생성--line-chart-line-h
로 라인 차트 높이 설정
4. 파이/도넛 차트 구현
conic-gradient
사용:
- --_start
: 이전 값 기반 시작 각도 계산
- --_end
: 현재 값 기반 종료 각도 계산
- from var(--_start)
로 그라디언트 시작 지점 지정
radial-gradient
사용하여 도넛 차트 내부 공백 생성
5. 응답형 설계
items-sm
,items-xs
속성으로 브레이크포인트별 컬럼 수 설정@container (max-width: 400px)
쿼리로 응답형 레이아웃 적용tbody tr:nth-of-type(n+2)
선택자로 항목 숨기기
결론
attr()
과conic-gradient
를 활용한 CSS 차트는 접근성과 응답형 설계를 동시에 충족- 브라우저 호환성 주의: Safari 및 Firefox는
typed attr()
미지원 - 실무 적용 시 JavaScript 후회 방식으로 뒷받침 필요
- 다양한 차트 유형을 동일한 마크업으로 확장 가능 (예:
data-type="area"
,data-type="pie"
)