Apa yang dikerjakannya, dan seberapa cepat.
Semua yang ada di halaman ini tersedia di @tradecanvas/chart 1.31.0. Waktu frame diukur di Chrome pada laptop dengan grafis terintegrasi (Intel UHD); node scripts/bench-render.mjs di repositori menjalankan adegan yang sama di perangkat Anda.
Dalam angka
- jenis grafik
- 18
- indikator bawaan
- 111
- alat gambar
- 69
- bahasa widget
- 30
- kunci gaya
- 101
- sakelar fitur widget
- 112
- dependensi runtime pihak ketiga
- 0
- uji unit
- 3,000+
Waktu frame
Waktu untuk menggambar satu frame saat menggeser. 16,7 ms berarti 60 frame per detik.
| Grafik | Rasio piksel | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 candle + 4 indikator · 2× | 2 | 27,4 ms | 19,6 ms | |
| 1600×900, diperkecil hingga 200.000 bar + 4 indikator · 2× | 2 | 34,5 ms | 20,2 ms | |
| 1600×900, diperkecil hingga 1.000.000 bar + 4 indikator · 2× | 2 | 34,5 ms | 16,7 ms | |
| 1600×900, heatmap kedalaman, 240 snapshot × 80 level · 2× | 2 | 25,5 ms | 16,8 ms | |
| Enam grafik, masing-masing 500 candle dan 2 indikator · 2× | 2 | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 candle + 4 indikator · 1× | 1 | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 candle + 4 indikator · 1,5× | 1,5 | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 candle + 4 indikator · 2× | 2 | 114,5 ms | 29,1 ms |
Canvas 2D adalah bawaannya. renderer: 'webgl' (atau 'auto') menggambar area plot dengan WebGL 2 dan kembali ke Canvas 2D bila WebGL 2 tidak tersedia atau konteksnya hilang.
Jalur data
- Tick langsung dengan Bollinger Bands, EMA, RSI, dan MACD pada 100.000 bar
- ~0,001 ms
- Empat indikator yang sama dihitung ulang penuh pada 100.000 bar
- ~27 ms
- Garis berisi 1.000.000 titik yang terlihat, di-downsample untuk satu frame
- ~2,6 ms
- Gambar ulang saat hover (crosshair, legenda)
- ~0,2 ms
- Pergantian simbol atau kerangka waktu baru menampilkan tirai pemuatan setelah
- 200 ms
Ukuran unduhan
Diminifikasi dan di-gzip, beserta semua yang diimpornya.
- Chart, API headless
- 176 KB
- ChartWidget, antarmuka lengkap
- 315 KB
- Perender WebGL, dimuat saat pertama dipakai
- 18 KB
Cara pemeriksaannya
- Lebih dari 3.000 uji unit di tujuh paket berjalan di CI pada setiap pull request.
- Perender WebGL menggambar candle pada piksel perangkat yang sama dengan Canvas 2D; garis dan isian hanya berbeda pada beberapa piksel tepi yang di-antialias.
- Perender WebGL telah diperiksa di Chromium, Firefox, dan WebKit. Tanpa WebGL 2, atau saat konteksnya hilang, grafik tetap berjalan dengan Canvas 2D.
- Contoh kode di dokumentasi dan di skill agen diperiksa tipenya terhadap API yang sebenarnya.
- Grafik dapat dibacakan oleh pembaca layar dan dioperasikan dengan keyboard; widget berjalan dari kanan ke kiri dalam bahasa Arab, Ibrani, dan Persia.
Kemampuan
Saring berdasarkan area, atau cari berdasarkan nama atau API.
| Kemampuan | Area | Detail dan API |
|---|---|---|
| Candle, bar OHLC, garis, area, baseline, Heikin-Ashi, candle berongga | Jenis grafik | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, line break, Kagi, point & figure, range bar | Jenis grafik | Ukuran kotak atau ATR, jumlah garis untuk break, pembalikan dalam persen atau harga, rentang per bar |
| Candle volume, Equivolume, area HLC, garis tangga, garis dengan penanda, high-low | Jenis grafik | Total 18 jenis grafik |
| Seri utama disembunyikan | Jenis grafik | Hanya indikator dan gambar yang tetap tampil |
| Grafik untuk dasbor | Jenis grafik | Batang (berkelompok, bertumpuk, mendatar), donat dan pai, sebar dan gelembung, histogram, kalender, matriks korelasi, peta per sektor, kurva berlawanan jarum jam, sparkline, meteran, peta panas dan treemap, air terjun, kedalaman, kurva ekuitas |
| Canvas 2D atau WebGL 2 | Rendering | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, event rendererChange |
| Satu rentang per kolom piksel saat diperkecil | Rendering | Garis, band, dan histogram indikator di bawah satu piksel per bar |
| Sejuta bar digeser dengan mulus | Rendering | Dengan empat indikator, pada rasio piksel 2 |
| Heatmap kedalaman, profil volume, dan market profile di GPU | Rendering | pushDepthSnapshot(book, time) |
| Beberapa grafik WebGL dalam satu halaman | Rendering | Hingga 8 (setMaxWebGLCharts); sisanya digambar dengan Canvas 2D; kembali ke WebGL saat konteksnya pulih |
| Tajam di skala layar mana pun | Rendering | Candle, volume, dan gambar tepat di piksel perangkat pada 100%, 125%, dan 200% |
| Tanpa dependensi runtime pihak ketiga | Rendering | Tidak ada lagi yang perlu dipasang atau diaudit |
| 134 indikator bawaan | Indikator | Pivot point dalam enam jenis, MA Cross, korelasi dengan simbol lain |
| Sumber harga | Indikator | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Indikator di atas indikator | Indikator | Misalnya rata-rata bergerak dari RSI, diperbarui di setiap tick |
| Beberapa indikator dalam satu panel, dipindahkan antarpanel | Indikator | moveIndicatorToPane |
| Beberapa indikator yang sama | Indikator | EMA 20 dan EMA 50 berdampingan |
| Level dan ambang | Indikator | RSI 30/70, CCI ±100, disimpan bersama tata letak |
| Nilai terakhir di sumbu | Indikator | Di sumbu harga dan sumbu tiap panel, dengan warna garisnya |
| Panel diciutkan, dimaksimalkan, dan diurutkan ulang | Indikator | Disimpan bersama tata letak |
| Templat indikator | Indikator | Input, gaya, level, dan panel disimpan dan diterapkan bersama |
| Gaya dan visibilitas setiap garis | Indikator | Garis yang tersembunyi tidak meregangkan skala; setIndicatorDefaults |
| Volume delta dan CVD | Indikator | Diperkirakan dari bar |
| Ekspor nilai indikator | Indikator | CSV atau JSON, satu kolom per garis |
| Pembaruan inkremental pada tick langsung | Indikator | update() hanya menghitung ulang bar yang sedang terbentuk |
| 69 alat gambar | Alat gambar | Garis, kanal, Fibonacci, Gann, pitchfork, gelombang Elliott, pola, siklus, proyeksi |
| Pengaturan khusus setiap alat | Alat gambar | Gaya, properti, dan koordinat pada kisi harga pasar |
| Posisi long dan short | Alat gambar | Risk:reward, kuantitas dari risiko dalam persen atau uang |
| Peringatan pada gambar | Alat gambar | Saat harga melintasi garis tren atau kanal sesuai gambarnya, termasuk pada skala log |
| Urutan, grup, dan templat | Alat gambar | Bawa ke depan, kirim ke belakang, kelompokkan, kunci, sembunyikan |
| Catatan, callout, panah, bendera, kuas, path, kurva | Alat gambar | Menggambar bebas dan multi-titik |
| Anchored VWAP dan profil volume rentang tetap | Alat gambar | Membaca bar grafik |
| Penghapus, kotak zoom, magnet kuat, pintasan keyboard | Alat gambar | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Lompat ke tanggal; rentang 1D hingga All | Skala dan waktu | Tanpa batas perkecil |
| Zona waktu IANA dengan waktu musim panas | Skala dan waktu | Atau zona waktu bursa itu sendiri |
| Kerangka waktu apa pun, dan bar tick | Skala dan waktu | 7m, 90m, 2d dibangun dari data yang disajikan feed; 100T dari transaksinya |
| Skala kiri dan kanan; log, terbalik, dan persen per panel | Skala dan waktu | Skala kiri untuk overlay atau salinan skala harga |
| Bandingkan simbol, spread, dan rasio | Skala dan waktu | Pada skala atau panelnya sendiri, dicocokkan menurut waktu |
| Jam perdagangan diperpanjang | Skala dan waktu | Dari jam sesi simbol |
| Format harga dan waktu | Skala dan waktu | priceFormat sebagai fungsi atau pecahan seperti 1/32; timeFormatter |
| Skala mengikuti desimal dan langkah harga simbol | Skala dan waktu | pricePrecision, minTick: saham yang bergerak per 10 tidak pernah menampilkan 21.705 |
| Garis tertinggi dan terendah, bid dan ask | Skala dan waktu | Bid dan ask dari tick feed |
| Tanda peristiwa di grafik | Skala dan waktu | signalMarkerHover, signalMarkerClick |
| Feed siap pakai dan feed Anda sendiri | Data dan realtime | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Riwayat lama dimuat saat menggulir ke kiri | Data dan realtime | fetchHistoryBefore |
| Pencarian simbol dengan detail | Data dan realtime | searchSymbols, resolveSymbol: desimal, langkah harga, sesi, zona waktu |
| Detail simbol yang diketahui setelah terhubung | Data dan realtime | Event symbolInfo dari adaptor |
| Tangga depth-of-market | Data dan realtime | Ukuran bid dan ask per harga; klik untuk trading |
| Kuotasi langsung untuk daftar pantauan | Data dan realtime | subscribeQuotes, setQuotes, getQuote |
| Berita dan status pasar | Data dan realtime | fetchNews; hitung mundur ke pembukaan atau penutupan |
| Aturan bursa | Data dan realtime | setMarket: fraksi harga per rentang harga, batas atas dan batas bawah harian, lot, sesi; HOSE, HNX, UPCoM, dan kontrak berjangka VN30 |
| Order dan posisi di grafik | Trading | Seret untuk mengubah; batalkan, tutup, dan balik dari garisnya |
| Tanda eksekusi | Trading | Alasan serta untung atau rugi di executionFill |
| Tiket order | Trading | Kuantitas, tipe, stop-loss dan take-profit, masa berlaku, diperiksa saat Anda mengetik; fraksi harga, batas atas, batas bawah, dan lot bursa |
| Panel akun | Trading | Posisi dengan untung dan rugi langsung, order aktif, eksekusi |
| Sinyal dan zona trading | Trading | Kunci gaya markers.*, tradeZones.* |
| Backtesting dan metrik risiko | Trading | @tradecanvas/analytics: komisi, slippage, Sharpe, Sortino, Calmar, drawdown |
| Peringatan lebih dari sekadar level harga | Peringatan dan replay | Garis memotong garis, pergerakan N% dalam N bar, saat bar tutup, dengan masa berlaku |
| Replay bar dengan langkah lebih halus | Peringatan dan replay | Kerangka waktu besar diputar ulang dari bar yang lebih kecil |
| Paper trading saat replay | Peringatan dan replay | Order terisi pada harga yang diputar ulang |
| Replay di seluruh grid grafik | Peringatan dan replay | Semua grafik tetap selaras |
| Replay untuk aplikasi | Peringatan dan replay | startTime, hideHistory, duration, tanda yang muncul seiring pemutaran, replayComplete |
| Grid widget yang tersinkron | Ruang kerja | Hingga 6, berbagi simbol, kerangka waktu, crosshair, waktu, dan gambar |
| Tata letak bernama di penyimpanan Anda sendiri | Ruang kerja | Simpan, buka, ganti nama, simpan otomatis; LayoutStorage untuk server |
| Undo dan redo untuk semuanya | Ruang kerja | Gambar, indikator, pengaturan, dan jenis grafik; recordUndo |
| Menu konteks per area | Ruang kerja | Gambar, area plot, panel, sumbu harga, sumbu waktu |
| Daftar pantauan | Ruang kerja | Beberapa daftar, diurutkan dengan menyeret |
| Event untuk aplikasi host | Ruang kerja | symbolChange, timeframeChange, ordersChange, executionFill, styleChange, dan lainnya |
| Tiga tampilan widget | Kustomisasi | Studio, Terminal, Capsule; ui dan setUI; variabel CSS --tcw-* |
| Tampilan grafik per kunci | Kustomisasi | applyOverrides atas 101 kunci bertipe, pada lapisan host dan lapisan pengguna |
| Pengaturan yang menjangkau setiap kunci | Kustomisasi | Tab gaya untuk jenis grafik yang sedang tampil, tab trading |
| 112 sakelar fitur | Kustomisasi | features, setFeatures, isFeatureOn; dapat diubah saat berjalan |
| Komponen Anda sendiri di widget | Kustomisasi | Tombol dan dropdown bilah alat, tombol panel samping, item status, slot, item menu |
| Pintasan Anda sendiri | Kustomisasi | addHotkey sesuai tata letak keyboard |
| Widget dalam 30 bahasa | Bahasa dan aksesibilitas | Arab, Ibrani, dan Persia dari kanan ke kiri |
| Pembaca layar dan keyboard | Bahasa dan aksesibilitas | Ringkasan grafik, bar dibacakan satu per satu, dialog lewat keyboard |
| Dokumentasi dalam enam bahasa, situs ini dalam empat belas | Bahasa dan aksesibilitas | English, Tiếng Việt, 简体中文, 日本語, 한국어, Español |
| Komponen React, Vue, dan Svelte | Pengembang | Props reaktif: overrides, indicators, features |
| Plugin | Pengembang | Indikator, alat gambar, jenis grafik, dan overlay; overlayScale dan getPriceStep untuk menggambar di kisi harga |
| Dokumentasi untuk agen coding | Pengembang | llms.txt, llms-full.txt, dan skill agen |
Batasan yang diketahui
- Canvas 2D tetap menjadi perender bawaan sampai WebGL dicoba di lebih banyak perangkat; frame rate WebGL di Safari dan di layar 5K belum diukur.
- Pada rasio piksel 2 di grafik 2560×1400, compositing browser saja memakan sekitar 23 ms pada grafis terintegrasi, sehingga frame WebGL di sana rata-rata 29 ms.
- Kerangka waktu tick dibangun dari transaksi terbaru yang dikembalikan feed; riwayat tick yang lebih lama tidak bisa dimuat.
- Volume delta dan CVD diperkirakan dari bar, bukan dari sisi setiap transaksi.
- Paling banyak 8 grafik dalam satu halaman yang menggambar dengan WebGL sekaligus; sisanya menggambar dengan Canvas 2D.