많은 점 (다운샘플링·점진 렌더링)

선·영역 차트에 점이 2,000개를 넘으면 82chart는 그림 폭(px)쯤의 점만 골라 그립니다. 고르는 방법은 LTTB(Largest-Triangle-Three-Buckets)로, 구간마다 모양을 가장 많이 바꾸는 점을 남기기 때문에 봉우리와 골짜기가 사라지지 않습니다. SVG 하나에 수만 개의 점을 넣지 않으니 화면·서버 렌더링·내보내기가 모두 가벼워집니다.

createChart('#chart', {
  type: 'line',
  title: '센서 값 (2 × 2만 개)',
  zoom: true,
  data: {
    series: ['1호기', '2호기'].map((name, k) => ({
      name,
      data: Array.from({ length: 20000 }, (_, i) => [new Date(Date.UTC(2026, 9, 1) + i * 60000), +(20 + k * 4 + Math.sin(i / 300 + k) * 6 + (i % 1733 === 0 ? 9 : 0)).toFixed(2)]),
    })),
  },
});

• 툴팁·크로스헤어·키보드는 남은 점 위에서 움직입니다. 확대(zoom)하면 보이는 구간만 다시 골라서 원래 점이 더 많이 보입니다.
• toCSV(), 내려받은 CSV, 데이터 표에는 줄이기 전의 모든 값이 들어갑니다.
• 빈 값(null) 앞뒤는 남겨서 선이 끊기는 곳은 그대로입니다. 시리즈가 여럿이면 각 시리즈에서 고른 점을 합쳐 모두 같은 x 에 놓입니다.
• 막대는 줄이지 않습니다. 막대 수천 개는 미리 묶어서(일·주 합계) 넘기세요. 누적 영역이 여러 겹이면 시리즈마다 고른 점을 합치는 대신 맨 위 윤곽 하나로 골라 점 수가 불지 않게 합니다.

점진 렌더링 (progressive)

선·영역·산점도의 점이 모두 합쳐 5,000개를 넘으면 한 번에 그리지 않고 단계로 그립니다. 먼저 불러오는 중 자리 표시(반짝이는 막대)가 바로 뜨고, 다음 프레임에 시리즈마다 150점쯤의 거친 그림이 옅게 나오며, 브라우저가 한가할 때 전체 그림으로 바뀝니다(차차 또렷해짐). 그동안 aria-busy 가 켜져 있고, 마지막 단계가 끝나면 render 이벤트가 옵니다. 위 예제를 새로 고치면 보입니다.

크기만 바뀌거나(창 크기 조절) 다른 옵션만 바뀌면 단계 없이 바로 다시 그립니다. 동작 줄이기 설정이면 또렷해지는 효과도 없습니다. renderToSVG 는 언제나 완성된 그림을 바로 돌려줍니다.

그 밖에 가볍게 만든 것

• 스크린리더용 숨은 데이터 표는 처음 50줄과 마지막 50줄, 그리고 "외 N행이 더 있습니다. 전체 데이터는 CSV로 내려받으세요." 한 줄만 둡니다. ⋯ 메뉴의 표로 보기나 table: true 로 보이게 하면 그때 모든 줄을 만듭니다. CSV 는 언제나 전부입니다.
• 표·머리글·범례·도구 단추는 내용이 바뀔 때만 다시 만들고, 창 크기 조절이나 마우스 이동 때는 그대로 둡니다.
• 마우스를 움직이면 한 프레임에 한 번만 툴팁을 옮기고, 가장 가까운 x 는 정렬된 위치에서 이분 탐색으로 찾습니다.
• 산점도 점이 3,000개를 넘으면 같은 픽셀에 겹치는 점은 한 번만, 점마다 요소를 만들지 않고 반투명 경로 몇 개로 그립니다. 툴팁은 모든 원래 점을 찾습니다(격자 색인).