Ce qu’il fait, et à quelle vitesse.
Tout ce qui figure sur cette page est livré dans @tradecanvas/chart 1.31.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
- types de graphiques
- 18
- indicateurs intégrés
- 111
- outils de dessin
- 69
- langues du widget
- 30
- clés de style
- 101
- interrupteurs de fonctionnalités du widget
- 112
- dépendance tierce à l’exécution
- 0
- tests unitaires
- 3,000+
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× | 2 | 27,4 ms | 19,6 ms | |
| 1600×900, vue d’ensemble sur 200 000 barres + 4 indicateurs · 2× | 2 | 34,5 ms | 20,2 ms | |
| 1600×900, vue d’ensemble sur 1 000 000 de barres + 4 indicateurs · 2× | 2 | 34,5 ms | 16,7 ms | |
| 1600×900, heatmap de profondeur, 240 instantanés × 80 niveaux · 2× | 2 | 25,5 ms | 16,8 ms | |
| Six graphiques, avec 500 bougies et 2 indicateurs chacun · 2× | 2 | 23,5 ms | 17,2 ms | |
| 2560×1400, 2 000 bougies + 4 indicateurs · 1× | 1 | 41,6 ms | 17,7 ms | |
| 2560×1400, 2 000 bougies + 4 indicateurs · 1,5× | 1,5 | 70,8 ms | 17,6 ms | |
| 2560×1400, 2 000 bougies + 4 indicateurs · 2× | 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.
| 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 |
| La doc en six langues, ce site en quatorze | Langues et accessibilité | English, Tiếng Việt, 简体中文, 日本語, 한국어, Español |
| 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.