대규모 데이터

한도를 정하기 전에 사용자가 무엇을 확인할 수 있어야 하는지 결정하세요. 정확한 방식은 화면에 보이는 데이터마다 별도 표시와 ID를 유지합니다. 집계 방식은 가까운 데이터를 개수와 값 범위를 가진 요약 셀로 합칩니다. 집계하면 더 많은 데이터를 다룰 수 있지만, 그 셀에서 원본 데이터 하나를 선택할 수는 없습니다.

개별 표시와 요약 셀 중 고르기

차트	기본 상세도	더 많은 데이터를 위한 옵션	한도가 부족할 때
선	높고 낮은 값은 보존하면서 선의 점 수를 자동으로 줄임	기본 제공	줄인 선도 담지 못할 때 오류 반환
산점도	보이는 데이터마다 점 하나	projection="density"	개별 표시에서는 오류, 밀도 모드에서는 요약 셀 반환
막대	보이는 데이터마다 막대 하나	없음	오류 반환
히트맵	보이는 데이터마다 셀 하나	{ kind: 'aggregate', reduction }	개별 표시에서는 오류, 집계 모드에서는 요약 셀 반환
파이	데이터마다 조각 하나	없음	오류 반환
도넛	데이터마다 조각 하나	없음	오류 반환

히트맵 요약 셀의 표시 값은 sum, mean, minimum, maximum 중 하나로 계산합니다. 요약 셀을 가리키면 데이터 ID 대신 개수, 원본 값 범위, 선택한 계산 방법을 받습니다.

<ChartScatter
  id="requests"
  :data="requests"
  x-axis="latency"
  y-axis="payload"
  projection="density"
/>

<ChartHeatmap
  id="traffic"
  :data="traffic"
  x-axis="day"
  y-axis="hour"
  :projection="{ kind: 'aggregate', reduction: 'mean' }"
/>

화면에 그릴 항목 수 제한하기

const chart = createDOMChart({
  root,
  canvas,
  controller,
  renderer: 'auto',
  renderPolicy: {
    type: 'fixed',
    renderScale: 1,
    maximumRepresentatives: 100_000,
  },
})

maximumRepresentatives는 현재 화면에 만들 수 있는 그리기 항목의 최댓값입니다. 원본 행 개수만 보지 말고 사용자가 읽고 조작할 수 있는 상세도를 기준으로 정하세요. x축과 y축의 표시 범위 밖에 있는 데이터는 세지 않습니다. 개별 표시가 한도를 넘으면 데이터를 몰래 버리지 않고 오류를 반환합니다.

프레임이 느릴 때 Canvas 해상도 낮추기

auto는 WebGL2를 우선 사용하고 Canvas2D로 전환할 수 있습니다. WebGL2는 갱신 사이에 바뀌지 않은 그리기 데이터를 재사용할 수 있습니다. 적응형 렌더링은 측정한 프레임 시간이 예산을 넘으면 지정한 범위 안에서 Canvas 내부 해상도를 낮춥니다.

renderPolicy: {
  type: 'adaptive',
  minimumRenderScale: 0.5,
  maximumRenderScale: 1,
  frameBudgetMs: 12,
  maximumRepresentatives: 100_000,
}

내부 해상도를 낮추면 그림이 덜 선명해질 수 있습니다. 값, 데이터 ID, 선택, 접근성 이름, 축의 표시 범위는 바뀌지 않습니다.

갱신 비용 예측 가능하게 유지하기

• 조회 결과가 바뀐 레이어의 배열만 교체하고, 바뀌지 않은 레이어는 같은 배열을 유지합니다.
• 같은 데이터의 ID를 유지해 선택과 가리키기 상태가 갱신 뒤에도 남게 합니다.
• 데이터 원본이 이미 차트용 증분 작업을 만들고 축 범위를 다시 계산할 필요가 없을 때만 저수준 패치를 사용합니다.
• 첫 가리키기부터 준비 지연이 없어야 한다면 첫 포인터 입력 전에 위치 찾기 자료 구조를 준비합니다.
• DOM 차트 연결을 끊고 앱에서 만든 컨트롤러와 렌더러를 정리합니다.

기본 안전 한도는 레이어 64개, 원본 데이터 1,000,000개, 그리기 항목 1,000,000개입니다. 이 값은 더 큰 입력을 거부할 뿐, 모든 기기에서 이만큼을 부드럽게 그릴 수 있다는 뜻은 아닙니다.

앱의 한도를 정하기 전에 예상하는 최대 데이터 수와 갱신 빈도를 가장 큰 차트 크기에서 측정하세요. 지원할 브라우저, 높은 기기 픽셀 비율, 지원 대상 중 가장 느린 GPU 등급도 포함해야 합니다.