Was es kann – und wie schnell.
Alles auf dieser Seite steckt in @tradecanvas/chart 1.31.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
- Charttypen
- 18
- eingebaute Indikatoren
- 111
- Zeichenwerkzeuge
- 69
- Widget-Sprachen
- 30
- Style-Schlüssel
- 101
- Feature-Schalter des Widgets
- 112
- Laufzeitabhängigkeiten von Drittanbietern
- 0
- Unit-Tests
- 3,000+
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× | 2 | 27,4 ms | 19,6 ms | |
| 1600×900, herausgezoomt auf 200.000 Kerzen + 4 Indikatoren · 2× | 2 | 34,5 ms | 20,2 ms | |
| 1600×900, herausgezoomt auf 1.000.000 Kerzen + 4 Indikatoren · 2× | 2 | 34,5 ms | 16,7 ms | |
| 1600×900, Tiefen-Heatmap, 240 Schnappschüsse × 80 Stufen · 2× | 2 | 25,5 ms | 16,8 ms | |
| Sechs Charts mit je 500 Kerzen und 2 Indikatoren · 2× | 2 | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 Kerzen + 4 Indikatoren · 1× | 1 | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 Kerzen + 4 Indikatoren · 1,5× | 1,5 | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 Kerzen + 4 Indikatoren · 2× | 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.
| 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 |
| Doku in sechs Sprachen, diese Website in vierzehn | Sprachen und Barrierefreiheit | English, Tiếng Việt, 简体中文, 日本語, 한국어, Español |
| 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.