CSS 차트 구현: attr(), conic-gradient 활용 방법
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

CSS 차트 구현 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- CSS 기반 차트 개발에 관심 있는 프론트엔드 개발자

- 웹 애플리케이션에서 데이터 시각화를 구현하는 개발자

- CSS 테크닉과 접근성 설계에 관심 있는 중급 이상 개발자

핵심 요약

  • CSS로 차트 구현 시 attr()conic-gradient 활용

- attr(data-value type(), 0)로 데이터 값 추출

- 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")