60FOLDCOMPONENTS

공유 차트 옵션

라인 차트와 스톡 차트에서 모두 사용할 수 있는 옵션 및 런타임 제어

LineChartOptions 및 StockChartOptions은 동일한 상호작용, 축, 레이블, 오버레이, 뷰포트 및 렌더링 제어를 포함합니다. 기본 차트를 구성하거나 내부 렌더링 엔진을 가져올 필요가 없습니다.

정확한 필드는 Line options 또는 Stock options를 참조하세요. 공유 런타임 메서드는 LineChart 및 StockChart에 직접 나타납니다.

구성 그룹

렌더러 및 상호작용

  • renderMode는 auto, worker 또는 main 중 하나를 선택합니다. 실제 결과는 getRenderMode()로 읽어오십시오.
  • rendererInitializationTimeout는 렌더러 시작 시간을 밀리초 단위로 제한합니다. 기본값은 15초이며 생성 시부터 시작되고 감시 타이머를 비활성화하려면 0로 설정할 수 있습니다.
  • interactive: false는 호버 정보는 유지하면서 팬, 줌, 핀치, 선택을 비활성화합니다.
  • minViewportRange는 X-데이터 단위로의 확대를 제한합니다.
  • yDomain: { min, max }는 줌, 상세도(LOD) 변경 및 스트리밍 업데이트 전반에 걸쳐 Y-도메인 가장자리 하나 또는 둘을 고정하며, 누락된 가장자리는 자동 스케일링됩니다.
  • wheelZoomSpeed, wheelZoomDirection, keyboardZoomSpeed, 및 keyboardPanSpeed는 내비게이션을 조정합니다.
  • keyboardActivation는 포커스 기반 또는 호버 기반 키보드 제어를 선택합니다.
  • keyboardAnnouncements는 키보드 팬, 줌, 리셋 및 선택 취소 후 방출되는 정중한 상태 메시지를 현지화합니다; 선택적 viewport 템플릿은 {startPercent}, {endPercent} 및 {spanPercent}를 허용합니다. 호스트가 동등한 피드백을 제공할 때에는 이를 false로 설정하세요.
  • animated는 데이터 공개 및 뷰포트/축 전환을 제어합니다. 생략하면 prefers-reduced-motion: reduce는 애니메이션을 비활성화하며 차트가 마운트된 상태에서 해당 환경설정 변경이 관찰됩니다. 명시적인 true 또는 false는 계속해서 권한을 가집니다.

Canvas 내용

grid, axis, chartBackground, rangeSelector, tooltip, crosshairStyle, selection, labels, overlay, padding, 그리고 textDirection는 선형 차트와 주가 차트에서 동일하게 동작합니다.

차트 타이포그래피의 기본값은 내보낸 DEFAULT_CHART_FONT_FAMILY이며, SFMono-우선 폰트 스택입니다. 표면별 family 필드는 계속 권위적입니다.

라이브 표시가 각 새로운 극값을 따르지 않고 시각적 스케일을 유지해야 할 때는 완전히 고정된 도메인을 사용하세요:

const chart = new LineChart(canvas, {
  yDomain: { min: 0, max: 100 },
});

yDomain는 기본적으로 비활성화되어 있습니다. 이는 선형 차트와 주가 차트에서 공유되며 Worker, 메인 스레드, 및 SSR 렌더링에 일관되게 적용됩니다.

뷰포트 컨트롤

const current = chart.getViewport();

chart.setViewport(
  { xMin: current.xMin + 60_000, xMax: current.xMax - 60_000 },
  { animated: true },
);

chart.reset({ animated: true });

생략된 뷰포트 가장자리 값은 현재 값을 유지합니다. 범위는 전체 데이터 범위와 차트의 minViewportRange에 대해 정규화됩니다.

런타임 외형

구성 시 전용 동작과 변경 가능한 외형은 의도적으로 분리되어 있습니다. getOptions()는 정규화된 전체 스냅샷을 반환합니다. getAppearance()는 라이브로 패치해도 안전한 필드만 반환합니다. 둘 다 DeepReadonly 스냅샷 타입으로 지정됩니다; 내부의 평범한 객체와 배열은 복사되므로 반환된 값을 직접 변경하지 말고 런타임 메서드를 통해 변경을 적용하세요.

chart.updateAppearance({
  chartBackground: "#081018",
  grid: { color: "rgba(130, 180, 220, 0.16)" },
  axis: { bottom: { labelFont: { color: "#a9bac9" } } },
});

패치는 현재 외형에 병합됩니다. setLabels()와 비동기 setOverlay()은 동일한 상태를 위한 편의 중심 메서드입니다.

한 사용자의 동작이 여러 속성을 갱신할 때 동기 변경을 배치 처리하세요:

chart.batch(() => {
  chart.updateAppearance({ grid: { color: "#26384a" } });
  chart.setViewport({ xMin, xMax });
});

await를 batch 내부에서 호출하지 마세요; 콜백이 반환되기 전에 이루어진 동기 호출들만 병합됩니다.

툴팁

내장 툴팁은 Canvas2D로 렌더링됩니다. tooltip.onRender은 메인 스레드에서 실행되며 제목과 행을 대체할 수 있으므로 포인터 이동으로 자주 호출될 수 있으니 빠르게 유지해야 합니다. tooltip.onLeave은 애플리케이션 상태를 초기화하는 데 적합합니다.

큰 숫자 X 값에는 명시적 titleFormat를 사용하세요. 자동 감지는 대략 10억을 초과하는 값을 시간 유사 값으로 취급합니다.

오버레이

오버레이는 텍스트, 사각형, 원, 선 및 이미지(차트 영역 또는 전체 캔버스를 기준으로 비율 또는 CSS 픽셀 좌표)를 지원합니다. 문자열 이미지 소스는 비동기적으로 페치 및 디코드됩니다. 원격 이미지는 CORS를 구성하고 setOverlay()를 await 하세요.

호출자가 제공한 ImageBitmap 핸들은 호출자 소유로 유지됩니다. Worker와 메인 스레드는 렌더러 소유의 복제본만 구조체-복제(structured-clone)하고 닫습니다. 생성 시점의 백그라운드나 eager 전용 오버레이는 initialize()가 완료된 후 닫을 수 있습니다. 생성 시 오버레이가 호출자 비트맵과 URL 또는 비동기적으로 해결되는 다른 소스를 혼합하는 경우, 오버레이가 교체되거나 파괴될 때까지 핸들을 열린 상태로 유지하세요; 또는 초기화 후 닫기 전에 setOverlay()를 호출하고 대기하십시오.

런타임 백그라운드 및 eager 전용 오버레이는 updateAppearance()(또는 이를 포함하는 batch())가 반환된 후 닫을 수 있으며, 초기화가 진행 중일 수 있습니다. 혼합되거나 지연된 런타임 오버레이의 경우 setOverlay()를 직접 호출하고 해당 프라미스가 해결될 때까지 호출자 핸들을 열린 상태로 유지하십시오. URL 가져오기/디코드 구현은 별도의 온디맨드 청크로 배포되며 초기 브라우저 런타임의 일부가 아닙니다.

일부 소스가 실패하면 setOverlay()는 성공한 항목을 설치하고 ChartOverlayError로 거부합니다. 요청된 모든 항목이 실패하면 이전에 렌더된 오버레이가 계속 설치된 상태로 남습니다. 해결 및 렌더러 전달 실패는 setOverlayErrorCallback()와 프레임워크 어댑터의 오류 훅에도 전달됩니다. 보류 중인 업데이트를 대체하거나 차트를 파괴하는 것은 일반적인 취소이며: 보류 중인 프라미스는 설치 없이 해결되고 오버레이 오류는 보고되지 않습니다.

접근성

Sixtyfold은 호스트가 이미 이를 제공하지 않은 경우에만 폴백 의미론을 추가합니다. 대화형 차트는 role="application", tabindex="0" 및 폴백 접근 가능 이름을 받습니다. 보기 전용 차트(interactive: false)는 role="img"를 받고 탭 순서에 추가되지 않습니다. 기존의 role, tabindex, aria-label 및 aria-labelledby 속성은 보존됩니다.

애플리케이션별 이름과 설명을 권장합니다:

<canvas
  aria-label="Hourly load for feeder 12"
  aria-describedby="feeder-12-summary"
></canvas>
<p id="feeder-12-summary">Latest load is 73 kW; the daily peak was 96 kW.</p>

대화형 차트의 경우 인접한 텍스트 요약 또는 데이터 표 대체를 제공하고 aria-describedby로 참조하십시오. role="img"을 키보드로 작동하는 차트에 강제로 적용하지 마십시오. 색상은 주변 애플리케이션이 시리즈를 식별하는 유일한 수단이 되어서는 안 됩니다.

키보드로 팬, 줌, 초기화 및 선택 취소는 숨겨진 polite 라이브 리전에 의해 발표됩니다. 이러한 메시지는 keyboardAnnouncements로 현지화하고 이후 setKeyboardAnnouncements()로 업데이트하거나, 주변 애플리케이션이 동등한 피드백을 제공하는 경우 비활성화할 수 있습니다. 선택적 뷰포트 템플릿은 전체 데이터 범위의 백분율로 표시되는 시작, 끝 및 범위를 가시적으로 추가할 수 있습니다. 애니메이션된 팬, 줌 및 초기화 메시지는 렌더러가 확인한 뷰포트가 안정될 때까지 대기하므로 중간 애니메이션 프레임은 절대 발표되지 않습니다.

Sixtyfold는 모든 스트리밍 샘플이나 페인트를 aria-live로 공지하지 않습니다; 고주파 공지는 화면 읽기 도구로 차트를 사용할 수 없게 만듭니다. 연결이 끊긴 피드나 임계값 통과와 같은 의미 있는 이벤트가 있는 경우, 애플리케이션 소유의 스로틀된 라이브 영역을 통해 이를 노출하세요.