라이브 예제 그룹

각 문서 예제는 대화형 차트와 동기화된 읽기 전용 복사 가능한 TypeScript을 한 쌍으로 제공합니다. 예제는 모바일에서도 문서가 반응성을 유지하도록 선별된 데이터셋을 사용하며; 엔지니어링 작업대는 최대 데이터 볼륨을 시연합니다.

상세도(LOD) 보정

LOD는 상세도를 의미합니다. 아래의 대화형 그룹은 큰 데이터셋이 현재 화면이 표시할 수 있는 상세도로 어떻게 축소되는지 보여줍니다. 이는 density, rebaseRatio 및 quantizationStep를 노출하며, 측정된 작업량에서 조정이 필요하지 않다면 기본값을 유지하세요.

런타임 모양

예제들은 이 웹사이트에서 선택된 테마를 따릅니다. 안정적인 default API 식별자는 Midnight를 선택합니다. 현재의 다크 및 라이트 프리셋과 선택기 설정은 Themes를 참고하세요. 정확한 옵션과 멤버는 Line API 및 Stock API를 사용하세요; line, stock, rendering, streaming, 및 SSR 가이드는 작업 중심의 예제를 제공합니다.

예제 라이프사이클 계약

미리보기는 경로 또는 로케일이 변경되면 차트를 삭제합니다. 모바일에서 반응성을 유지하기 위해 선별된 메인 스레드 데이터셋을 사용하며, 수백만 포인트의 Worker 데모는 익명 엔지니어링 작업대에서 실행됩니다.

import { LineChart } from "@sixtyfold/line";
import { getThemePreset } from "@sixtyfold/themes";

const preset = getThemePreset("default");
const chart = new LineChart(canvas, {
  ...preset.line.appearance,
  renderMode: "main",
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.12,
    quantizationStep: 0.10,
  },
});

await chart.initialize();
chart.setMultiSeriesData(data);
chart.updateAppearance(preset.line.appearance);
preset.line.series.forEach((series, index) => {
  chart.updateSeriesAppearance(index, series);
});