v1.9.0 iki katmanlı canvas çizimi, serbest kaydırma

Alım satım uygulamaları için grafik motoru.

Mum grafiklerinden Renko’ya, 95 gösterge, 69 çizim aracı, canlı borsa akışları ve grafik üzerinde emirler. Canvas2D ile, sıfır bağımlılıkla çizilir. Hazır ChartWidget’ı ekleyin ya da kendi arayüzünüzü headless Chart üzerine kurun.

Başlayın Örneklere göz atın

Vanilla TSReactVueSvelte

BAĞLANIYOR · BINANCE · BTCUSDT · 5m Sürükle kaydırKaydırma yakınlaştırEkseni sürükle ölçekle

17: grafik türü
85: gösterge
40: çizim aracı
0: çalışma zamanı bağımlılığı
≈100kB: gzip, headless çekirdek
<0.3ms: üzerine gelme karesi, 100k bar

Özellik Laboratuvarı

Her özellik, canlı bir grafikte.

Bir sahne seçin. Her sahne eksiksiz ChartWidget’ı tek bir alanın çalıştığını gösteren bir durumda açar; sonrası size kalmış: sürükleyin, çizin, değiştirin.

Kendi seviyelerinizi kullanabildiğiniz Fibonacci ve Gann araçları, Elliott dalgaları, harmonik formasyonlar, notlar ve fırçalar. Bir çizime çift tıklamak ayarlarını, sağ tıklamak menüsünü açar; alarmlar trend çizgilerini izler, Uzun/Kısa pozisyon aracı pozisyon büyüklüğünü hesaplar.

Kendi seviyelerinizi kullanabildiğiniz Fibonacci ve Gann araçları, Elliott dalgaları, harmonik formasyonlar, notlar ve fırçalar. Bir çizime çift tıklamak ayarlarını, sağ tıklamak menüsünü açar; alarmlar trend çizgilerini izler, Uzun/Kısa pozisyon aracı pozisyon büyüklüğünü hesaplar.

Canlı grafiği başlatmak için buraya kaydırın

Süreyi ölçmek için sembolü veya zaman dilimini değiştirin

Bunu deneyin

Fibonacci düzeltmesine çift tıklayın ve seviyelerini düzenleyin
Bir çizime sağ tıklayın: bir öne getirin, gruplayın ya da alarm ekleyin
Fırçayı ya da yol aracını seçin; Enter bir yolu bitirir

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')

Grafik türleri

Her grafik türü, sayfada canlı

Her kutu gerçek bir Chart örneğidir, resim değil. Kaydırmak için sürükleyin, yakınlaştırmak için tekerleği çevirin, artı imleç için üzerine gelin; her kutu kendi başına yanıt verir.

Mum OHLC

Heikin-Ashi Trend

Alan Kapanış

Taban çizgisi Üstü / altı

OHLC barları Klasik

Basamaklı çizgi Kesikli

Kaputun altında

Ölçülmüş, belgelenmiş, genişletmeye açık

Özellik Laboratuvarı’nın arkasındaki motor. Aşağıdaki her rakam pnpm bench ile yeniden üretilebilir.

Kare bütçesi

0.001ms: 100k barda 4 göstergeyle canlı tick
27ms: sembol değişiminden sonra tam yeniden hesaplama, 100k bar
0.32ms: LTTB ile örnek azaltma, 100k → 1600 nokta
<0.3ms: üzerine gelme karesi, 500’den 100k bara kadar sabit

Üst üste iki canvas: üzerine gelindiğinde yalnızca ince üst katman yeniden çizilir. Her çizici yalnızca ekrandaki barları dolaşır.

Hareketler

Sürükle: kaydır, son barın ötesine de
Kaydırma: imleç etrafında yakınlaştır
İki parmakla sıkıştır: dokunmatik ekranda yakınlaştır
Sağa sürükle: ilerledikçe eski barlar yüklenir
Ekseni sürükle: ekseni ölçekle
Ctrl + sürükle: çizimleri seç
Shift + sürükle: ölç
Alt + tıkla: bilgi kutusunu sabitle

WidgetTek çağrıyla eksiksiz alım satım arayüzü: ChartWidget; araç çubuğunu, çizim kenar çubuğunu, izleme listesini, alarmları, nesne ağacını, veri penceresini, tekrarı ve komut paletini (Ctrl+K) İngilizce ve Vietnamca’dan Çince, Japonca, Korece ve Arapça’ya kadar 16 dilde sunar.
VeriHer türlü piyasa akışı: Binance, Coinbase, Bybit ve Kraken adaptörleri yerleşik; diğer her şey için WebSocketAdapter ve PollingAdapter. Geriye kaydırdıkça eski barlar yüklenir; bağlantı kendiliğinden yeniden kurulur ve geçersiz kalan sembol değişimleri atlanır.
Alım satımGrafik üzerinde emirler: Demo broker içeren ExecutionAdapter, sürükleyerek emir oluşturma, braket emirleri, sürüklenebilir zarar durdur ve kâr al çizgileri, webhook’lara giden alarmlar ve masaüstü bildirimleri.
Framework’lerReact, Vue ve Svelte: @tradecanvas/react, /vue ve /svelte aynı motoru reaktif, tipli prop’larla sarar. Tam Chart örneği her zaman tek bir ref uzağınızda.
EklentilerHer katmanı genişletin: Artımlı update() destekli özel göstergeleri, çizim araçlarını, grafik türlerini ve katmanları global olarak ya da grafik bazında kaydedin.
AnalitikGrafiğin yanında geriye dönük testler: Monte Carlo bantlarına sahip, bar bar ilerleyen bir Backtester ve ana iş parçacığını serbest bırakan bir Web Worker gösterge hattı.

Finans grafikleri

Mum grafiklerinin ötesinde

Portföyler ve KPI’lar için sparkline’lar, sermaye eğrileri, emir defteri derinliği, sektör ısı haritaları, şelale grafikleri ve kadranlar.

BTC $65,234

ETH $3,412

SOL $148.00

BNB $582.00

ADA $0.4500

DOT $7.23

Portföy performansı

Emir defteri derinliği

Kripto piyasası ısı haritası

K/Z dağılımı

Korku ve Açgözlülük Endeksi

Hızlı başlangıç

Aynı grafik, beş farklı yol

Eksiksiz widget, bir framework bileşeni ya da headless motor. Hepsi aynı çiziciyi paylaşır.

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,
})

Uygulamanıza bugün canlı bir grafik ekleyin.

Belgeleri okuyun GitHub’da yıldız verin