Bar Gauge
Live Demo
When to Use
Bar Gauge는 하나 또는 여러 대상의 상태나 성과를 가로 막대로 표현합니다. 각 대상은 한 행으로 구성되며, 공유 트랙(max) 대비 채워진 막대의 길이로 진행 정도를 나타냅니다. 여러 행을 동일한 max 스케일 위에 나란히 배치하므로, 대상 간 진행 정도를 직관적으로 파악하고 비교할 수 있습니다.
단일 핵심 지표를 반원 형태로 강조하려면 Gauge를 사용합니다.
Anatomy
- Title (optional)
- Value label (optional)
- Name (optional)
- Track
- Fill
- Zone scale strip (optional)
Content
Structure
Bar Gauge는 비교할 대상마다 하나의 행을 가지며, 각 행은 값(왼쪽)과 이름(오른쪽) 라벨 아래에 가로 막대가 놓이는 구조입니다. Track은 공유 범위(min–max, 기본 0–100)를, fill은 현재 값을 나타내며, 모든 막대가 같은 max 스케일을 공유하기 때문에 막대 길이를 그대로 비교할 수 있습니다.
대상 이름(name)을 생략하면 값 라벨만 표시되고, 값 라벨(showValueLabel)도 숨기면 막대만 표현할 수 있습니다.
Status Zones
상태 구간(zones)이 필요한 경우, 각 막대의 채움은 값이 속한 구간의 색으로 칠해지고 막대 아래에 얇은 스케일 스트립이 표시됩니다. 구간은 모든 행에 공통으로 적용되며, gauge와 동일한 구간 로직을 공유하므로 같은 값은 두 차트에서 같은 색으로 나타납니다.
상태 구간을 사용하지 않으면 막대는 단색(지정 색 또는 chart sequence)으로 표현됩니다.
Data Display
여러 대상을 비교할 때 비교의 무결성을 위해 모든 막대는 동일한 max 스케일을 사용해야 합니다.
비교 대상의 모든 막대는 동일한 max 스케일을 사용합니다.
비교 대상은 대상당 하나의 행으로 구성합니다.
상태를 색상만으로 구분하지 않고 값 라벨과 함께 제공합니다.