데이터 모델 및 소유권

Sixtyfold는 각 숫자 필드를 수백만 개의 행 오브젝트로 받는 대신 각 필드를 자체 Float64Array로 받습니다. 이 열 기반 레이아웃은 Worker로의 전송 및 렌더링을 예측 가능하게 만듭니다.

아래 형태는 line methods 및 stock methods에서 허용하는 입력입니다.

라인 데이터

단일 계열 데이터셋은 하나의 정렬된 X 열과 하나의 Y 열을 가집니다:

interface TimeSeriesData {
  x: Float64Array;
  y: Float64Array;
  length: number;
}

다중 계열 데이터는 모든 계열에서 X를 공유합니다:

interface MultiSeriesData {
  x: Float64Array;
  series: Array<Float64Array | {
    low: Float64Array;
    high: Float64Array;
    y?: Float64Array;
  }>;
  length: number;
  seriesCount: number;
}

범위 객체는 range 또는 band 계열에만 사용하십시오. low와 high는 외곽(envelope)을 정의하며, 선택적 y는 그 명시적 중앙 스트로크를 제공합니다. 합성된 중간값이 오해의 소지가 있을 경우 y를 생략하거나 계열 너비를 0으로 설정하십시오.

X 값은 유한하고 오름차순이어야 합니다. 타임스탬프는 일반 숫자이며 에포크 밀리초가 관례적이지만 필수는 아닙니다. minViewportRange, 뷰포트 값, 마커 타임스탬프 및 기타 모든 X-도메인 옵션은 X와 동일한 단위를 사용합니다.

실제 누락 관측값에는 Y, range-low 또는 range-high 배열에 NaN를 사용하세요. 연결된 렌더러는 간격을 통해 그리지 않고 경로를 끊습니다.

OHLCV 데이터

interface OHLCVData {
  timestamp: Float64Array;
  open: Float64Array;
  high: Float64Array;
  low: Float64Array;
  close: Float64Array;
  volume: Float64Array;
  length: number;
}

여섯 개의 열은 모두 정렬되어 있어야 하며 최소 length개의 항목을 가져야 합니다. normalizeOHLCVData은 오름차순 또는 내림차순 타임스탬프를 허용합니다. 오름차순 입력은 배열을 유지하고; 내림차순 입력은 호출자의 배열을 변경하지 않고 복사하여 역순으로 만듭니다.

타임스탬프를 규칙적으로 보이게 하기 위해 거래 마감 또는 누락된 피드 구간을 합성하지 마십시오. timeScale: "market"는 누락 구간을 시각적으로 압축하고 레이블, 이벤트 및 마커는 실제 타임스탬프를 유지합니다.

버퍼 소유권

Worker 모드에서는 대량 setData, setMultiSeriesData, addVectors, StockChart.setData 및 주식 배치 API가 최적 경로를 위해 타입화 배열 버퍼를 렌더러로 전송합니다. 전송된 버퍼는 분리(detached)되며 호출자가 읽거나 재사용해서는 안 됩니다.

애플리케이션이 자체 복사본을 유지해야 하는 경우 명시적으로 복제하십시오:

chart.setData({
  x: sourceX.slice(),
  y: sourceY.slice(),
  length: sourceX.length,
});

소유권을 유지하기 위해 메인 스레드 폴백 동작에 의존하지 마십시오. 대량 입력은 해결된 렌더러와 관계없이 전송된 것으로 처리하여 브라우저 변경이나 CSP 정책 변경이 애플리케이션의 정확성에 영향을 주지 않도록 하십시오.

스트리밍

라인 스트리밍은 initStreaming(seriesCount, maxPoints)로 초기화된 고정 크기 링 버퍼를 사용합니다. 스톡 스트리밍은 initStreaming(maxCandles)을 사용합니다. 용량에 도달하면 가장 오래된 관측값이 교체되지만 시간 순서 렌더링은 유지됩니다.

데이터가 이미 열 형태로 도착하는 경우 벡터 또는 캔들 배치 메서드를 사용하십시오. 단일 관측 메서드는 requestAnimationFrame를 통해 배치 처리되며 적당한 실시간 속도에서는 편리합니다.