CapDrive
사용 가이드

LineChart

실제 x/y 값을 사용하여 데이터 시리즈를 곡선으로 그립니다. 속도 및 시간과 같은 추세에 적합하며 좌표 범위, 축 및 레이블을 지원합니다. y 값이 누락되면 선분이 끊어집니다.

예제

function main() {
  return (
    <LineChart
      data={[
        { value: { x: 0, y: 20 }, label: { x: '0s', y: '20' } },
        { value: { x: 10, y: 60 }, label: { x: '10s', y: '60' } },
      ]}
      rangeX={[0, 10]}
      rangeY={[0, 100]}
      showXLabels={true}
      showYLabels={true}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

사용법

  • value.x/y는 위치, label.x/y는 글자만 정합니다. 정렬 없이 입력 순서로 잇고 y=null은 끊습니다. 스크롤 시간 그래프는 data와 rangeX를 함께 갱신합니다. 예: [현재초−30,현재초].
  • $data.history는 최근 30초를 오래된 순으로 제공하며 비거나 결측일 수 있습니다. timestamp는 밀리초, elapsed는 초입니다. 시간 그래프는 null 구간을 유지하고 인덱스 대신 elapsed.value를 x로 쓰세요.
  • rangeX/rangeY는 숫자 범위입니다. 라벨 숨김과 축선 숨김은 별개이며 축에는 stroke="clear"를 사용합니다. 겹치지 않는 라벨을 골라 표시하므로 전부 보장하지 않습니다.
  • contentAnimation은 텍스트·이미지·구조 데이터 전환입니다. interpolate는 Polyline 점수/closed, Path 명령 순서, 차트 구조가 호환되어야 합니다. 구조 변경 시 즉시 갱신합니다.

속성

dataReadonlyArray<ChartDataPoint>

차트 데이터입니다. value.x/y는 좌표, label.x/y는 텍스트이며 y가 null이면 선을 끊습니다.

예제[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]
rangeX?ChartRange

표시할 숫자 범위 [min, max]입니다. 생략하면 데이터에 자동으로 맞춥니다.

예제[0, 30]
rangeY?ChartRange

표시할 숫자 범위 [min, max]입니다. 생략하면 데이터에 자동으로 맞춥니다.

예제[0, 100]
showXLabels?boolean

축 레이블을 표시합니다. 네이티브 레이아웃이 겹치지 않는 레이블을 선택합니다.

예제true
showYLabels?boolean

축 레이블을 표시합니다. 네이티브 레이아웃이 겹치지 않는 레이블을 선택합니다.

예제true
xAxis?ChartAxisStyle

차트 아래쪽의 수평 축선입니다. 기본값은 전경색, 너비 1pt이며 stroke: clear로 숨깁니다.

예제{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

차트 왼쪽의 수직 축선입니다. 기본값은 전경색, 너비 1pt이며 stroke: clear로 숨깁니다.

예제{stroke: HDR($env.foreground), lineWidth: 1}
stroke?Paint

선 색상 또는 그라디언트입니다. clear로 숨깁니다.

예제HDR($env.dark ? "white" : "black")
lineWidth?number

선 두께(포인트)이며 0은 선을 그리지 않습니다.

예제2
lineCap?"round" | "butt" | "square"

선 끝 모양: butt는 절단, square는 사각 연장, round는 원형입니다.

예제"round"
lineJoin?"round" | "miter" | "bevel"

선 연결 모양: miter, round, bevel입니다.

예제"round"
dash?number[]

선과 빈 구간 길이를 교대로 지정합니다(포인트). 빈 배열은 실선입니다.

예제[]
dashPhase?number

점선 패턴 이동량(포인트)입니다.

예제0
contentAnimation?ContentAnimation

선택적 콘텐츠 전환입니다. interpolate는 샘플 개수와 결측 위치가 같아야 하며, 다르면 즉시 업데이트합니다.

예제{type: "interpolate", duration: 0.25}
공통 속성
width?number | "auto" | "fill"

너비: 포인트, 자동 크기 또는 부모 영역 채우기.

예제"fill"
height?number | "auto" | "fill"

높이: 포인트, 자동 크기 또는 부모 영역 채우기.

예제"fill"
x?number

시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.

예제0
y?number

시각적 이동량(포인트): x는 오른쪽, y는 아래쪽이며 레이아웃 공간은 바뀌지 않습니다.

예제0
transform?ViewTransform

레이아웃을 바꾸지 않는 전체 변환입니다. 이동은 포인트, 회전·기울기는 도, 배율 1은 원래 크기, 기준점은 0–1입니다.

예제{rotation: 0}
opacity?number

전체 View 불투명도: 0은 투명, 1은 불투명입니다.

예제1
clipped?boolean

View 경계를 벗어난 내용을 자릅니다.

예제false
clip?"rectangle" | "ellipse"

자르기 모양은 rectangle 또는 ellipse입니다. Material은 false로 해제할 수 있습니다.

예제"rectangle"
mask?View | null

알파 마스크 View입니다. 레이아웃에 영향을 주지 않고 중앙에 배치되며, null이면 마스크가 비활성화됩니다.

예제<Circle width="fill" height="fill" background="white"/>
zIndex?number

형제 View의 그리기 순서입니다. 큰 값이 앞에 표시됩니다.

예제0
blur?number

흐림 반경(포인트)이며 0은 흐림 없음입니다.

예제4
innerShadow?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은 숨김입니다.

예제0
shadowRadius?number

바깥 그림자의 흐림 반경(포인트)입니다.

예제4
shadowX?number

그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.

예제0
shadowY?number

그림자 이동량(포인트): x는 오른쪽, y는 아래입니다.

예제2
animations?LineChartAnimation[]

속성 변경 애니메이션입니다. duration/delay는 초, from/to는 끝값, repeat/autoreverse는 반복, wrap은 주기입니다.

예제[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

형제 요소 사이의 안정적인 식별자.

조합 예제

function main() {
  const now = $data.current.elapsed?.value ?? 0;
  const data = $data.history
    .filter((sample) => sample.elapsed?.value != null)
    .map((sample) => ({
      value: { x: sample.elapsed.value, y: sample.speed?.value ?? null },
      label: {
        x: sample.elapsed.value.toFixed(0) + 's',
        y: sample.speed?.value == null ? '' : sample.speed.value.toFixed(0),
      },
    }));
  return (
    <LineChart
      data={data}
      rangeX={[now - 30, now]}
      rangeY={[0, 160]}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

애니메이션

애니메이션

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeX.0rangeX.1rangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

생략 시 동작

표는 구현에서 확인한 생략 동작이며 속성 예제는 기본값이 아닙니다. 고정 결과에는 명시적으로 값을 주고 환경 크기·테마 색을 상수로 보지 마세요.

속성생략 시 동작
data[]
showXLabelstrue
showYLabelstrue
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

$data · 운전 데이터

애니메이션

BarChart

Color / Gradient

BarChart

이전

공통 유형

다음 단계

이 페이지의 내용

예제사용법속성조합 예제애니메이션생략 시 동작관련 API