1.000.000 bar: önce Canvas 2D, sonra WebGL
Bollinger Bantları, EMA, RSI ve MACD ile bir milyon bir dakikalık mum, sonuna kadar uzaklaştırılıp 150 kare boyunca kaydırılır; önce Canvas 2D ile, sonra WebGL 2 ile çizilir.
Sistem denetimi
Ne yaptığı ve bunu ne kadar hızlı yaptığı.
Bu sayfadaki her şey @tradecanvas/chart 1.30.0 ile gelir. Kare süreleri, tümleşik grafikli (Intel UHD) bir dizüstü bilgisayarda Chrome’da ölçüldü; depodaki node scripts/bench-render.mjs aynı sahneleri sizin bilgisayarınızda çalıştırır.
Rakamlarla
- 18
- grafik türü
- 134
- yerleşik gösterge
- 69
- çizim aracı
- 30
- widget dili
- 101
- stil anahtarı
- 114
- açılıp kapatılabilen widget özelliği
- 0
- üçüncü taraf çalışma zamanı bağımlılığı
- 3.000+
- birim testi
Kendi bilgisayarınızda ölçün
Yukarıdaki rakamlar bizim dizüstü bilgisayarımızdan geliyor. Bunlar aynı sahneleri, yayına alacağınız kütüphaneyle tarayıcınızda çalıştırır. Hiçbir şey önceden kaydedilmedi.
100.000 barda canlı tick’ler
Dört göstergeli 100.000 barlık bir grafikte her kareye yirmi tick düşer. Her gösterge seriyi yeniden hesaplamak yerine son bardan güncellenir.
1.000 sembollü bir fiyat ekranı
Saniyede 50 kez güncellenen 1.000 sembollü bo-grid. Değişen her hücre yanıp söner ve yalnızca o hücreler yeniden çizilir.
WebGL 2, altında Canvas 2D ile
renderer: 'webgl'grafik alanını GPU’da çizer: mumlar, hacim, gösterge çizgileri ve dolguları, derinlik ısı haritası. Metin, üstündeki bir Canvas 2D katmanında kalır.'auto', WebGL 2’nin bulunduğu her yerde WebGL’i seçer.- WebGL 2 yoksa ya da bağlamı kaybolursa aynı grafik Canvas 2D ile devam eder. Kodunuzda hiçbir şey değişmez.
- Bir sayfada aynı anda en fazla 8 grafik WebGL ile çizer (
setMaxWebGLCharts); diğerleri Canvas 2D ile çizer ve bir bağlam boşaldığında WebGL’e döner. - Mumlar her iki oluşturucuda da aynı cihaz piksellerine düşer, bu yüzden grafik hangisi çizerse çizsin aynı görünür.
Kare süresi
Kaydırırken bir kareyi çizme süresi. 16,7 ms, saniyede 60 kare demektir.
| Grafik | Piksel oranı | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 mum + 4 gösterge | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, 200.000 bar uzaklaştırılmış + 4 gösterge | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, 1.000.000 bar uzaklaştırılmış + 4 gösterge | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, derinlik ısı haritası, 240 anlık görüntü × 80 seviye | 2× | 25,5 ms | 16,8 ms | |
| Altı grafik, her birinde 500 mum ve 2 gösterge | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 mum + 4 gösterge | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 mum + 4 gösterge | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 mum + 4 gösterge | 2× | 114,5 ms | 29,1 ms |
Varsayılan Canvas 2D’dir. renderer: 'webgl' (veya 'auto') grafik alanını WebGL 2 ile çizer; WebGL 2 yoksa ya da bağlamı kaybolursa Canvas 2D’ye geri döner.
Veri yolu
- 100.000 barda Bollinger Bantları, EMA, RSI ve MACD ile canlı tick
- ~0,001 ms
- Aynı dört göstergenin 100.000 barda baştan hesaplanması
- ~27 ms
- 1.000.000 görünür noktalı bir çizgi, tek kare için örneği azaltılmış
- ~2,6 ms
- Üzerine gelince yeniden çizim (artı imleç, açıklama)
- ~0,2 ms
- Sembol veya zaman dilimi değişince yükleme perdesi ancak şu süreden sonra görünür:
- 200 ms
İndirme boyutu
Küçültülmüş ve gzip ile sıkıştırılmış, içe aktardığı her şeyle birlikte.
- Chart, headless API
- 176 KB
- ChartWidget, eksiksiz arayüz
- 315 KB
- WebGL oluşturucu, ilk kullanımda yüklenir
- 18 KB
Nasıl denetleniyor
- Yedi paketteki 3.000’den fazla birim testi her pull request’te CI’da çalışır.
- WebGL oluşturucu mumları Canvas 2D ile aynı cihaz piksellerine çizer; çizgiler ve dolgular yalnızca kenar yumuşatmalı birkaç kenar pikselinde farklılık gösterir.
- WebGL oluşturucu; Chromium, Firefox ve WebKit’te denetlendi. WebGL 2 yoksa ya da bağlamı kaybolursa grafik Canvas 2D ile devam eder.
- Belgelerdeki ve ajan becerisindeki kod örnekleri gerçek API’ye karşı tür denetiminden geçirilir.
- Grafikler ekran okuyucularla okunabilir ve klavyeyle kullanılabilir; widget Arapça, İbranice ve Farsçada sağdan sola akar.
Yetenekler
Alana göre filtreleyin ya da ada veya API’ye göre arayın.
80 / 80
| Yetenek | Alan | Ayrıntılar ve API |
|---|---|---|
| Mumlar, OHLC barları, çizgi, alan, taban çizgisi, Heikin-Ashi, içi boş mumlar | Grafik türleri | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, çizgi kırılımı, Kagi, nokta ve şekil, aralık barları | Grafik türleri | Kutu boyutu veya ATR, kırılım için çizgi sayısı, yüzde ya da fiyat olarak dönüş, bar başına aralık |
| Hacim mumları, Equivolume, HLC alanı, basamaklı çizgi, işaretçili çizgi, yüksek-düşük | Grafik türleri | Toplam 18 grafik türü |
| Ana seri gizli | Grafik türleri | Yalnızca göstergeler ve çizimler kalır |
| Gösterge panoları için grafikler | Grafik türleri | Çubuklar (gruplu, yığılmış, yatay), halka ve pasta, dağılım ve kabarcık, histogramlar, takvimler, korelasyon matrisleri, sektör haritaları, saat yönünün tersi eğriler, sparkline’lar, kadranlar, ısı haritaları ve ağaç haritaları, şelaleler, derinlik, sermaye eğrileri |
| Canvas 2D veya WebGL 2 | Oluşturma | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, rendererChange olayı |
| Uzaklaştırıldığında piksel sütunu başına tek aralık | Oluşturma | Bar başına bir pikselin altında gösterge çizgileri, bantları ve histogramları |
| Bir milyon bar akıcı biçimde kaydırılır | Oluşturma | Dört göstergeyle, 2 piksel oranında |
| GPU’da derinlik ısı haritası, hacim profili ve piyasa profili | Oluşturma | pushDepthSnapshot(book, time) |
| Bir sayfada birden çok WebGL grafiği | Oluşturma | En fazla 8 (setMaxWebGLCharts); geri kalanı Canvas 2D ile çizer; bağlam geri geldiğinde WebGL’e döner |
| Her ekran ölçeğinde keskin | Oluşturma | Mumlar, hacim ve çizimler %100, %125 ve %200’de cihaz piksellerine oturur |
| Üçüncü taraf çalışma zamanı bağımlılığı yok | Oluşturma | Kurulacak ya da denetlenecek başka bir şey yok |
| 134 yerleşik gösterge | Göstergeler | Altı türde pivot noktaları, MA Cross, başka bir sembolle korelasyon |
| Fiyat kaynağı | Göstergeler | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Gösterge üzerinde gösterge | Göstergeler | Örneğin RSI’ın hareketli ortalaması, her tick’te güncellenir |
| Tek panelde birden çok gösterge, paneller arasında taşıma | Göstergeler | moveIndicatorToPane |
| Aynı göstergeden birden fazla | Göstergeler | Yan yana EMA 20 ve EMA 50 |
| Seviyeler ve eşikler | Göstergeler | RSI 30/70, CCI ±100, düzenle birlikte kaydedilir |
| Eksende son değer | Göstergeler | Fiyat ekseninde ve her panelin ekseninde, çizginin renginde |
| Paneller daraltılır, büyütülür ve yeniden sıralanır | Göstergeler | Düzenle birlikte kaydedilir |
| Gösterge şablonları | Göstergeler | Girdiler, stil, seviyeler ve panel birlikte kaydedilip uygulanır |
| Her çizginin stili ve görünürlüğü | Göstergeler | Gizli bir çizgi ölçeği genişletmez; setIndicatorDefaults |
| Hacim deltası ve CVD | Göstergeler | Barlardan tahmin edilir |
| Gösterge değerlerini dışa aktarma | Göstergeler | CSV veya JSON, çizgi başına bir sütun |
| Canlı tick’lerde artımlı güncellemeler | Göstergeler | update() yalnızca oluşmakta olan barı yeniden hesaplar |
| 69 çizim aracı | Çizim araçları | Çizgiler, kanallar, Fibonacci, Gann, pitchfork’lar, Elliott dalgaları, formasyonlar, döngüler, projeksiyonlar |
| Her aracın kendi ayarları | Çizim araçları | Stil, özellikler ve piyasanın fiyat ızgarasında koordinatlar |
| Uzun ve kısa pozisyonlar | Çizim araçları | Risk:ödül, yüzde ya da para cinsinden riske göre miktar |
| Çizim üzerinde alarmlar | Çizim araçları | Fiyat bir trend çizgisini veya kanalı çizildiği hâliyle kestiğinde, logaritmik ölçek dahil |
| Sıralama, gruplar ve şablonlar | Çizim araçları | Öne getir, arkaya gönder, grupla, kilitle, gizle |
| Notlar, belirtme balonları, oklar, bayraklar, fırça, yol, eğri | Çizim araçları | Serbest el ve çok noktalı çizim |
| Anchored VWAP ve sabit aralıklı hacim profili | Çizim araçları | Grafiğin barlarını okur |
| Silgi, kutuyla yakınlaştırma, güçlü mıknatıs, klavye kısayolları | Çizim araçları | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Bir tarihe gitme; 1D’den All’a aralıklar | Ölçekler ve zaman | Uzaklaştırma sınırı yok |
| Yaz saati uygulamasıyla IANA saat dilimleri | Ölçekler ve zaman | Ya da borsanın kendi saat dilimi |
| Her zaman dilimi ve tick barları | Ölçekler ve zaman | 7m, 90m, 2d akışın sunduklarından, 100T ise işlemlerinden oluşturulur |
| Sol ve sağ ölçekler; panel başına logaritmik, ters ve yüzde | Ölçekler ve zaman | Bir katman ya da fiyat ölçeğinin kopyası için sol ölçek |
| Sembol karşılaştırma, spread ve oran | Ölçekler ve zaman | Kendi ölçeğinde ya da panelinde, zamana göre eşleştirilir |
| Uzatılmış işlem saatleri | Ölçekler ve zaman | Sembolün seans saatlerinden |
| Fiyat ve zaman biçimleri | Ölçekler ve zaman | Fonksiyon olarak priceFormat ya da 1/32 gibi kesirler; timeFormatter |
| Sembolün ondalıklarında ve fiyat adımında ölçek | Ölçekler ve zaman | pricePrecision, minTick: 10’ar 10’ar hareket eden bir hisse asla 21.705 göstermez |
| Yüksek ve düşük çizgileri, bid ve ask | Ölçekler ve zaman | Bid ve ask, akışın tick’lerinden |
| Grafikte olay işaretleri | Ölçekler ve zaman | signalMarkerHover, signalMarkerClick |
| Hazır akışlar ve kendi akışınız | Veri ve gerçek zaman | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Sola kaydırırken eski geçmiş yüklenir | Veri ve gerçek zaman | fetchHistoryBefore |
| Ayrıntılı sembol arama | Veri ve gerçek zaman | searchSymbols, resolveSymbol: ondalıklar, fiyat adımı, seanslar, saat dilimi |
| Bağlandıktan sonra öğrenilen sembol bilgileri | Veri ve gerçek zaman | Adaptörün symbolInfo olayı |
| Piyasa derinliği merdiveni | Veri ve gerçek zaman | Fiyata göre bid ve ask miktarı; işlem için tıklayın |
| İzleme listeleri için canlı kotasyonlar | Veri ve gerçek zaman | subscribeQuotes, setQuotes, getQuote |
| Haberler ve piyasa durumu | Veri ve gerçek zaman | fetchNews; açılışa veya kapanışa geri sayım |
| Borsa kuralları | Veri ve gerçek zaman | setMarket: fiyat aralığına göre fiyat adımları, günlük tavan ve taban, lotlar, seanslar; HOSE, HNX, UPCoM ve VN30 vadeli işlemleri |
| Grafikte emirler ve pozisyonlar | Alım satım | Değiştirmek için sürükleyin; çizgiden iptal edin, kapatın, ters çevirin |
| Gerçekleşme işaretleri | Alım satım | executionFill içinde neden ve kâr ya da zarar |
| Emir formu | Alım satım | Miktar, tür, zarar durdur ve kâr al, geçerlilik süresi, yazarken denetlenir; borsanın fiyat adımı, tavan, taban ve lotları |
| Hesap paneli | Alım satım | Canlı kâr-zararıyla pozisyonlar, bekleyen emirler, gerçekleşmeler |
| Sinyaller ve işlem bölgeleri | Alım satım | markers.*, tradeZones.* stil anahtarları |
| Backtest ve risk metrikleri | Alım satım | @tradecanvas/analytics: komisyon, kayma, Sharpe, Sortino, Calmar, düşüş |
| Fiyat seviyesinin ötesinde alarmlar | Alarmlar ve replay | Çizginin çizgiyi kesmesi, N barda %N hareket, bar kapanışında, süre sonu ile |
| Daha ince adımlarla bar replay | Alarmlar ve replay | Büyük bir zaman dilimi küçük barlardan yeniden oynatılır |
| Replay üzerinde kâğıt işlem | Alarmlar ve replay | Emirler yeniden oynatılan fiyatlardan gerçekleşir |
| Grafik ızgarası boyunca replay | Alarmlar ve replay | Tüm grafikler eşzamanlı ilerler |
| Uygulamalar için replay | Alarmlar ve replay | startTime, hideHistory, duration, oynadıkça beliren işaretler, replayComplete |
| Eşzamanlı widget ızgarası | Çalışma alanı | En fazla 6; sembol, zaman dilimi, artı imleç, zaman ve çizimler paylaşılır |
| Kendi depolamanızda adlandırılmış düzenler | Çalışma alanı | Kaydet, aç, yeniden adlandır, otomatik kaydet; sunucu için LayoutStorage |
| Her şey için geri al ve yinele | Çalışma alanı | Çizimler, göstergeler, ayarlar ve grafik türü; recordUndo |
| Alana göre bağlam menüleri | Çalışma alanı | Çizimler, grafik alanı, paneller, fiyat ekseni, zaman ekseni |
| İzleme listeleri | Çalışma alanı | Birden çok liste, sürükleyerek sıralanır |
| Ana uygulama için olaylar | Çalışma alanı | symbolChange, timeframeChange, ordersChange, executionFill, styleChange ve daha fazlası |
| Widget için üç görünüm | Özelleştirme | Studio, Terminal, Capsule; ui ve setUI; --tcw-* CSS değişkenleri |
| Anahtar anahtar grafik görünümü | Özelleştirme | Ana uygulama katmanı ve kullanıcı katmanında, 101 tipli anahtar üzerinde applyOverrides |
| Her anahtara ulaşan ayarlar | Özelleştirme | Görüntülenen grafik türü için stil sekmesi, alım satım sekmesi |
| Açılıp kapatılabilen 112 özellik | Özelleştirme | features, setFeatures, isFeatureOn; çalışırken değiştirilebilir |
| Widget’ta kendi parçalarınız | Özelleştirme | Araç çubuğu düğmeleri ve açılır menüler, kenar çubuğu düğmeleri, durum öğeleri, yuvalar, menü öğeleri |
| Kendi kısayollarınız | Özelleştirme | Klavye düzenine göre addHotkey |
| Widget 30 dilde | Diller ve erişilebilirlik | Arapça, İbranice ve Farsça sağdan sola |
| Ekran okuyucular ve klavye | Diller ve erişilebilirlik | Grafik özeti, barlar tek tek okunur, iletişim kutuları klavyeyle |
| Bu site 14 dilde, belgeleri altı dilde | Diller ve erişilebilirlik | English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย |
| React, Vue ve Svelte bileşenleri | Geliştiriciler | Reaktif prop’lar: overrides, indicators, features |
| Eklentiler | Geliştiriciler | Göstergeler, çizim araçları, grafik türleri ve katmanlar; fiyat ızgarasına çizmek için overlayScale ve getPriceStep |
| Kodlama ajanları için belgeler | Geliştiriciler | llms.txt, llms-full.txt ve bir ajan becerisi |
Bilinen sınırlar
- WebGL daha fazla cihazda denenene kadar varsayılan oluşturucu Canvas 2D olarak kalır; WebGL’in Safari’de ve 5K ekranlardaki kare hızı henüz ölçülmedi.
- 2560×1400 bir grafikte 2 piksel oranında, tümleşik grafik biriminde tarayıcının yalnızca birleştirme işi yaklaşık 23 ms sürer; bu yüzden orada WebGL kareleri ortalama 29 ms’dir.
- Tick zaman dilimleri, akışın döndürdüğü son işlemlerden oluşturulur; daha eski tick geçmişi yüklenemez.
- Hacim deltası ve CVD, her işlemin yönünden değil barlardan tahmin edilir.
- Bir sayfada aynı anda en fazla 8 grafik WebGL ile çizer; diğerleri Canvas 2D ile çizer.
TradeCanvas ile bir alım satım ekranı mı geliştiriyorsunuz?
Bunu duymak isteriz.