1 000 000 de barres : Canvas 2D, puis WebGL
Un million de bougies d’une minute avec bandes de Bollinger, EMA, RSI et MACD, en vue d’ensemble complète, qui défilent pendant 150 images, dessinées d’abord en Canvas 2D puis en WebGL 2.
Audit du système
Ce qu’il fait, et à quelle vitesse.
Tout ce qui figure sur cette page est livré dans @tradecanvas/chart 1.30.0. Les temps par image ont été mesurés dans Chrome, sur un portable à puce graphique intégrée (Intel UHD) ; node scripts/bench-render.mjs, dans le dépôt, rejoue les mêmes scènes sur votre machine.
En chiffres
- 18
- types de graphiques
- 134
- indicateurs intégrés
- 69
- outils de dessin
- 30
- langues du widget
- 101
- clés de style
- 114
- interrupteurs de fonctionnalités du widget
- 0
- dépendance tierce à l’exécution
- 3 000+
- tests unitaires
Mesurez-le sur votre machine
Les chiffres ci-dessus viennent de notre portable. Ces tests rejouent les mêmes scènes dans votre navigateur, avec la bibliothèque que vous livreriez. Rien n’est préenregistré.
Des ticks en direct sur 100 000 barres
Vingt ticks arrivent à chaque image sur un graphique de 100 000 barres avec quatre indicateurs. Chaque indicateur se met à jour depuis la dernière barre au lieu de recalculer toute la série.
Un tableau des cours de 1 000 symboles
bo-grid avec 1 000 symboles mis à jour 50 fois par seconde. Chaque cellule modifiée clignote, et seules ces cellules sont redessinées.
WebGL 2, avec Canvas 2D en dessous
renderer: 'webgl'dessine la zone du graphique sur le GPU : bougies, volume, lignes et remplissages des indicateurs, heatmap de profondeur. Le texte reste sur une couche Canvas 2D au-dessus.'auto'choisit WebGL partout où WebGL 2 est disponible.- Là où WebGL 2 manque, ou quand son contexte est perdu, le même graphique continue en Canvas 2D. Rien ne change dans votre code.
- Jusqu’à 8 graphiques d’une page dessinent en WebGL en même temps (
setMaxWebGLCharts) ; les autres dessinent en Canvas 2D et repassent en WebGL quand un contexte se libère. - Les bougies tombent sur les mêmes pixels de l’appareil avec les deux moteurs de rendu : un graphique a le même aspect, quel que soit celui qui le dessine.
Temps par image
Le temps de dessin d’une image pendant le défilement. 16,7 ms correspondent à 60 images par seconde.
| Graphique | Ratio de pixels | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 bougies + 4 indicateurs | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, vue d’ensemble sur 200 000 barres + 4 indicateurs | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, vue d’ensemble sur 1 000 000 de barres + 4 indicateurs | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, heatmap de profondeur, 240 instantanés × 80 niveaux | 2× | 25,5 ms | 16,8 ms | |
| Six graphiques, avec 500 bougies et 2 indicateurs chacun | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2 000 bougies + 4 indicateurs | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2 000 bougies + 4 indicateurs | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2 000 bougies + 4 indicateurs | 2× | 114,5 ms | 29,1 ms |
Canvas 2D est le moteur de rendu par défaut. renderer: 'webgl' (ou 'auto') dessine la zone du graphique en WebGL 2 et revient à Canvas 2D là où WebGL 2 manque ou quand son contexte est perdu.
Chemin des données
- Un tick en direct avec bandes de Bollinger, EMA, RSI et MACD sur 100 000 barres
- ~0,001 ms
- Les quatre mêmes indicateurs entièrement recalculés sur 100 000 barres
- ~27 ms
- Une ligne de 1 000 000 de points visibles, sous-échantillonnée pour une image
- ~2,6 ms
- Un redessin au survol (réticule, légende)
- ~0,2 ms
- Un changement de symbole ou d’unité de temps n’affiche un voile de chargement qu’au-delà de
- 200 ms
Poids du téléchargement
Minifié et compressé en gzip, avec tout ce qu’il importe.
- Chart, l’API headless
- 176 KB
- ChartWidget, l’interface complète
- 315 KB
- Le moteur de rendu WebGL, chargé à la première utilisation
- 18 KB
Comment c’est vérifié
- Plus de 3 000 tests unitaires, répartis sur les sept paquets, s’exécutent en CI à chaque pull request.
- Le moteur de rendu WebGL dessine les bougies sur les mêmes pixels de l’appareil que Canvas 2D ; les lignes et les remplissages ne diffèrent que sur quelques pixels de bord lissés.
- Le moteur de rendu WebGL a été vérifié dans Chromium, Firefox et WebKit. Sans WebGL 2, ou quand son contexte est perdu, le graphique continue en Canvas 2D.
- Les exemples de code de la doc et de la skill pour agents sont vérifiés par typage contre la vraie API.
- Les graphiques se lisent au lecteur d’écran et s’utilisent au clavier ; le widget s’affiche de droite à gauche en arabe, en hébreu et en persan.
Fonctionnalités
Filtrez par domaine, ou cherchez par nom ou par API.
80 sur 80
| Fonctionnalité | Domaine | Détails et API |
|---|---|---|
| Bougies, barres OHLC, ligne, aire, ligne de base, Heikin-Ashi, bougies creuses | Types de graphiques | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, line break, Kagi, point & figure, barres de range | Types de graphiques | Taille de boîte ou ATR, lignes à casser, retournement en pourcentage ou en prix, amplitude par barre |
| Bougies de volume, Equivolume, aire HLC, ligne en escalier, ligne avec marqueurs, haut-bas | Types de graphiques | 18 types de graphiques au total |
| La série principale masquée | Types de graphiques | Seuls les indicateurs et les dessins restent |
| Graphiques pour tableaux de bord | Types de graphiques | Barres (groupées, empilées, horizontales), anneau et camembert, nuages de points et bulles, histogrammes, calendriers, matrices de corrélation, cartes par secteur, courbes anti-horaires, sparklines, jauges, cartes de chaleur et treemaps, cascades, profondeur, courbes de capital |
| Canvas 2D ou WebGL 2 | Rendu | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, l’événement rendererChange |
| Un trait par colonne de pixels en vue d’ensemble | Rendu | Lignes, bandes et histogrammes d’indicateurs sous un pixel par barre |
| Un million de barres qui défilent sans à-coups | Rendu | Avec quatre indicateurs, à un ratio de pixels de 2 |
| Heatmap de profondeur, profil de volume et profil de marché sur le GPU | Rendu | pushDepthSnapshot(book, time) |
| Plusieurs graphiques WebGL sur une page | Rendu | Jusqu’à 8 (setMaxWebGLCharts) ; les autres dessinent en Canvas 2D ; retour à WebGL quand le contexte revient |
| Net à toutes les échelles d’affichage | Rendu | Bougies, volume et dessins sur les pixels de l’appareil à 100 %, 125 % et 200 % |
| Aucune dépendance tierce à l’exécution | Rendu | Rien d’autre à installer ni à auditer |
| 134 indicateurs intégrés | Indicateurs | Points pivots de six sortes, MA Cross, corrélation avec un autre symbole |
| Source de prix | Indicateurs | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Un indicateur appliqué à un indicateur | Indicateurs | Comme une moyenne mobile du RSI, mise à jour à chaque tick |
| Plusieurs indicateurs dans un panneau, déplacés d’un panneau à l’autre | Indicateurs | moveIndicatorToPane |
| Plusieurs fois le même indicateur | Indicateurs | EMA 20 et EMA 50 côte à côte |
| Niveaux et seuils | Indicateurs | RSI 30/70, CCI ±100, enregistrés avec la disposition |
| Dernière valeur sur l’axe | Indicateurs | Sur l’axe des prix et sur l’axe de chaque panneau, dans la couleur de la ligne |
| Panneaux repliés, agrandis et réordonnés | Indicateurs | Enregistrés avec la disposition |
| Modèles d’indicateurs | Indicateurs | Paramètres, style, niveaux et panneau, enregistrés et appliqués ensemble |
| Style et visibilité de chaque ligne | Indicateurs | Une ligne masquée n’étire pas l’échelle ; setIndicatorDefaults |
| Delta de volume et CVD | Indicateurs | Estimés à partir des barres |
| Export des valeurs d’indicateurs | Indicateurs | CSV ou JSON, une colonne par ligne |
| Mises à jour incrémentales sur les ticks en direct | Indicateurs | update() ne recalcule que la barre en formation |
| 69 outils de dessin | Outils de dessin | Lignes, canaux, Fibonacci, Gann, fourchettes, vagues d’Elliott, figures, cycles, projections |
| Les réglages propres à chaque outil | Outils de dessin | Style, propriétés et coordonnées sur la grille de prix du marché |
| Positions acheteuses et vendeuses | Outils de dessin | Rapport risque/rendement, quantité à partir du risque en pourcentage ou en montant |
| Alertes sur un dessin | Outils de dessin | Quand le prix franchit une ligne de tendance ou un canal tel qu’il est dessiné, échelle logarithmique comprise |
| Ordre, groupes et modèles | Outils de dessin | Avancer, reculer, grouper, verrouiller, masquer |
| Notes, bulles, flèches, drapeaux, pinceau, tracé, courbe | Outils de dessin | Dessin à main levée et à plusieurs points |
| VWAP ancré et profil de volume sur plage fixe | Outils de dessin | Lisent les barres du graphique |
| Gomme, zoom par zone, aimant fort, raccourcis clavier | Outils de dessin | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Aller à une date ; périodes de 1D à Tout | Échelles et temps | Pas de limite de dézoom |
| Fuseaux horaires IANA avec heure d’été | Échelles et temps | Ou le fuseau propre à la place de marché |
| N’importe quelle unité de temps, et barres en ticks | Échelles et temps | 7m, 90m, 2d construites à partir de ce que sert le flux ; 100T à partir de ses transactions |
| Échelles gauche et droite ; logarithmique, inversée et en pourcentage par panneau | Échelles et temps | L’échelle de gauche pour une superposition ou une copie de l’échelle des prix |
| Comparer des symboles, spread et ratio | Échelles et temps | Sur leur propre échelle ou panneau, alignés dans le temps |
| Horaires étendus | Échelles et temps | D’après les horaires de séance du symbole |
| Formats de prix et d’heure | Échelles et temps | priceFormat en fonction ou en fractions comme 1/32 ; timeFormatter |
| L’échelle aux décimales et au pas de prix du symbole | Échelles et temps | pricePrecision, minTick : une action qui évolue par pas de 10 n’affiche jamais 21 705 |
| Lignes du plus haut et du plus bas, bid et ask | Échelles et temps | Bid et ask d’après les ticks du flux |
| Marques d’événements sur le graphique | Échelles et temps | signalMarkerHover, signalMarkerClick |
| Des flux prêts à l’emploi, et les vôtres | Données et temps réel | Binance, Bybit, Coinbase, Kraken, mock ; WebSocketAdapter, PollingAdapter |
| Historique plus ancien chargé en défilant vers la gauche | Données et temps réel | fetchHistoryBefore |
| Recherche de symboles avec leurs détails | Données et temps réel | searchSymbols, resolveSymbol : décimales, pas de prix, séances, fuseau horaire |
| Détails du symbole appris après la connexion | Données et temps réel | L’événement symbolInfo de l’adaptateur |
| Échelle de profondeur de marché | Données et temps réel | Taille à l’achat et à la vente par prix ; cliquez pour trader |
| Cours en direct pour les listes de suivi | Données et temps réel | subscribeQuotes, setQuotes, getQuote |
| Actualités et état du marché | Données et temps réel | fetchNews ; un compte à rebours jusqu’à l’ouverture ou la clôture |
| Règles de la bourse | Données et temps réel | setMarket : pas de cotation par tranche de prix, plafond et plancher du jour, lots, séances ; HOSE, HNX, UPCoM et contrats à terme sur le VN30 |
| Ordres et positions sur le graphique | Trading | Faites glisser pour modifier ; annulez, clôturez et inversez depuis la ligne |
| Marques d’exécution | Trading | Motif et gain ou perte dans executionFill |
| Ticket d’ordre | Trading | Quantité, type, stop-loss et take-profit, durée de validité, vérifiés pendant la saisie ; le pas de cotation, le plafond, le plancher et les lots de la bourse |
| Panneau du compte | Trading | Positions avec gains et pertes en direct, ordres en attente, exécutions |
| Signaux et zones de trade | Trading | Clés de style markers.*, tradeZones.* |
| Backtesting et mesures de risque | Trading | @tradecanvas/analytics : commission, glissement, Sharpe, Sortino, Calmar, drawdown |
| Des alertes au-delà d’un niveau de prix | Alertes et relecture | Ligne qui en croise une autre, variation de N % en N barres, à la clôture de la barre, avec expiration |
| Relecture des barres par pas plus fins | Alertes et relecture | Une unité de temps plus longue rejouée à partir de barres plus courtes |
| Trading fictif pendant une relecture | Alertes et relecture | Ordres exécutés aux prix rejoués |
| Relecture sur une grille de graphiques | Alertes et relecture | Tous au même pas |
| Relecture pour les applications | Alertes et relecture | startTime, hideHistory, duration, marques révélées au fil de la lecture, replayComplete |
| Une grille de widgets synchronisés | Espace de travail | Jusqu’à 6, partageant symbole, unité de temps, réticule, temps et dessins |
| Des dispositions nommées sur votre propre stockage | Espace de travail | Enregistrer, ouvrir, renommer, enregistrement auto ; LayoutStorage pour un serveur |
| Annuler et rétablir pour tout | Espace de travail | Dessins, indicateurs, paramètres et type de graphique ; recordUndo |
| Menus contextuels par zone | Espace de travail | Dessins, zone du graphique, panneaux, axe des prix, axe du temps |
| Listes de suivi | Espace de travail | Plusieurs listes, réordonnées par glisser |
| Des événements pour l’application hôte | Espace de travail | symbolChange, timeframeChange, ordersChange, executionFill, styleChange et d’autres |
| Trois apparences pour le widget | Personnalisation | Studio, Terminal, Capsule ; ui et setUI ; variables CSS --tcw-* |
| L’apparence du graphique, clé par clé | Personnalisation | applyOverrides sur 101 clés typées, sur une couche hôte et une couche utilisateur |
| Des paramètres qui atteignent chaque clé | Personnalisation | Un onglet de style pour le type de graphique affiché, un onglet trading |
| 112 interrupteurs de fonctionnalités | Personnalisation | features, setFeatures, isFeatureOn ; modifiables en marche |
| Vos propres pièces dans le widget | Personnalisation | Boutons et menus déroulants de la barre d’outils, boutons de la barre latérale, éléments d’état, emplacements, entrées de menu |
| Vos propres raccourcis | Personnalisation | addHotkey selon la disposition du clavier |
| Le widget en 30 langues | Langues et accessibilité | L’arabe, l’hébreu et le persan de droite à gauche |
| Lecteurs d’écran et clavier | Langues et accessibilité | Un résumé du graphique, les barres lues une à une, les boîtes de dialogue au clavier |
| Ce site en 14 langues, sa doc en six | Langues et accessibilité | English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย |
| Composants React, Vue et Svelte | Développeurs | Props réactives : overrides, indicators, features |
| Plugins | Développeurs | Indicateurs, outils de dessin, types de graphiques et superpositions ; overlayScale et getPriceStep pour dessiner sur la grille de prix |
| Une doc pour les agents de code | Développeurs | llms.txt, llms-full.txt et une skill pour agents |
Limites connues
- Canvas 2D reste le moteur de rendu par défaut tant que WebGL n’a pas été essayé sur davantage d’appareils ; sa fréquence d’images sur Safari et sur les écrans 5K n’a pas encore été mesurée.
- À un ratio de pixels de 2 sur un graphique de 2560×1400, la composition du navigateur prend à elle seule environ 23 ms sur une puce graphique intégrée ; les images WebGL y durent donc 29 ms en moyenne.
- Les unités de temps en ticks sont construites à partir des transactions récentes que renvoie un flux ; un historique de ticks plus ancien ne peut pas être chargé.
- Le delta de volume et le CVD sont estimés à partir des barres, pas du sens de chaque transaction.
- Au plus 8 graphiques d’une page dessinent en WebGL en même temps ; les autres dessinent en Canvas 2D.
Vous construisez un écran de trading avec TradeCanvas ?
Nous aimerions en savoir plus.