1.000.000 Kerzen: Canvas 2D, dann WebGL
Eine Million 1-Minuten-Kerzen mit Bollinger-Bändern, EMA, RSI und MACD, ganz herausgezoomt und 150 Bilder lang verschoben, zuerst mit Canvas 2D und dann mit WebGL 2 gezeichnet.
Systemaudit
Was es kann – und wie schnell.
Alles auf dieser Seite steckt in @tradecanvas/chart 1.30.0. Die Bildzeiten wurden in Chrome auf einem Laptop mit integrierter Grafik (Intel UHD) gemessen; node scripts/bench-render.mjs im Repository spielt dieselben Szenen auf Ihrem Rechner ab.
In Zahlen
- 18
- Charttypen
- 134
- eingebaute Indikatoren
- 69
- Zeichenwerkzeuge
- 30
- Widget-Sprachen
- 101
- Style-Schlüssel
- 114
- Feature-Schalter des Widgets
- 0
- Laufzeitabhängigkeiten von Drittanbietern
- 3.000+
- Unit-Tests
Auf Ihrem Rechner messen
Die Zahlen oben stammen von unserem Laptop. Diese Tests spielen dieselben Szenen in Ihrem Browser ab, mit der Bibliothek, die Sie ausliefern würden. Nichts ist vorab aufgezeichnet.
Live-Ticks auf 100.000 Kerzen
In jedem Bild treffen zwanzig Ticks auf einem Chart mit 100.000 Kerzen und vier Indikatoren ein. Jeder Indikator rechnet ab der letzten Kerze weiter, statt die Serie neu zu berechnen.
Eine Kurstafel mit 1.000 Symbolen
bo-grid mit 1.000 Symbolen, 50-mal pro Sekunde aktualisiert. Jede geänderte Zelle blinkt, und nur diese Zellen werden neu gezeichnet.
WebGL 2, mit Canvas 2D darunter
renderer: 'webgl'zeichnet den Chartbereich auf der GPU: Kerzen, Volumen, Indikatorlinien und -flächen, die Tiefen-Heatmap. Text bleibt auf einer Canvas-2D-Ebene darüber.'auto'wählt WebGL überall dort, wo WebGL 2 verfügbar ist.- Wo WebGL 2 fehlt oder sein Kontext verloren geht, zeichnet derselbe Chart mit Canvas 2D weiter. An Ihrem Code ändert sich nichts.
- Bis zu 8 Charts pro Seite zeichnen gleichzeitig mit WebGL (
setMaxWebGLCharts); die übrigen zeichnen mit Canvas 2D und wechseln zurück zu WebGL, sobald ein Kontext frei wird. - Kerzen landen in beiden Renderern auf denselben Gerätepixeln, daher sieht ein Chart gleich aus, egal welcher ihn zeichnet.
Bildzeit
Die Zeit für ein Bild beim Verschieben. 16,7 ms entsprechen 60 Bildern pro Sekunde.
| Chart | Pixelverhältnis | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 Kerzen + 4 Indikatoren | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, herausgezoomt auf 200.000 Kerzen + 4 Indikatoren | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, herausgezoomt auf 1.000.000 Kerzen + 4 Indikatoren | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, Tiefen-Heatmap, 240 Schnappschüsse × 80 Stufen | 2× | 25,5 ms | 16,8 ms | |
| Sechs Charts mit je 500 Kerzen und 2 Indikatoren | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 Kerzen + 4 Indikatoren | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 Kerzen + 4 Indikatoren | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 Kerzen + 4 Indikatoren | 2× | 114,5 ms | 29,1 ms |
Canvas 2D ist der Standard. renderer: 'webgl' (oder 'auto') zeichnet den Chartbereich mit WebGL 2 und fällt auf Canvas 2D zurück, wo WebGL 2 fehlt oder sein Kontext verloren geht.
Datenpfad
- Ein Live-Tick mit Bollinger-Bändern, EMA, RSI und MACD auf 100.000 Kerzen
- ~0,001 ms
- Dieselben vier Indikatoren vollständig neu berechnet auf 100.000 Kerzen
- ~27 ms
- Eine Linie mit 1.000.000 sichtbaren Punkten, für ein Bild ausgedünnt
- ~2,6 ms
- Ein Neuzeichnen beim Überfahren (Fadenkreuz, Legende)
- ~0,2 ms
- Ein Symbol- oder Zeiteinheitenwechsel zeigt einen Ladeschleier erst nach
- 200 ms
Downloadgröße
Minifiziert und mit gzip komprimiert, inklusive allem, was importiert wird.
- Chart, die Headless-API
- 176 KB
- ChartWidget, die komplette Oberfläche
- 315 KB
- Der WebGL-Renderer, beim ersten Einsatz geladen
- 18 KB
Wie geprüft wird
- Mehr als 3.000 Unit-Tests in den sieben Paketen laufen bei jedem Pull Request in der CI.
- Der WebGL-Renderer zeichnet Kerzen auf dieselben Gerätepixel wie Canvas 2D; Linien und Flächen weichen nur an wenigen geglätteten Kantenpixeln ab.
- Der WebGL-Renderer wurde in Chromium, Firefox und WebKit geprüft. Ohne WebGL 2 oder wenn sein Kontext verloren geht, zeichnet der Chart mit Canvas 2D weiter.
- Die Codebeispiele in der Doku und im Agent-Skill werden gegen die echte API typgeprüft.
- Charts lassen sich per Screenreader vorlesen und mit der Tastatur bedienen; das Widget läuft auf Arabisch, Hebräisch und Persisch von rechts nach links.
Funktionen
Nach Bereich filtern oder nach Name oder API suchen.
80 von 80
| Funktion | Bereich | Details und API |
|---|---|---|
| Kerzen, OHLC-Balken, Linie, Fläche, Basislinie, Heikin-Ashi, hohle Kerzen | Charttypen | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, Line Break, Kagi, Point & Figure, Range-Balken | Charttypen | Boxgröße oder ATR, Linien bis zum Durchbruch, Umkehr in Prozent oder Preis, Spanne pro Balken |
| Volumenkerzen, Equivolume, HLC-Fläche, Stufenlinie, Linie mit Markern, Hoch-Tief | Charttypen | 18 Charttypen insgesamt |
| Hauptserie ausgeblendet | Charttypen | Nur Indikatoren und Zeichnungen bleiben |
| Charts für Dashboards | Charttypen | Balken (gruppiert, gestapelt, waagerecht), Donut- und Kreisdiagramme, Streu- und Blasendiagramme, Histogramme, Kalender, Korrelationsmatrizen, Sektorkarten, Gegenuhrzeigerkurven, Sparklines, Tachos, Heatmaps und Treemaps, Wasserfälle, Orderbuchtiefe, Equity-Kurven |
| Canvas 2D oder WebGL 2 | Rendering | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, das Event rendererChange |
| Ein Strich pro Pixelspalte beim Herauszoomen | Rendering | Indikatorlinien, Bänder und Histogramme unter einem Pixel pro Kerze |
| Eine Million Kerzen flüssig verschoben | Rendering | Mit vier Indikatoren, bei einem Pixelverhältnis von 2 |
| Tiefen-Heatmap, Volumenprofil und Marktprofil auf der GPU | Rendering | pushDepthSnapshot(book, time) |
| Mehrere WebGL-Charts auf einer Seite | Rendering | Bis zu 8 (setMaxWebGLCharts); die übrigen zeichnen mit Canvas 2D; zurück zu WebGL, sobald der Kontext wiederkommt |
| Scharf bei jeder Bildschirmskalierung | Rendering | Kerzen, Volumen und Zeichnungen auf Gerätepixeln bei 100 %, 125 % und 200 % |
| Keine Laufzeitabhängigkeiten von Drittanbietern | Rendering | Nichts weiter zu installieren oder zu prüfen |
| 134 eingebaute Indikatoren | Indikatoren | Pivot-Punkte in sechs Varianten, MA Cross, Korrelation mit einem anderen Symbol |
| Preisquelle | Indikatoren | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Ein Indikator auf einem Indikator | Indikatoren | Etwa ein gleitender Durchschnitt des RSI, bei jedem Tick aktualisiert |
| Mehrere Indikatoren in einem Bereich, zwischen Bereichen verschoben | Indikatoren | moveIndicatorToPane |
| Derselbe Indikator mehrfach | Indikatoren | EMA 20 und EMA 50 nebeneinander |
| Niveaus und Schwellen | Indikatoren | RSI 30/70, CCI ±100, mit dem Layout gespeichert |
| Letzter Wert an der Achse | Indikatoren | An der Preisachse und der Achse jedes Bereichs, in der Farbe der Linie |
| Bereiche eingeklappt, maximiert und umsortiert | Indikatoren | Mit dem Layout gespeichert |
| Indikatorvorlagen | Indikatoren | Eingaben, Stil, Niveaus und Bereich, zusammen gespeichert und angewendet |
| Stil und Sichtbarkeit jeder Linie | Indikatoren | Eine ausgeblendete Linie dehnt die Skala nicht; setIndicatorDefaults |
| Volumen-Delta und CVD | Indikatoren | Aus den Kerzen geschätzt |
| Export der Indikatorwerte | Indikatoren | CSV oder JSON, eine Spalte pro Linie |
| Inkrementelle Updates bei Live-Ticks | Indikatoren | update() berechnet nur die entstehende Kerze neu |
| 69 Zeichenwerkzeuge | Zeichenwerkzeuge | Linien, Kanäle, Fibonacci, Gann, Pitchforks, Elliott-Wellen, Muster, Zyklen, Projektionen |
| Eigene Einstellungen je Werkzeug | Zeichenwerkzeuge | Stil, Eigenschaften und Koordinaten auf dem Preisraster des Marktes |
| Long- und Short-Positionen | Zeichenwerkzeuge | Chance-Risiko-Verhältnis, Menge aus dem Risiko in Prozent oder Geld |
| Alarme an einer Zeichnung | Zeichenwerkzeuge | Wenn der Kurs eine Trendlinie oder einen Kanal so kreuzt, wie gezeichnet, auch bei logarithmischer Skala |
| Reihenfolge, Gruppen und Vorlagen | Zeichenwerkzeuge | Nach vorne, nach hinten, gruppieren, sperren, ausblenden |
| Notizen, Callouts, Pfeile, Flaggen, Pinsel, Pfad, Kurve | Zeichenwerkzeuge | Freihand- und Mehrpunktzeichnungen |
| Verankerter VWAP und Volumenprofil über einen festen Bereich | Zeichenwerkzeuge | Lesen die Kerzen des Charts |
| Radierer, Zoom-Rahmen, starker Magnet, Tastenkürzel | Zeichenwerkzeuge | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Zu einem Datum springen; Zeiträume von 1D bis Alle | Skalen und Zeit | Kein Limit beim Herauszoomen |
| IANA-Zeitzonen mit Sommerzeit | Skalen und Zeit | Oder die eigene Zeitzone der Börse |
| Jede Zeiteinheit und Tick-Kerzen | Skalen und Zeit | 7m, 90m, 2d aus dem gebaut, was der Feed liefert; 100T aus seinen Trades |
| Linke und rechte Skala; logarithmisch, invertiert und prozentual je Bereich | Skalen und Zeit | Die linke Skala für ein Overlay oder eine Kopie der Preisskala |
| Symbole vergleichen, Spread und Verhältnis | Skalen und Zeit | Auf eigener Skala oder in eigenem Bereich, zeitlich abgeglichen |
| Erweiterte Handelszeiten | Skalen und Zeit | Aus den Sitzungszeiten des Symbols |
| Preis- und Zeitformate | Skalen und Zeit | priceFormat als Funktion oder Brüche wie 1/32; timeFormatter |
| Die Skala in den Dezimalstellen und dem Preisschritt des Symbols | Skalen und Zeit | pricePrecision, minTick: Eine Aktie, die sich in Zehnerschritten bewegt, zeigt nie 21.705 |
| Hoch- und Tieflinien, Bid und Ask | Skalen und Zeit | Bid und Ask aus den Ticks des Feeds |
| Ereignismarken im Chart | Skalen und Zeit | signalMarkerHover, signalMarkerClick |
| Fertige Feeds und eigene | Daten und Echtzeit | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Ältere Historie beim Scrollen nach links nachgeladen | Daten und Echtzeit | fetchHistoryBefore |
| Symbolsuche mit Details | Daten und Echtzeit | searchSymbols, resolveSymbol: Dezimalstellen, Preisschritt, Sitzungen, Zeitzone |
| Symboldetails, die erst nach dem Verbinden bekannt werden | Daten und Echtzeit | Das Event symbolInfo des Adapters |
| Markttiefe-Leiter | Daten und Echtzeit | Bid- und Ask-Größe je Preis; Klick zum Handeln |
| Live-Kurse für Beobachtungslisten | Daten und Echtzeit | subscribeQuotes, setQuotes, getQuote |
| News und Marktstatus | Daten und Echtzeit | fetchNews; ein Countdown bis zur Eröffnung oder zum Handelsschluss |
| Börsenregeln | Daten und Echtzeit | setMarket: Tick-Größen nach Preisband, tägliche Ober- und Untergrenze, Lots, Handelssitzungen; HOSE, HNX, UPCoM und VN30-Futures |
| Orders und Positionen im Chart | Trading | Zum Ändern ziehen; über die Linie stornieren, schließen und umkehren |
| Ausführungsmarken | Trading | Grund und Gewinn oder Verlust in executionFill |
| Ordermaske | Trading | Menge, Typ, Stop-Loss und Take-Profit, Gültigkeit, schon beim Tippen geprüft; Tick-Größe, Ober- und Untergrenze und Lots der Börse |
| Kontopanel | Trading | Positionen mit Live-Gewinn und -Verlust, offene Orders, Ausführungen |
| Signale und Trade-Zonen | Trading | Style-Schlüssel markers.*, tradeZones.* |
| Backtesting und Risikokennzahlen | Trading | @tradecanvas/analytics: Kommission, Slippage, Sharpe, Sortino, Calmar, Drawdown |
| Alarme über ein Preisniveau hinaus | Alarme und Replay | Linie kreuzt Linie, eine Bewegung von N % in N Kerzen, bei Kerzenschluss, mit Ablaufdatum |
| Bar-Replay in feineren Schritten | Alarme und Replay | Eine größere Zeiteinheit, aus kleineren Kerzen abgespielt |
| Paper-Trading im Replay | Alarme und Replay | Orders werden zu den abgespielten Kursen ausgeführt |
| Replay über ein Raster von Charts | Alarme und Replay | Im Gleichschritt |
| Replay für Anwendungen | Alarme und Replay | startTime, hideHistory, duration, Marken, die beim Abspielen erscheinen, replayComplete |
| Ein Raster synchronisierter Widgets | Arbeitsbereich | Bis zu 6, mit gemeinsamem Symbol, Zeiteinheit, Fadenkreuz, Zeit und Zeichnungen |
| Benannte Layouts in Ihrem eigenen Speicher | Arbeitsbereich | Speichern, öffnen, umbenennen, automatisch speichern; LayoutStorage für einen Server |
| Rückgängig und Wiederholen für alles | Arbeitsbereich | Zeichnungen, Indikatoren, Einstellungen und Charttyp; recordUndo |
| Kontextmenüs je Bereich | Arbeitsbereich | Zeichnungen, Chartbereich, Panes, Preisachse, Zeitachse |
| Beobachtungslisten | Arbeitsbereich | Mehrere Listen, per Ziehen umsortiert |
| Events für die Host-Anwendung | Arbeitsbereich | symbolChange, timeframeChange, ordersChange, executionFill, styleChange und mehr |
| Drei Erscheinungsbilder für das Widget | Anpassung | Studio, Terminal, Capsule; ui und setUI; CSS-Variablen --tcw-* |
| Das Aussehen des Charts per Schlüssel | Anpassung | applyOverrides über 101 typisierte Schlüssel, auf einer Host- und einer Nutzerebene |
| Einstellungen, die jeden Schlüssel erreichen | Anpassung | Ein Stil-Tab für den gezeigten Charttyp, ein Trading-Tab |
| 112 Feature-Schalter | Anpassung | features, setFeatures, isFeatureOn; im laufenden Betrieb änderbar |
| Eigene Teile im Widget | Anpassung | Buttons und Dropdowns in der Werkzeugleiste, Buttons in der Seitenleiste, Statuseinträge, Slots, Menüeinträge |
| Eigene Tastenkürzel | Anpassung | addHotkey nach Tastaturbelegung |
| Das Widget in 30 Sprachen | Sprachen und Barrierefreiheit | Arabisch, Hebräisch und Persisch von rechts nach links |
| Screenreader und Tastatur | Sprachen und Barrierefreiheit | Eine Chart-Zusammenfassung, Kerzen einzeln vorgelesen, Dialoge per Tastatur |
| Diese Website in 14 Sprachen, ihre Doku in sechs | Sprachen und Barrierefreiheit | English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย |
| Komponenten für React, Vue und Svelte | Entwickler | Reaktive Props: overrides, indicators, features |
| Plugins | Entwickler | Indikatoren, Zeichenwerkzeuge, Charttypen und Overlays; overlayScale und getPriceStep, um auf dem Preisraster zu zeichnen |
| Doku für Coding-Agenten | Entwickler | llms.txt, llms-full.txt und ein Agent-Skill |
Bekannte Grenzen
- Canvas 2D bleibt der Standard-Renderer, bis WebGL auf mehr Geräten erprobt ist; die Bildrate von WebGL unter Safari und auf 5K-Bildschirmen ist noch nicht gemessen.
- Bei einem Pixelverhältnis von 2 auf einem 2560×1400-Chart braucht allein das Compositing des Browsers auf integrierter Grafik etwa 23 ms, daher liegen WebGL-Bilder dort im Schnitt bei 29 ms.
- Tick-Zeiteinheiten werden aus den jüngsten Trades gebaut, die ein Feed liefert; ältere Tick-Historie lässt sich nicht laden.
- Volumen-Delta und CVD werden aus den Kerzen geschätzt, nicht aus der Seite jedes einzelnen Trades.
- Höchstens 8 Charts pro Seite zeichnen gleichzeitig mit WebGL; die übrigen zeichnen mit Canvas 2D.
Bauen Sie eine Trading-Oberfläche mit TradeCanvas?
Wir würden gern davon hören.