무엇을 하는지, 그리고 얼마나 빠른지.
이 페이지의 모든 내용은 @tradecanvas/chart 1.31.0에 포함되어 있습니다. 프레임 시간은 내장 그래픽(Intel UHD)을 쓰는 노트북의 Chrome에서 측정했습니다. 저장소에서 node scripts/bench-render.mjs를 실행하면 같은 장면을 여러분의 기기에서 돌려 볼 수 있습니다.
숫자로 보기
- 차트 유형
- 18
- 내장 지표
- 111
- 그리기 도구
- 69
- 위젯 언어
- 30
- 스타일 키
- 101
- 위젯 기능 스위치
- 112
- 서드파티 런타임 의존성
- 0
- 단위 테스트
- 3,000+
프레임 시간
이동하는 동안 한 프레임을 그리는 데 걸리는 시간. 16.7 ms면 초당 60프레임입니다.
| 차트 | 픽셀 비율 | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 캔들 500개 + 지표 4개 · 2× | 2 | 27.4 ms | 19.6 ms | |
| 1600×900, 200,000개 봉 전체 보기 + 지표 4개 · 2× | 2 | 34.5 ms | 20.2 ms | |
| 1600×900, 1,000,000개 봉 전체 보기 + 지표 4개 · 2× | 2 | 34.5 ms | 16.7 ms | |
| 1600×900, 호가 히트맵, 스냅샷 240개 × 80단계 · 2× | 2 | 25.5 ms | 16.8 ms | |
| 차트 6개, 각각 캔들 500개와 지표 2개 · 2× | 2 | 23.5 ms | 17.2 ms | |
| 2560×1400, 캔들 2,000개 + 지표 4개 · 1× | 1 | 41.6 ms | 17.7 ms | |
| 2560×1400, 캔들 2,000개 + 지표 4개 · 1.5× | 1.5 | 70.8 ms | 17.6 ms | |
| 2560×1400, 캔들 2,000개 + 지표 4개 · 2× | 2 | 114.5 ms | 29.1 ms |
기본값은 Canvas 2D입니다. renderer: 'webgl'(또는 'auto')로 하면 플롯 영역을 WebGL 2로 그리고, WebGL 2가 없거나 컨텍스트를 잃으면 Canvas 2D로 돌아갑니다.
데이터 경로
- 100,000개 봉에 볼린저 밴드, EMA, RSI, MACD를 얹은 상태의 실시간 틱 하나
- ~0.001 ms
- 같은 네 지표를 100,000개 봉에서 전체 재계산
- ~27 ms
- 화면에 보이는 1,000,000개 점의 라인을 한 프레임용으로 다운샘플링
- ~2.6 ms
- 호버 시 다시 그리기(십자선, 범례)
- ~0.2 ms
- 종목이나 시간 단위를 바꿀 때 로딩 표시가 나타나기까지
- 200 ms
다운로드 크기
가져오는 모든 것을 포함해, 압축(minify)과 gzip을 거친 크기.
- Chart, 헤드리스 API
- 176 KB
- ChartWidget, 전체 UI
- 315 KB
- WebGL 렌더러, 처음 사용할 때 로드
- 18 KB
검증 방법
- 일곱 개 패키지에 걸친 3,000개가 넘는 단위 테스트가 풀 리퀘스트마다 CI에서 실행됩니다.
- WebGL 렌더러는 캔들을 Canvas 2D와 같은 장치 픽셀에 그립니다. 선과 채우기는 안티앨리어싱된 가장자리의 몇몇 픽셀에서만 다릅니다.
- WebGL 렌더러는 Chromium, Firefox, WebKit에서 확인했습니다. WebGL 2가 없거나 컨텍스트를 잃어도 차트는 Canvas 2D로 계속 그립니다.
- 문서와 에이전트 스킬의 코드 예제는 실제 API에 대해 타입 검사를 거칩니다.
- 차트는 스크린 리더로 읽을 수 있고 키보드로 조작할 수 있습니다. 위젯은 아랍어, 히브리어, 페르시아어에서 오른쪽에서 왼쪽으로 표시됩니다.
기능
영역으로 거르거나, 이름이나 API로 검색하세요.
| 기능 | 영역 | 세부 내용과 API |
|---|---|---|
| 캔들, OHLC 바, 라인, 영역, 기준선, 하이킨아시, 속이 빈 캔들 | 차트 유형 | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| 렌코, 라인 브레이크, 카기, 포인트 앤 피겨, 레인지 바 | 차트 유형 | 박스 크기 또는 ATR, 돌파할 선 수, 퍼센트나 가격 단위의 반전 폭, 봉당 범위 |
| 거래량 캔들, 이퀴볼륨, HLC 영역, 계단선, 마커가 있는 라인, 고가-저가 | 차트 유형 | 모두 18가지 차트 유형 |
| 메인 시리즈 숨기기 | 차트 유형 | 지표와 그림만 남김 |
| 대시보드용 차트 | 차트 유형 | 막대(묶음, 누적, 가로), 도넛과 파이, 산점도와 버블, 히스토그램, 캘린더, 상관 행렬, 섹터 맵, 역시계곡선, 스파크라인, 게이지, 히트맵과 트리맵, 워터폴, 호가 깊이, 자산 곡선 |
| Canvas 2D 또는 WebGL 2 | 렌더링 | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, rendererChange 이벤트 |
| 축소 시 픽셀 열마다 한 구간 | 렌더링 | 봉당 1픽셀 미만일 때의 지표 선, 밴드, 히스토그램 |
| 봉 100만 개도 부드럽게 이동 | 렌더링 | 지표 4개, 픽셀 비율 2에서 |
| GPU로 그리는 호가 히트맵, 거래량 프로파일, 마켓 프로파일 | 렌더링 | pushDepthSnapshot(book, time) |
| 한 페이지에 여러 WebGL 차트 | 렌더링 | 최대 8개(setMaxWebGLCharts). 나머지는 Canvas 2D로 그리고, 컨텍스트가 돌아오면 WebGL로 복귀 |
| 어떤 화면 배율에서도 선명하게 | 렌더링 | 100%, 125%, 200%에서 캔들, 거래량, 그림을 기기 픽셀에 맞춤 |
| 서드파티 런타임 의존성 없음 | 렌더링 | 따로 설치하거나 점검할 것이 없음 |
| 내장 지표 134개 | 지표 | 여섯 종류의 피벗 포인트, MA Cross, 다른 종목과의 상관관계 |
| 가격 소스 | 지표 | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| 지표 위의 지표 | 지표 | 예: RSI의 이동평균, 틱마다 갱신 |
| 한 패널에 여러 지표, 패널 간 이동 | 지표 | moveIndicatorToPane |
| 같은 지표를 여러 개 | 지표 | EMA 20과 EMA 50을 나란히 |
| 레벨과 기준값 | 지표 | RSI 30/70, CCI ±100, 레이아웃과 함께 저장 |
| 축 위의 마지막 값 | 지표 | 가격 축과 각 패널의 축에, 선과 같은 색으로 |
| 패널 접기, 최대화, 순서 변경 | 지표 | 레이아웃과 함께 저장 |
| 지표 템플릿 | 지표 | 입력값, 스타일, 레벨, 패널을 함께 저장하고 적용 |
| 선마다 스타일과 표시 여부 | 지표 | 숨긴 선은 눈금을 늘리지 않음. setIndicatorDefaults |
| 거래량 델타와 CVD | 지표 | 봉에서 추정 |
| 지표 값 내보내기 | 지표 | CSV 또는 JSON, 선마다 한 열 |
| 실시간 틱의 증분 갱신 | 지표 | update()는 형성 중인 봉만 다시 계산 |
| 그리기 도구 69개 | 그리기 도구 | 선, 채널, 피보나치, 갠, 피치포크, 엘리어트 파동, 패턴, 사이클, 프로젝션 |
| 도구마다의 설정 | 그리기 도구 | 스타일, 속성, 시장 가격 단위에 맞춘 좌표 |
| 롱 포지션과 숏 포지션 | 그리기 도구 | 손익비, 위험 비율이나 금액으로 수량 계산 |
| 그림에 거는 알림 | 그리기 도구 | 그린 그대로의 추세선이나 채널을 가격이 넘을 때, 로그 눈금 포함 |
| 순서, 그룹, 템플릿 | 그리기 도구 | 앞으로 가져오기, 뒤로 보내기, 그룹, 잠금, 숨기기 |
| 메모, 말풍선, 화살표, 깃발, 브러시, 경로, 곡선 | 그리기 도구 | 자유 그리기와 여러 점 그리기 |
| 앵커 VWAP과 고정 범위 거래량 프로파일 | 그리기 도구 | 차트의 봉을 읽어 계산 |
| 지우개, 확대 상자, 강한 자석, 키보드 단축키 | 그리기 도구 | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| 날짜로 이동, 1D부터 All까지의 범위 | 눈금과 시간 | 축소 한도 없음 |
| 서머타임을 반영한 IANA 시간대 | 눈금과 시간 | 또는 거래소 고유의 시간대 |
| 모든 시간 단위와 틱 봉 | 눈금과 시간 | 7m, 90m, 2d는 피드가 제공하는 데이터로, 100T는 체결 내역으로 생성 |
| 왼쪽과 오른쪽 눈금, 패널별 로그·반전·퍼센트 | 눈금과 시간 | 왼쪽 눈금은 오버레이용이나 가격 눈금의 복사본으로 |
| 종목 비교, 스프레드와 비율 | 눈금과 시간 | 별도 눈금이나 패널에서 시간을 맞춰 표시 |
| 시간외 거래 | 눈금과 시간 | 종목의 거래 시간에 따라 |
| 가격과 시간 형식 | 눈금과 시간 | priceFormat은 함수로도, 1/32 같은 분수로도. timeFormatter |
| 종목의 소수 자릿수와 호가 단위에 맞춘 눈금 | 눈금과 시간 | pricePrecision, minTick: 10 단위로 움직이는 주식에 21,705가 표시되지 않음 |
| 고가·저가 선, 매수·매도 호가 | 눈금과 시간 | 매수·매도 호가는 피드의 틱에서 |
| 차트 위 이벤트 표시 | 눈금과 시간 | signalMarkerHover, signalMarkerClick |
| 바로 쓰는 피드와 직접 만든 피드 | 데이터와 실시간 | Binance, Bybit, Coinbase, Kraken, mock. WebSocketAdapter, PollingAdapter |
| 왼쪽으로 스크롤하면 이전 기록 로드 | 데이터와 실시간 | fetchHistoryBefore |
| 세부 정보가 있는 종목 검색 | 데이터와 실시간 | searchSymbols, resolveSymbol: 소수 자릿수, 호가 단위, 거래 시간, 시간대 |
| 연결 후에 알게 되는 종목 정보 | 데이터와 실시간 | 어댑터의 symbolInfo 이벤트 |
| 호가창 래더 | 데이터와 실시간 | 가격별 매수·매도 잔량, 클릭해 주문 |
| 관심 종목용 실시간 시세 | 데이터와 실시간 | subscribeQuotes, setQuotes, getQuote |
| 뉴스와 시장 상태 | 데이터와 실시간 | fetchNews, 개장이나 마감까지의 카운트다운 |
| 거래소 규칙 | 데이터와 실시간 | setMarket: 가격대별 호가 단위, 일일 상한가와 하한가, 매매 단위, 거래 세션, HOSE·HNX·UPCoM·VN30 선물 |
| 차트 위의 주문과 포지션 | 트레이딩 | 드래그로 수정하고, 선에서 바로 취소·청산·반전 |
| 체결 표시 | 트레이딩 | executionFill에 사유와 손익 |
| 주문 티켓 | 트레이딩 | 수량, 유형, 손절과 익절, 유효 기간, 입력하는 동안 검사, 거래소의 호가 단위·상한가·하한가·매매 단위까지 |
| 계좌 패널 | 트레이딩 | 실시간 손익이 있는 포지션, 미체결 주문, 체결 내역 |
| 신호와 거래 구간 | 트레이딩 | markers.*, tradeZones.* 스타일 키 |
| 백테스트와 리스크 지표 | 트레이딩 | @tradecanvas/analytics: 수수료, 슬리피지, Sharpe, Sortino, Calmar, 낙폭 |
| 가격 수준을 넘어선 알림 | 알림과 리플레이 | 선과 선의 교차, N개 봉 동안 N% 변동, 봉 마감 시, 만료 시간 지정 |
| 더 촘촘한 단계의 봉 리플레이 | 알림과 리플레이 | 큰 시간 단위를 작은 봉으로 리플레이 |
| 리플레이 중 모의 거래 | 알림과 리플레이 | 리플레이되는 가격으로 주문 체결 |
| 차트 그리드 전체 리플레이 | 알림과 리플레이 | 서로 보조를 맞춰 진행 |
| 애플리케이션용 리플레이 | 알림과 리플레이 | startTime, hideHistory, duration, 재생되며 드러나는 표시, replayComplete |
| 동기화되는 위젯 그리드 | 작업 공간 | 최대 6개, 종목·시간 단위·십자선·시간·그림을 공유 |
| 직접 정한 저장소에 이름 붙인 레이아웃 | 작업 공간 | 저장, 열기, 이름 바꾸기, 자동 저장. 서버에는 LayoutStorage |
| 모든 작업의 실행 취소와 다시 실행 | 작업 공간 | 그림, 지표, 설정, 차트 유형. recordUndo |
| 영역별 컨텍스트 메뉴 | 작업 공간 | 그림, 플롯, 패널, 가격 축, 시간 축 |
| 관심 종목 | 작업 공간 | 여러 목록, 드래그로 순서 변경 |
| 호스트 앱을 위한 이벤트 | 작업 공간 | symbolChange, timeframeChange, ordersChange, executionFill, styleChange 등 |
| 위젯의 세 가지 외관 | 사용자 지정 | Studio, Terminal, Capsule. ui와 setUI. --tcw-* CSS 변수 |
| 키 단위로 정하는 차트의 모양 | 사용자 지정 | 타입이 지정된 101개 키에 applyOverrides, 호스트 계층과 사용자 계층 |
| 모든 키에 닿는 설정 | 사용자 지정 | 보고 있는 차트 유형의 스타일 탭과 트레이딩 탭 |
| 기능 스위치 112개 | 사용자 지정 | features, setFeatures, isFeatureOn. 실행 중에도 변경 |
| 위젯에 넣는 나만의 요소 | 사용자 지정 | 도구 모음 버튼과 드롭다운, 사이드바 버튼, 상태 항목, 슬롯, 메뉴 항목 |
| 나만의 단축키 | 사용자 지정 | 키보드 배열에 맞춘 addHotkey |
| 30개 언어를 지원하는 위젯 | 언어와 접근성 | 아랍어, 히브리어, 페르시아어는 오른쪽에서 왼쪽으로 |
| 스크린 리더와 키보드 | 언어와 접근성 | 차트 요약, 봉을 하나씩 읽기, 키보드로 다루는 대화 상자 |
| 문서는 6개 언어, 이 사이트는 14개 언어 | 언어와 접근성 | English, Tiếng Việt, 简体中文, 日本語, 한국어, Español |
| React, Vue, Svelte 컴포넌트 | 개발자 | 반응형 props: overrides, indicators, features |
| 플러그인 | 개발자 | 지표, 그리기 도구, 차트 유형, 오버레이. overlayScale과 getPriceStep으로 가격 단위에 맞춰 그리기 |
| 코딩 에이전트를 위한 문서 | 개발자 | llms.txt, llms-full.txt, 에이전트 스킬 |
알려진 한계
- WebGL을 더 많은 기기에서 시험할 때까지 기본 렌더러는 Canvas 2D입니다. Safari와 5K 화면에서 WebGL의 프레임 속도는 아직 측정하지 않았습니다.
- 2560×1400 차트에서 픽셀 비율이 2이면, 내장 그래픽에서는 브라우저의 합성만으로 약 23 ms가 걸려 WebGL 프레임이 평균 29 ms가 됩니다.
- 틱 시간 단위는 피드가 돌려주는 최근 체결로 만들어지며, 그보다 오래된 틱 기록은 불러올 수 없습니다.
- 거래량 델타와 CVD는 체결마다의 매수·매도 방향이 아니라 봉에서 추정합니다.
- 한 페이지에서 동시에 WebGL로 그리는 차트는 최대 8개이며, 나머지는 Canvas 2D로 그립니다.