v1.9.0 เรนเดอร์ด้วยแคนวาสสองชั้น เลื่อนได้อิสระ

เอนจินกราฟสำหรับแอปเทรด

ตั้งแต่แท่งเทียนจนถึงเรนโกะ อินดิเคเตอร์ 95 ตัว เครื่องมือวาด 69 แบบ ฟีดสดจากตลาดซื้อขาย และคำสั่งซื้อขายบนกราฟ วาดด้วย Canvas2D โดยไม่พึ่งพาไลบรารีอื่น ใส่ ChartWidget แบบครบชุดได้ทันที หรือสร้าง UI ของคุณเองบน Chart แบบ headless

เริ่มต้นใช้งาน ดูตัวอย่าง

Vanilla TSReactVueSvelte

กำลังเชื่อมต่อ · BINANCE · BTCUSDT · 5m ลาก เลื่อนล้อเมาส์ ซูมลากแกน ปรับสเกล
17
ประเภทกราฟ
85
อินดิเคเตอร์
40
เครื่องมือวาด
0
ไลบรารีที่ต้องพึ่งพาขณะรัน
≈100kB
gzip, แกนหลักแบบ headless
<0.3ms
เฟรมเมื่อชี้เมาส์ ที่ 100k แท่ง
แล็บฟีเจอร์

ทุกฟีเจอร์ บนกราฟสด

เลือกฉาก แต่ละฉากจะเปิด ChartWidget ตัวเต็มในสถานะที่แสดงความสามารถหนึ่งด้าน จากนั้นคุณลาก วาด และสลับได้ตามใจ

เครื่องมือฟีโบนัชชีและแกนน์ที่กำหนดระดับเองได้ คลื่นเอลเลียต รูปแบบฮาร์มอนิก โน้ต และพู่กัน ดับเบิลคลิกที่ภาพวาดเพื่อเปิดการตั้งค่า คลิกขวาเพื่อเปิดเมนู การแจ้งเตือนวิ่งตามเส้นแนวโน้ม และเครื่องมือสถานะซื้อ/ขายจะคำนวณขนาดสถานะให้

เลื่อนลงมาให้เห็นเพื่อเริ่มกราฟสด
เปลี่ยนสัญลักษณ์หรือกรอบเวลาเพื่อจับเวลา

ลองทำดู

  • ดับเบิลคลิกที่ฟีโบนัชชีรีเทรซเมนต์ แล้วแก้ไขระดับ
  • คลิกขวาที่ภาพวาด: เลื่อนไปข้างหน้า จัดกลุ่ม หรือเพิ่มการแจ้งเตือน
  • เลือกพู่กันหรือเครื่องมือเส้นทาง กด Enter เพื่อจบเส้นทาง
chart.addDrawing({
  type: 'riskReward',               // Long/Short Position
  anchors: [entry, stop],           // { time, price } each
  options: { accountSize: 10_000, risk: 1, rewardRatio: 2 },
})
chart.addDrawingAlert(trendLine, { condition: 'crossing' })
chart.groupDrawings([fib, note], 'Swing')
ประเภทกราฟ

กราฟทุกประเภท ทำงานสดบนหน้าเว็บ

แต่ละช่องคืออินสแตนซ์ Chart จริง ไม่ใช่รูปภาพ ลากเพื่อเลื่อน หมุนล้อเมาส์เพื่อซูม และชี้เมาส์เพื่อดูเป้าเล็ง ทุกช่องตอบสนองแยกกัน

แท่งเทียน OHLC
ไฮเคน อาชิ แนวโน้ม
พื้นที่ ราคาปิด
เส้นฐาน เหนือ / ใต้
บาร์ OHLC คลาสสิก
เส้นขั้นบันได ไม่ต่อเนื่อง
เบื้องหลังการทำงาน

วัดผลได้ มีเอกสารครบ และต่อยอดได้ตามต้องการ

เอนจินที่ขับเคลื่อนแล็บฟีเจอร์ ทุกตัวเลขด้านล่างทำซ้ำได้ด้วย pnpm bench

งบเวลาต่อเฟรม

0.001ms
ติกสดพร้อมอินดิเคเตอร์ 4 ตัวบน 100k แท่ง
27ms
คำนวณใหม่ทั้งหมดหลังเปลี่ยนสัญลักษณ์ ที่ 100k แท่ง
0.32ms
ลดจำนวนจุดด้วย LTTB จาก 100k → 1,600 จุด
<0.3ms
เฟรมเมื่อชี้เมาส์ คงที่ตั้งแต่ 500 ถึง 100k แท่ง

แคนวาสสองชั้นซ้อนกัน: การชี้เมาส์จะวาดใหม่เฉพาะชั้นบนที่บาง และตัวเรนเดอร์ทุกตัวจะไล่เฉพาะแท่งที่อยู่บนหน้าจอ

ท่าทาง

ลาก
เลื่อนกราฟ รวมถึงเลยแท่งสุดท้ายไปได้
ล้อเมาส์
ซูมรอบเคอร์เซอร์
จีบนิ้ว
ซูมบนหน้าจอสัมผัส
ลากไปทางขวา
โหลดแท่งเก่าเพิ่มระหว่างเลื่อน
ลากแกน
ปรับสเกลแกน
Ctrl + ลาก
เลือกภาพวาด
Shift + ลาก
วัดระยะ
Alt + คลิก
ปักหมุดทูลทิป
วิดเจ็ตเรียกครั้งเดียว ได้ UI เทรดครบชุด
ChartWidget มาพร้อมแถบเครื่องมือ แถบวาดด้านข้าง รายการเฝ้าดู การแจ้งเตือน ต้นไม้ออบเจ็กต์ หน้าต่างข้อมูล การเล่นซ้ำ และแผงคำสั่ง (Ctrl+K) ใน 16 ภาษา ตั้งแต่อังกฤษและเวียดนาม ไปจนถึงจีน ญี่ปุ่น เกาหลี และอาหรับ
ข้อมูลรองรับฟีดตลาดทุกแบบ
มีอะแดปเตอร์ Binance, Coinbase, Bybit และ Kraken ในตัว ส่วนแหล่งอื่นใช้ WebSocketAdapter และ PollingAdapter แท่งเก่าจะโหลดเพิ่มเมื่อเลื่อนย้อนหลัง เชื่อมต่อใหม่ได้เอง และทิ้งการสลับสัญลักษณ์ที่ถูกแทนที่ไปแล้ว
การเทรดคำสั่งซื้อขายบนกราฟ
ExecutionAdapter พร้อมโบรกเกอร์จำลอง สร้างคำสั่งด้วยการลาก คำสั่งแบร็กเก็ต เส้นตัดขาดทุนและทำกำไรที่ลากได้ การแจ้งเตือนไปยัง webhook และการแจ้งเตือนบนเดสก์ท็อป
เฟรมเวิร์กReact, Vue และ Svelte
@tradecanvas/react, /vue และ /svelte ห่อหุ้มเอนจินเดียวกันด้วย props แบบ reactive ที่มีชนิดข้อมูลกำกับ และยังเข้าถึงอินสแตนซ์ Chart ตัวเต็มได้ผ่าน ref เดียว
ปลั๊กอินขยายได้ทุกเลเยอร์
ลงทะเบียนอินดิเคเตอร์ของคุณเองที่มี update() แบบคำนวณเพิ่มทีละส่วน รวมถึงเครื่องมือวาด ประเภทกราฟ และโอเวอร์เลย์ ได้ทั้งแบบใช้ทุกกราฟหรือเฉพาะกราฟ
การวิเคราะห์แบ็กเทสต์ข้างกราฟ
Backtester แบบทีละแท่งพร้อมแถบ Monte Carlo และไปป์ไลน์อินดิเคเตอร์บน Web Worker ที่ไม่ทำให้เธรดหลักติดขัด
กราฟการเงิน

มากกว่าแท่งเทียน

สปาร์กไลน์ เส้นมูลค่าพอร์ต ความลึกของสมุดคำสั่ง ฮีตแมปรายกลุ่มอุตสาหกรรม กราฟน้ำตก และเกจ สำหรับพอร์ตโฟลิโอและ KPI

BTC $65,234
+2.4%
ETH $3,412
-1.2%
SOL $148.00
+5.1%
BNB $582.00
+0.8%
ADA $0.4500
-3.2%
DOT $7.23
+1.6%
ผลการดำเนินงานของพอร์ต
ความลึกของสมุดคำสั่ง
ฮีตแมปตลาดคริปโต
ที่มาของกำไร/ขาดทุน
ดัชนีความกลัวและความโลภ
เริ่มต้นอย่างรวดเร็ว

กราฟเดียวกัน ห้าวิธีเริ่มใช้

วิดเจ็ตครบชุด คอมโพเนนต์สำหรับเฟรมเวิร์ก หรือเอนจินแบบ headless ทั้งหมดใช้ตัวเรนเดอร์เดียวกัน

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

new ChartWidget(document.getElementById('chart')!, {
  symbol: 'BTCUSDT',
  timeframe: '5m',
  adapter: new BinanceAdapter(),
  locale: 'en',            // 14 languages: 'vi', 'ja', 'zh'…
  trading: true,
})

ใส่กราฟสดลงในแอปของคุณได้ตั้งแต่วันนี้

อ่านเอกสาร กดดาวบน GitHub