라인 차트

프레임워크 빠른 시작

같은 선 차트를 여섯 가지 방식으로 렌더링

명령형 TypeScript API 또는 얇은 프레임워크 어댑터를 선택하세요. 모든 탭은 같은 타입 배열 데이터와 차트 옵션을 사용합니다.

chart.ts@sixtyfold/line

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

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([3, 7, 4, 9]),
  length: 4,
};

const canvas = document.querySelector<HTMLCanvasElement>("#chart")!;
const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Signal", color: "#4ecca3" }],
});

await chart.initialize();
chart.setData(data);


window.addEventListener("pagehide", () => chart.destroy(), { once: true });

@sixtyfold/line는 하나의 정렬된 X 열에 대해 여러 시리즈를 렌더링합니다. 시리즈는 축, 상호작용 및 툴팁을 공유하면서 개별적으로 라인, 스텝, 범위, 스캐터, 바 또는 누적-영역 기하를 사용할 수 있습니다.

정확한 구성과 메서드 시그니처는 생성된 Line options, LineChart methods, 및 line data types 참조에서 확인할 수 있습니다.

시리즈 기하학

유형	입력	의도된 사용
`line`	`Float64Array`	직선 또는 구성된 보간을 사용한 연속 관측치.
`step-before`, `step-after`, `step-mid`	`Float64Array`	구간에 적용되는 값. `step` 별칭 `step-after`.
`range`	`{ low, high, y? }`	불확실성, 최소/최대, 백분위수 또는 기타 엔벨로프. `band` 는 별칭입니다.
`scatter`	`Float64Array`	독립된 점들. `points` 는 별칭입니다.
`bar`	`Float64Array`	구성 가능한 기준선에서 렌더링된 값들. `column` 는 별칭입니다.
`stacked-area`	`Float64Array`	누적 기하로 합산된 정렬된 기여들.

SeriesOptions에는 일반 이름, 색상, 너비, 단위, 채우기 및 마커 필드가 포함됩니다. 기하학별 옵션은 관련 없는 설정이 모호해지지 않도록 band, point, bar 및 stack 아래에 위치합니다.

범위 데이터

chart.setMultiSeriesData({
  x,
  series: [
    { low: temperatureMin, high: temperatureMax },
    temperatureMean,
  ],
  length: x.length,
  seriesCount: 2,
});

진정한 집계가 (low + high) / 2가 아닐 경우 명시적인 평균 시리즈를 사용하십시오. 범위 중심 획은 시리즈 너비를 0으로 하여 숨기고, 엔벨로프만으로 의도한 정보를 전달할 때 경계는 band.borderWidth: 0로 비활성화하세요.

상세도(LOD)

LOD는 **상세도(level of detail)**를 의미합니다. 이는 차트가 훨씬 큰 데이터셋의 화면 크기 표현을 먼저 그린 다음 확대하면서 더 세부를 드러내게 합니다. 기본 adaptive 정책은 정렬된 끝점, 극값, 그리고 실제 NaN 간극을 보존합니다. 대부분의 애플리케이션은 기본값을 유지해야 합니다.

적응형 그리드는 애니메이션이나 관련 없는 재그림 중에도 안정적으로 유지됩니다. 현재 상세도 수준을 충분히 넘어서는 지속적인 확대 이동이 발생한 후에만 변경됩니다.

const chart = new LineChart(canvas, {
  lod: {
    mode: "adaptive",
    density: 0.75,
    rebaseRatio: 1.25,
    quantizationStep: 0.25,
  },
});

옵션	기본값	허용 범위	의미
`density`	`0.75`	`0.25–2`	CSS 픽셀당 목표 프레젠테이션 열 수. 더 많은 열은 로컬 상세를 더 유지하지만 작업 비용이 더 듭니다.
`rebaseRatio`	`1.25`	`1.05–2`	스티키 그리드가 변경되기 전 허용되는 최대 예상 폭 드리프트입니다.
`quantizationStep`	`0.25`	`0.05–1`	각 바이너리 옥타브 내부에서 사용 가능한 간격입니다. 작은 단계는 표현 변경을 더 세밀하게 만듭니다.

rebaseRatio과 quantizationStep을 함께 조정하세요. 더 부드러운 변경을 원하면 1 + quantizationStep 근처에서 시작하세요; 예를 들어 1.10–1.12과 0.10의 조합이 있습니다. 시각적으로 민감한 다중 패스 범위 밴드는 0.05와 1.06–1.08의 혜택을 볼 수 있습니다; 대상 브라우저 및 디바이스 픽셀 비율에서 비용을 측정하세요.

차트나 계층 구조를 재구성하지 않고 정책을 패치하세요:

chart.setLODOptions({ density: 0.75, rebaseRatio: 1.12, quantizationStep: 0.1 });

mode: "pyramid"는 미리 빌드된 전역 최소/최대 수준들 중에서 선택합니다. 스택형 영역은 각 입력을 개별적으로 축소하면 누적 기하학이 변경되기 때문에 항상 이 경로를 사용합니다.

가시성 및 표시

chart.setSeriesVisible(2, false);
chart.setVisibleSeries([0, 1]);
chart.updateSeriesAppearance(0, { color: "#ffe47a", width: 2 });

chart.setSeriesVisibilityCallback((event) => {
  console.log(event.source, event.visibility);
});

가시성 콜백은 초기화, API 또는 대화형 범례에서 비롯된 변경을 식별합니다. legend.allowHideAll는 내장 범례가 최종 표시 계열을 숨길 수 있는지를 제어합니다.

스트리밍

chart.initStreaming(2, 1_000_000);
chart.addVector(timestamp, [phaseL1, phaseL2]);

기존 타입된 열에는 addVectors를 사용하세요. 링 버퍼는 래핑된 후에도 시간순 표시를 유지합니다.

애니메이션 교체

setData와 setMultiSeriesData은 애니메이션이 활성화된 경우 왼쪽에서 오른쪽으로 새 시리즈를 드러냅니다. preservePreviousFrame: true는 이전 플롯을 새 드러내기 경계보다 앞서 유지합니다. 이것은 앞선 드러내기가 완료된 후에만 사용하고, 미리보기를 전체 데이터세트로 교체할 때는 즉시 뷰포트를 복원하세요.