Donut Chart

When to Use

백분율을 기준으로 전체 또는 개별 데이터 값을 비교하는 용도로 donut chart를 사용할 수 있습니다. 데이터는 호(arc)로 표현되며, 측정 값에 따라 면적 값이 유동적으로 표현됩니다. Chart 중앙이 비어 있어 데이터 증가, 감소와 같은 추가 정보나 주석을 표시할 수 있습니다.

Anatomy

1. Title
2. Legend (optional)
3. Arc area
4. Arc
5. Value with label (optional)
6. Delta (optional)

Content

Structure

호(arc)는 donut chart의 데이터를 구성하는 단위입니다. 여러 호를 구성해 데이터 간의 차이를 시각화할 수 있습니다.

Data Display

측정된 데이터가 없는 경우, 빈 화면을 구성할 수 있습니다.

Donut chart를 나타내는 라벨 및 데이터의 증가, 감소와 같은 보조 정보를 포함할 수 있습니다.

Donut chart는 최소 2개의 세그먼트로 구성해야 합니다.

Donut chart 호는 최대 5개로 구성할 것을 권장합니다.

✓DoRecommended

최대 5개의 호로 구성합니다.

✕Don'tRecommended

6개 이상의 호를 사용하지 않습니다.

중앙 상단을 기준으로 시계 방향으로 호를 구성해야 합니다. 각 데이터는 내림차순 정렬을 적용합니다.

✓DoRecommended

중앙 상단을 기준으로 시계 방향, 내림차순 정렬로 데이터를 구성합니다.

✕Don'tRecommended

중앙 상단이 어긋나는 형태 및 내림차순 정렬이 적용되지 않은 형태로 데이터를 구성하지 않습니다.

Interaction

Data Tooltip

표현된 호 위에 커서를 올렸을 때, 정확한 수치 정보를 제공하는 데이터 툴팁을 노출할 수 있습니다. 데이터 툴팁은 차트의 세부 데이터를 확인할 수 있게 하는 보조 정보 계층입니다.

커서가 데이터 위에 올라가면 커서 주위에 legend와 값을 나타내는 툴팁을 표시합니다.