CapDriveBarChart
각 데이터 항목을 막대로 표시하여 범주형 값을 비교하는 데 적합합니다. 가로 또는 세로로 배열할 수 있고, 숫자 범위, 카테고리 라벨, 숫자 라벨을 설정할 수 있으며, 양수 및 음수 값을 지원합니다.
예제
function main() {
return (
<BarChart
data={[
{ value: 30, label: 'A' },
{ value: 70, label: 'B' },
]}
axis="vertical"
rangeY={[0, 100]}
showLabels={true}
showValueLabels={true}
background={$env.accent}
cornerRadius={6}
yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
/>
);
}
사용법
- data 항목 하나가 막대 하나이며 배열 순서의 범주로 x는 불필요합니다. horizontal에서도 값 범위는 rangeY입니다. 자동 범위는 0을 포함하고 음수는 기준선 반대로, background는 막대를 채웁니다.
- rangeX/rangeY는 숫자 범위입니다. 라벨 숨김과 축선 숨김은 별개이며 축에는 stroke="clear"를 사용합니다. 겹치지 않는 라벨을 골라 표시하므로 전부 보장하지 않습니다.
- contentAnimation은 텍스트·이미지·구조 데이터 전환입니다. interpolate는 Polyline 점수/closed, Path 명령 순서, 차트 구조가 호환되어야 합니다. 구조 변경 시 즉시 갱신합니다.
속성
dataReadonlyArray<BarChartDataPoint>배열 순서의 범주 데이터입니다. 각 항목은 숫자 값과 선택적 레이블을 가집니다.
[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]axis?"horizontal" | "vertical"막대 방향: vertical은 왼쪽에서 오른쪽, horizontal은 위에서 아래로 배치합니다.
"vertical"rangeY?ChartRange표시할 값 범위 [min, max]입니다. 생략하면 0을 포함하여 데이터에 맞춥니다.
[0, 100]showLabels?boolean범주 레이블을 표시합니다. 없는 레이블은 비워 두며 네이티브 레이아웃이 겹침을 방지합니다.
trueshowValueLabels?boolean자동 생성된 숫자 축 레이블을 표시합니다.
truebarThickness?number | "auto"포인트 단위 막대 두께입니다. auto는 범주 간격에 맞춥니다.
"auto"xAxis?ChartAxisStyle차트 아래쪽의 수평 축선입니다. 기본값은 전경색, 너비 1pt이며 stroke: clear로 숨깁니다.
{stroke: HDR($env.foreground), lineWidth: 1}yAxis?ChartAxisStyle차트 왼쪽의 수직 축선입니다. 기본값은 전경색, 너비 1pt이며 stroke: clear로 숨깁니다.
{stroke: HDR($env.foreground), lineWidth: 1}background?Paint각 막대의 채우기입니다. 기본값은 테마 전경색입니다.
HDR($env.dark ? "white" : "black")cornerRadius?number각 막대의 모서리 반경이며 크기에 맞게 제한됩니다.
0stroke?Paint선 색상 또는 그라디언트입니다. clear로 숨깁니다.
"clear"lineWidth?number선 두께(포인트)이며 0은 선을 그리지 않습니다.
2strokePosition?"inside" | "center" | "outside"각 막대에 대한 테두리 위치입니다. 기본값은 inside입니다.
"inside"dash?number[]선과 빈 구간 길이를 교대로 지정합니다(포인트). 빈 배열은 실선입니다.
[]dashPhase?number점선 패턴 이동량(포인트)입니다.
0contentAnimation?ContentAnimation선택적 콘텐츠 전환입니다. interpolate는 범주 개수와 방향이 같아야 하며 다르면 즉시 업데이트합니다.
{type: "interpolate", duration: 0.25}공통 속성
width?number | "auto" | "fill"너비: 포인트, 자동 크기 또는 부모 영역 채우기.
"fill"height?number | "auto" | "fill"높이: 포인트, 자동 크기 또는 부모 영역 채우기.
"fill"x?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0y?number시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.
0transform?ViewTransform레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.
{rotation: 0}opacity?number전체 View 불투명도: 0은 투명, 1은 불투명입니다.
1clipped?booleanView 경계를 벗어난 내용을 자릅니다.
falseclip?"rectangle" | "ellipse"자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.
"rectangle"mask?View | null알파 마스크 View입니다. 레이아웃에 영향을 주지 않고 중앙에 배치되며, null이면 마스크가 비활성화됩니다.
<Circle width="fill" height="fill" background="white"/>zIndex?number형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.
0blur?number흐림 반경(포인트)이며 0은 흐림 없음입니다.
4innerShadow?DrawingEffect효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffect효과의 색상, 불투명도, 흐림 반경, x/y 이동량입니다. 거리는 포인트입니다.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?Color바깥 그림자 색상입니다.
HDR("black")shadowOpacity?number그림자 불투명도 0–1이며 0은 숨김입니다.
0shadowRadius?number바깥 그림자의 흐림 반경(포인트)입니다.
4shadowX?number그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.
0shadowY?number그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.
2animations?BarChartAnimation[]속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number형제 요소 사이의 안정적인 식별자.
조합 예제
function main() {
return (
<BarChart
width={260}
height={160}
axis="horizontal"
rangeY={[-50, 100]}
data={[
{ value: 80, label: 'A' },
{ value: -25, label: 'B' },
{ value: 45, label: 'C' },
]}
showLabels={true}
showValueLabels={true}
background={$env.accent}
cornerRadius={4}
xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
yAxis={{ stroke: 'clear' }}
/>
);
}
애니메이션
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke생략 시 동작
표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.
| 속성 | 생략 시 동작 |
|---|---|
data | [] |
axis | "vertical" |
showLabels | true |
showValueLabels | true |
cornerRadius | 0 |
strokePosition | "inside" |
background | HDR($env.dark ? 'white' : 'black') |
xAxis | { stroke: HDR($env.foreground), lineWidth: 1 } |
yAxis | { stroke: HDR($env.foreground), lineWidth: 1 } |