bonguynvan/tradecanvas

라이브 데모 · 문서 · 예제 · 시스템 점검 · 변경 기록

English · Tiếng Việt · 简体中文 · 日本語 · 한국어 · Español

웹을 위한 완전한 트레이딩 차트. 캔들스틱부터 렌코까지, 134개 지표, 69개 그리기 도구, 거래소 실시간 피드와 차트 위 주문을 서드파티 의존성 없이 Canvas 2D 또는 WebGL로 그립니다. 완전한 ChartWidget을 그대로 넣거나 헤드리스 Chart 위에 직접 UI를 만들 수 있으며, TypeScript, React, Vue, Svelte를 지원합니다.

주요 특징

• 18가지 차트, 134개 지표, 69가지 드로잉 도구, 지표 위의 지표, 선에 거는 알림, 실행 취소와 다시 실행.
• 차트 위 거래: 손익이 실시간으로 바뀌는 포지션, 끌어서 옮기는 주문과 손절, 모의 브로커 또는 직접 연결.
• 실시간 데이터: Binance, Bybit, Coinbase, Kraken 내장, 직접 만든 피드는 스무 줄 남짓.
• 빠름: WebGL로 봉 100만 개를 60 fps로 이동, 실시간 틱 하나에 약 1마이크로초, 봉 100만 개 위에서 초당 30,000건 체결을 10분 동안 받아도 메모리가 늘지 않음(측정).
• 작업 공간: 차트 그리드, 레이아웃, 봉 리플레이, 백테스트.
• 원하는 대로: 테마, 세 가지 룩, 114개 스위치, 플러그인; 30개 언어; 휴대폰과 앱.

끌어서 옮기는 주문: 손절, 목표가, 지정가가 마우스를 따라 움직입니다.	봉 리플레이: 시장을 다시 재생하고 그 위에서 모의 거래.
그리드: 차트 최대 여섯 개를 종목, 시간 단위, 십자선, 시간으로 연동.	나만의 룩: Print(종이와 잉크, 황금비로), Studio, Terminal, Capsule, Desk(데스크톱 트레이딩 프로그램 창), 라이트 또는 다크, 또는 직접 만든 토큰.
	휴대폰에서: 손가락으로 이동, 확대, 그리기, 주문 끌기를 하고, 위젯은 작은 화면에 맞게 배치를 바꿉니다. WebView, React Native, Capacitor, Tauri에서도 동작합니다.

빠른 시작

npm install @tradecanvas/chart

import { ChartWidget } from '@tradecanvas/chart/widget'
import { BinanceAdapter } from '@tradecanvas/chart'

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  theme: 'dark',
  adapter: new BinanceAdapter(), // 실시간 데이터, API 키 불필요
  trading: true,
})

헤드리스 Chart는 직접 준비한 봉 데이터(chart.setData(bars))를 받고 화면은 여러분에게 맡깁니다. 직접 만든 데이터 소스는 두 메서드(getBars, subscribeBars)만 있는 DataFeed로 작성해, 어댑터를 넘기는 곳이면 어디든 feed로 넘기면 됩니다. 피드 하나로 차트를 몇 개든 채울 수 있습니다. React, Vue, Svelte에서는 @tradecanvas/react, /vue, /svelte가 같은 props의 컴포넌트로 감쌉니다.

문서

시작하기 · API · 지표 · 드로잉 도구 · 실시간 · 거래 · 스타일 · 프레임워크 · 플러그인 · 휴대폰과 앱 · 성능

문서는 English, Tiếng Việt, 简体中文, 日本語, 한국어, Español으로 제공됩니다. 측정값, 한계, 테스트 방법은 시스템 점검에 있습니다.

AI 코딩 도구

skills/tradecanvas의 에이전트 스킬은 CI가 타입 검사하는 예제로 코딩 에이전트에게 API를 알려 줍니다. Claude Code에서는:

/plugin marketplace add bonguynvan/tradecanvas
/plugin install tradecanvas@tradecanvas

다른 에이전트(Cursor, Codex, Copilot 등): npx skills add bonguynvan/tradecanvas. 스킬 없이 쓸 때는 llms.txt와 llms-full.txt가 문서를 한 파일로 어시스턴트에게 제공합니다. 에이전트로 TradeCanvas 자체를 고친다면 저장소 규칙은 AGENTS.md에 있습니다.

MCP 서버 @tradecanvas/mcp는 지표, 드로잉 도구, 옵션, 기능 스위치, 스타일 키를 라이브러리 자체의 카탈로그에서 찾고, 옵션 객체를 쓰기 전에 검사합니다 (다른 클라이언트 설정):

claude mcp add tradecanvas -- npx -y @tradecanvas/mcp

WSL 밖의 Windows에서는: claude mcp add tradecanvas -- cmd /c npx -y @tradecanvas/mcp. Git Bash(Windows에서 Claude Code의 ! 명령을 실행하는 셸)에서는 //c로 씁니다. Git Bash가 /c를 경로로 바꾸기 때문입니다.

더 보기

• 패키지: @tradecanvas/chart(차트와 위젯), react · vue · svelte, 백테스트용 analytics, 코딩 에이전트용 mcp.
• 미리 보기: 모든 pull request와 main의 모든 커밋이 pkg.pr.new에 올라가 릴리스 전에 설치할 수 있습니다.
• 브라우저: Chrome 80+, Edge 80+, Firefox 80+, Safari 14+.
• 기업 고객: 표시할 로고도, 신청할 것도 없습니다. 기업 고객 페이지가 IT 검토의 질문에 답합니다. [email protected]
• 관련 프로젝트: bo-grid, 트레이딩 데스크의 표를 맡는 빠른 Svelte 데이터 그리드.
• 기여하기: 질문은 Discussions, 버그는 issue로, pull request는 CONTRIBUTING.md를 보세요. 보안 문제: SECURITY.md.
• 후원: TradeCanvas는 무료이며 공개적으로 개발됩니다. GitHub Sponsors가 개발을 이어 갑니다.

MIT