Qué hace y a qué velocidad lo hace.
Todo lo que aparece en esta página viene en @tradecanvas/chart 1.31.0. Los tiempos por fotograma se midieron en Chrome, en un portátil con GPU integrada (Intel UHD); node scripts/bench-render.mjs, en el repositorio, ejecuta las mismas escenas en el tuyo.
En cifras
- tipos de gráfico
- 18
- indicadores integrados
- 111
- herramientas de dibujo
- 69
- idiomas del widget
- 30
- claves de estilo
- 101
- interruptores de funciones del widget
- 112
- dependencias de terceros en tiempo de ejecución
- 0
- pruebas unitarias
- 3,000+
Tiempo por fotograma
Lo que tarda en dibujarse un fotograma durante el desplazamiento. 16,7 ms equivalen a 60 fotogramas por segundo.
| Gráfico | Relación de píxeles | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 velas + 4 indicadores · 2× | 2 | 27,4 ms | 19,6 ms | |
| 1600×900, con el zoom alejado sobre 200.000 barras + 4 indicadores · 2× | 2 | 34,5 ms | 20,2 ms | |
| 1600×900, con el zoom alejado sobre 1.000.000 de barras + 4 indicadores · 2× | 2 | 34,5 ms | 16,7 ms | |
| 1600×900, mapa de calor de profundidad, 240 instantáneas × 80 niveles · 2× | 2 | 25,5 ms | 16,8 ms | |
| Seis gráficos, con 500 velas y 2 indicadores cada uno · 2× | 2 | 23,5 ms | 17,2 ms | |
| 2560×1400, 2.000 velas + 4 indicadores · 1× | 1 | 41,6 ms | 17,7 ms | |
| 2560×1400, 2.000 velas + 4 indicadores · 1,5× | 1,5 | 70,8 ms | 17,6 ms | |
| 2560×1400, 2.000 velas + 4 indicadores · 2× | 2 | 114,5 ms | 29,1 ms |
Canvas 2D es el renderizador predeterminado. renderer: 'webgl' (o 'auto') dibuja el área del gráfico con WebGL 2 y vuelve a Canvas 2D donde falta WebGL 2 o se pierde su contexto.
Ruta de los datos
- Un tick en vivo con Bandas de Bollinger, EMA, RSI y MACD sobre 100.000 barras
- ~0,001 ms
- Los mismos cuatro indicadores recalculados por completo sobre 100.000 barras
- ~27 ms
- Una línea de 1.000.000 de puntos visibles, reducida para un fotograma
- ~2,6 ms
- Un redibujado al pasar el cursor (cruz, leyenda)
- ~0,2 ms
- Un cambio de símbolo o de temporalidad solo muestra un velo de carga pasados
- 200 ms
Tamaño de descarga
Minificado y comprimido con gzip, con todo lo que importa.
- Chart, la API headless
- 176 KB
- ChartWidget, la interfaz completa
- 315 KB
- El renderizador WebGL, que se carga la primera vez que se usa
- 18 KB
Cómo se comprueba
- Más de 3.000 pruebas unitarias repartidas en los siete paquetes se ejecutan en CI con cada pull request.
- El renderizador WebGL dibuja las velas en los mismos píxeles del dispositivo que Canvas 2D; las líneas y los rellenos solo difieren en unos pocos píxeles de borde suavizados.
- El renderizador WebGL se ha comprobado en Chromium, Firefox y WebKit. Sin WebGL 2, o cuando se pierde su contexto, el gráfico sigue con Canvas 2D.
- Los ejemplos de código de la documentación y de la skill para agentes se comprueban con los tipos de la API real.
- Los gráficos se pueden leer con lectores de pantalla y manejar con el teclado; el widget se lee de derecha a izquierda en árabe, hebreo y persa.
Capacidades
Filtra por área o busca por nombre o API.
| Capacidad | Área | Detalles y API |
|---|---|---|
| Velas, barras OHLC, línea, área, línea base, Heikin-Ashi, velas huecas | Tipos de gráfico | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Renko, ruptura de línea, Kagi, punto y figura, barras de rango | Tipos de gráfico | Tamaño de caja o ATR, líneas para la ruptura, reversión en porcentaje o en precio, rango por barra |
| Velas de volumen, Equivolume, área HLC, línea escalonada, línea con marcadores, máximo-mínimo | Tipos de gráfico | 18 tipos de gráfico en total |
| Serie principal oculta | Tipos de gráfico | Solo quedan los indicadores y los dibujos |
| Gráficos para paneles | Tipos de gráfico | Barras (agrupadas, apiladas, horizontales), donut y tarta, dispersión y burbujas, histogramas, calendarios, matrices de correlación, mapas por sectores, curvas antihorarias, sparklines, medidores, mapas de calor y treemaps, cascadas, profundidad, curvas de capital |
| Canvas 2D o WebGL 2 | Renderizado | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, el evento rendererChange |
| Un tramo por columna de píxeles con el zoom alejado | Renderizado | Líneas, bandas e histogramas de indicadores por debajo de un píxel por barra |
| Un millón de barras desplazadas con fluidez | Renderizado | Con cuatro indicadores, a una relación de píxeles de 2 |
| Mapa de calor de profundidad, perfil de volumen y perfil de mercado en la GPU | Renderizado | pushDepthSnapshot(book, time) |
| Varios gráficos WebGL en una página | Renderizado | Hasta 8 (setMaxWebGLCharts); el resto dibuja con Canvas 2D; vuelven a WebGL cuando el contexto regresa |
| Nítido a cualquier escala de pantalla | Renderizado | Velas, volumen y dibujos en píxeles del dispositivo al 100%, 125% y 200% |
| Sin dependencias de terceros en tiempo de ejecución | Renderizado | Nada más que instalar ni auditar |
| 134 indicadores integrados | Indicadores | Puntos pivote de seis tipos, MA Cross, correlación con otro símbolo |
| Fuente de precio | Indicadores | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Un indicador sobre otro indicador | Indicadores | Como una media móvil del RSI, actualizada con cada tick |
| Varios indicadores en un panel, movidos entre paneles | Indicadores | moveIndicatorToPane |
| Varias veces el mismo indicador | Indicadores | EMA 20 y EMA 50 una junto a otra |
| Niveles y umbrales | Indicadores | RSI 30/70, CCI ±100, guardados con el diseño |
| Último valor en el eje | Indicadores | En el eje de precio y en el eje de cada panel, con el color de la línea |
| Paneles contraídos, maximizados y reordenados | Indicadores | Se guardan con el diseño |
| Plantillas de indicadores | Indicadores | Parámetros, estilo, niveles y panel, guardados y aplicados juntos |
| Estilo y visibilidad de cada línea | Indicadores | Una línea oculta no estira la escala; setIndicatorDefaults |
| Delta de volumen y CVD | Indicadores | Estimados a partir de las barras |
| Exportación de los valores de los indicadores | Indicadores | CSV o JSON, una columna por línea |
| Actualizaciones incrementales con ticks en vivo | Indicadores | update() solo recalcula la barra en formación |
| 69 herramientas de dibujo | Herramientas de dibujo | Líneas, canales, Fibonacci, Gann, horquillas, ondas de Elliott, patrones, ciclos, proyecciones |
| Ajustes propios de cada herramienta | Herramientas de dibujo | Estilo, propiedades y coordenadas sobre la cuadrícula de precios del mercado |
| Posiciones largas y cortas | Herramientas de dibujo | Riesgo:beneficio, cantidad a partir del riesgo en porcentaje o en dinero |
| Alertas sobre un dibujo | Herramientas de dibujo | Cuando el precio cruza una línea de tendencia o un canal tal como está dibujado, también en escala logarítmica |
| Orden, grupos y plantillas | Herramientas de dibujo | Traer adelante, enviar atrás, agrupar, bloquear, ocultar |
| Notas, globos, flechas, banderas, pincel, trazado, curva | Herramientas de dibujo | Dibujo a mano alzada y de varios puntos |
| VWAP anclado y perfil de volumen de rango fijo | Herramientas de dibujo | Leen las barras del gráfico |
| Borrador, zoom de área, imán fuerte, atajos de teclado | Herramientas de dibujo | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Ir a una fecha; rangos de 1D a Todo | Escalas y tiempo | Sin límite al alejar el zoom |
| Zonas horarias IANA con horario de verano | Escalas y tiempo | O la zona propia de la bolsa |
| Cualquier temporalidad, y barras de ticks | Escalas y tiempo | 7m, 90m, 2d construidas a partir de lo que sirve la fuente; 100T a partir de sus operaciones |
| Escalas izquierda y derecha; logarítmica, invertida y porcentual por panel | Escalas y tiempo | La escala izquierda para una superposición o una copia de la escala de precio |
| Comparar símbolos, diferencial y ratio | Escalas y tiempo | En su propia escala o panel, alineados por tiempo |
| Horario extendido | Escalas y tiempo | A partir del horario de sesión del símbolo |
| Formatos de precio y de hora | Escalas y tiempo | priceFormat como función o fracciones como 1/32; timeFormatter |
| La escala con los decimales y el paso de precio del símbolo | Escalas y tiempo | pricePrecision, minTick: una acción que se mueve de 10 en 10 nunca muestra 21.705 |
| Líneas de máximo y mínimo, bid y ask | Escalas y tiempo | Bid y ask a partir de los ticks de la fuente |
| Marcas de eventos en el gráfico | Escalas y tiempo | signalMarkerHover, signalMarkerClick |
| Fuentes listas para usar y las tuyas | Datos y tiempo real | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Historial anterior cargado al desplazarse a la izquierda | Datos y tiempo real | fetchHistoryBefore |
| Búsqueda de símbolos con sus detalles | Datos y tiempo real | searchSymbols, resolveSymbol: decimales, paso de precio, sesiones, zona horaria |
| Detalles del símbolo conocidos tras conectar | Datos y tiempo real | El evento symbolInfo del adaptador |
| Escalera de profundidad de mercado | Datos y tiempo real | Tamaño de compra y de venta por precio; haz clic para operar |
| Cotizaciones en vivo para listas de seguimiento | Datos y tiempo real | subscribeQuotes, setQuotes, getQuote |
| Noticias y estado del mercado | Datos y tiempo real | fetchNews; una cuenta atrás hasta la apertura o el cierre |
| Reglas de la bolsa | Datos y tiempo real | setMarket: fluctuación mínima por tramo de precio, techo y suelo diarios, lotes, sesiones; HOSE, HNX, UPCoM y futuros del VN30 |
| Órdenes y posiciones en el gráfico | Trading | Arrastra para modificar; cancela, cierra o invierte desde la línea |
| Marcas de ejecución | Trading | Motivo y ganancia o pérdida en executionFill |
| Ticket de orden | Trading | Cantidad, tipo, stop-loss y take-profit, vigencia, validados mientras escribes; la fluctuación mínima, el techo, el suelo y los lotes de la bolsa |
| Panel de cuenta | Trading | Posiciones con ganancias y pérdidas en vivo, órdenes pendientes, ejecuciones |
| Señales y zonas de operación | Trading | Claves de estilo markers.*, tradeZones.* |
| Backtesting y métricas de riesgo | Trading | @tradecanvas/analytics: comisión, deslizamiento, Sharpe, Sortino, Calmar, drawdown |
| Alertas más allá de un nivel de precio | Alertas y repetición | Línea que cruza otra línea, un movimiento del N% en N barras, al cierre de la barra, con vencimiento |
| Repetición de barras en pasos más finos | Alertas y repetición | Una temporalidad mayor repetida a partir de barras menores |
| Trading simulado sobre una repetición | Alertas y repetición | Órdenes ejecutadas a los precios repetidos |
| Repetición en una cuadrícula de gráficos | Alertas y repetición | Todos al mismo paso |
| Repetición para aplicaciones | Alertas y repetición | startTime, hideHistory, duration, marcas que se revelan a medida que avanza, replayComplete |
| Una cuadrícula de widgets sincronizados | Espacio de trabajo | Hasta 6, que comparten símbolo, temporalidad, cruz, tiempo y dibujos |
| Diseños con nombre en tu propio almacenamiento | Espacio de trabajo | Guardar, abrir, renombrar, autoguardado; LayoutStorage para un servidor |
| Deshacer y rehacer para todo | Espacio de trabajo | Dibujos, indicadores, configuración y tipo de gráfico; recordUndo |
| Menús contextuales por zona | Espacio de trabajo | Dibujos, área del gráfico, paneles, eje de precio, eje de tiempo |
| Listas de seguimiento | Espacio de trabajo | Varias listas, reordenadas arrastrando |
| Eventos para la aplicación | Espacio de trabajo | symbolChange, timeframeChange, ordersChange, executionFill, styleChange y más |
| Tres aspectos para el widget | Personalización | Studio, Terminal, Capsule; ui y setUI; variables CSS --tcw-* |
| El aspecto del gráfico por clave | Personalización | applyOverrides sobre 101 claves tipadas, en una capa de la aplicación y otra del usuario |
| Una configuración que llega a cada clave | Personalización | Una pestaña de estilo para el tipo de gráfico visible, una pestaña de trading |
| 112 interruptores de funciones | Personalización | features, setFeatures, isFeatureOn; se cambian en marcha |
| Tus propias piezas en el widget | Personalización | Botones y desplegables en la barra de herramientas, botones laterales, elementos de estado, slots, entradas de menú |
| Tus propios atajos | Personalización | addHotkey según la distribución del teclado |
| El widget en 30 idiomas | Idiomas y accesibilidad | Árabe, hebreo y persa de derecha a izquierda |
| Lectores de pantalla y teclado | Idiomas y accesibilidad | Un resumen del gráfico, las barras leídas una a una, diálogos con el teclado |
| Documentación en seis idiomas, este sitio en catorce | Idiomas y accesibilidad | English, Tiếng Việt, 简体中文, 日本語, 한국어, Español |
| Componentes para React, Vue y Svelte | Desarrolladores | Props reactivas: overrides, indicators, features |
| Plugins | Desarrolladores | Indicadores, herramientas de dibujo, tipos de gráfico y superposiciones; overlayScale y getPriceStep para dibujar sobre la cuadrícula de precios |
| Documentación para agentes de código | Desarrolladores | llms.txt, llms-full.txt y una skill para agentes |
Límites conocidos
- Canvas 2D sigue siendo el renderizador predeterminado hasta que WebGL se haya probado en más dispositivos; su tasa de fotogramas en Safari y en pantallas 5K aún no se ha medido.
- Con una relación de píxeles de 2 en un gráfico de 2560×1400, solo la composición del navegador tarda unos 23 ms con GPU integrada, así que ahí los fotogramas WebGL promedian 29 ms.
- Las temporalidades de ticks se construyen con las operaciones recientes que devuelve la fuente; no se puede cargar un historial de ticks más antiguo.
- El delta de volumen y el CVD se estiman a partir de las barras, no del lado de cada operación.
- Como máximo 8 gráficos de una página dibujan con WebGL a la vez; los demás dibujan con Canvas 2D.