원형 차트 만들기

원형 차트가 보여 주는 것

원형 차트는 각 양수 값을 360° 원의 각도로 변환합니다. 범주의 값이 v이고 표시되는 모든 값의 합계가 T라면 중심각은 360 × v / T, 표시 백분율은 100 × v / T입니다. 도넛 차트도 같은 비율을 사용하고 가운데를 비울 뿐이므로 비교 방식 자체는 달라지지 않습니다.

이 예시의 합계는 100이므로 상품은 45 / 100 × 360 = 162°를 차지합니다. 0은 입력할 수 있지만 면적이 없으므로 원에는 나타나지 않습니다. 음수, 누락된 값, 유한하지 않은 값은 일반적인 전체의 일부를 정의하지 못하므로 사용할 수 없으며, 적어도 하나의 값은 0보다 커야 합니다.

다른 차트가 더 나은 경우

원형 차트는 조각 수가 적고 서로 차이가 뚜렷할 때 가장 읽기 쉽습니다. 값이 비슷하거나 범주가 많거나 정확한 비교가 중요하거나 범주들이 하나의 합계를 이루지 않는다면 일반적으로 막대 차트가 더 낫습니다. 시간에 따른 변화에는 꺾은선 차트가 더 적합합니다. 이미 겹치거나 이중으로 집계된 백분율을 더하지 마세요. 보기 좋은 원도 잘못 정의된 합계를 바로잡을 수는 없습니다.

색상, 레이블, 접근성

의미를 색상에만 의존해서는 안 됩니다. 범례나 표시되는 조각 레이블을 유지하고 함께 제공되는 표를 확인하세요. 많은 사람과 공유할 차트라면 색각 이상 친화 팔레트를 사용하세요. 아주 작은 조각은 원 안에 글자를 넣을 공간이 부족할 수 있지만 정확한 레이블, 값, 백분율은 범례와 데이터 표에서 확인할 수 있습니다. SVG는 편집과 선명한 인쇄에 좋고, 고정 크기 1200 × 800 PNG는 슬라이드, 문서, 소셜 미디어 게시물에 알맞습니다.

차트는 브라우저의 SVG 및 Canvas API로 생성됩니다. 차트 데이터는 외부 차트 서비스로 전송되지 않습니다. 여러 단계의 진행 상태는 이 탭의 세션 저장소에 임시로 보관되며, 처음부터 다시 시작하거나 탭을 닫으면 지울 수 있습니다.

더 자세한 내용은 Datawrapper의 적은 수의 항목으로 원형 차트를 만드는 방법, W3C의 접근 가능한 데이터 표 안내, MDN의 SVG 그래픽을 <desc>로 설명하는 방법을 참고하세요.