1,000,000 de barras: Canvas 2D y luego WebGL
Un millón de velas de un minuto con Bandas de Bollinger, EMA, RSI y MACD, con el zoom totalmente alejado y desplazadas durante 150 fotogramas, dibujadas primero con Canvas 2D y después con WebGL 2.
Auditoría del sistema
Qué hace, y a qué velocidad lo hace.
Todo lo que aparece en esta página se incluye en @tradecanvas/chart 1.30.0. Los tiempos por fotograma se midieron en Chrome, en un portátil con gráficos integrados (Intel UHD); node scripts/bench-render.mjs en el repositorio ejecuta las mismas escenas en el tuyo.
En cifras
- 18
- tipos de gráfico
- 134
- indicadores integrados
- 69
- herramientas de dibujo
- 30
- idiomas del widget
- 101
- claves de estilo
- 114
- interruptores de funciones del widget
- 0
- dependencias de terceros en tiempo de ejecución
- 3000+
- pruebas unitarias
Mídelo en tu máquina
Las cifras de arriba salen de nuestro portátil. Estas pruebas ejecutan las mismas escenas en tu navegador, con la biblioteca que publicarías. Nada está pregrabado.
Ticks en vivo sobre 100,000 barras
Llegan veinte ticks en cada fotograma a un gráfico de 100,000 barras con cuatro indicadores. Cada indicador se actualiza desde la última barra en lugar de recalcular la serie.
Una pizarra de precios de 1,000 símbolos
bo-grid con 1,000 símbolos actualizados 50 veces por segundo. Cada celda que cambia parpadea, y solo esas celdas se vuelven a pintar.
WebGL 2, con Canvas 2D por debajo
renderer: 'webgl'dibuja el gráfico en la GPU: velas, volumen, líneas y rellenos de indicadores, el mapa de calor de profundidad. El texto se queda en una capa de Canvas 2D por encima.'auto'elige WebGL siempre que WebGL 2 esté disponible.- Donde falta WebGL 2, o se pierde su contexto, el mismo gráfico sigue con Canvas 2D. No cambia nada en tu código.
- Hasta 8 gráficos de una página dibujan con WebGL a la vez (
setMaxWebGLCharts); los demás dibujan con Canvas 2D y vuelven a WebGL cuando se libera un contexto. - Las velas caen en los mismos píxeles del dispositivo con ambos renderizadores, así que un gráfico se ve igual lo dibuje el que lo dibuje.
Tiempo por fotograma
Tiempo para dibujar un fotograma mientras se desplaza el gráfico. 16.7 ms son 60 fotogramas por segundo.
| Gráfico | Densidad de píxeles | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 velas + 4 indicadores | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, zoom alejado sobre 200,000 barras + 4 indicadores | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, zoom alejado sobre 1,000,000 barras + 4 indicadores | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, mapa de calor de profundidad, 240 instantáneas × 80 niveles | 2× | 25,5 ms | 16,8 ms | |
| Seis gráficos, con 500 velas y 2 indicadores cada uno | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2,000 velas + 4 indicadores | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2,000 velas + 4 indicadores | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2,000 velas + 4 indicadores | 2× | 114,5 ms | 29,1 ms |
Canvas 2D es el predeterminado. renderer: 'webgl' (o 'auto') dibuja el gráfico con WebGL 2 y recurre a Canvas 2D cuando falta WebGL 2 o se pierde su contexto.
Recorrido 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 ratón (cruz, leyenda)
- ~0,2 ms
- Un cambio de símbolo o de temporalidad muestra un velo de carga solo después de
- 200 ms
Tamaño de descarga
Minificado y con gzip, con todo lo que importa.
- Chart, la API sin interfaz
- 176 KB
- ChartWidget, la interfaz completa
- 315 KB
- El renderizador WebGL, cargado en el primer uso
- 18 KB
Cómo se comprueba
- Más de 3,000 pruebas unitarias en los siete paquetes se ejecutan en CI en 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 el sistema de tipos contra la API real.
- Los gráficos se leen con lectores de pantalla y funcionan 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.
80 de 80
| 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 |
| La serie principal oculta | Tipos de gráfico | Solo quedan los indicadores y los dibujos |
| Gráficos para dashboards | Tipos de gráfico | Barras (agrupadas, apiladas, horizontales), anillo y circular, dispersión y burbujas, histogramas, calendarios, matrices de correlación, mapas por sector, gráficos de reloj, minigráficos, indicadores de aguja, 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 densidad de píxeles de 2 |
| Mapa de calor de profundidad, perfil de volumen y market profile 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, cruce de medias (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 en cada tick |
| Varios indicadores en un panel, movibles entre paneles | Indicadores | moveIndicatorToPane |
| Varias copias del 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 precios y en el eje de cada panel, con el color de la línea |
| Paneles contraídos, maximizados y reordenados | Indicadores | Guardados con el diseño |
| Plantillas de indicadores | Indicadores | Entradas, 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 indicadores | Indicadores | CSV o JSON, una columna por línea |
| Actualizaciones incrementales con ticks en vivo | Indicadores | update() recalcula solo 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 en la cuadrícula de precios del mercado |
| Posiciones largas y cortas | Herramientas de dibujo | Riesgo:beneficio, cantidad según el 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 al frente, 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 |
| Goma de borrar, zoom por recuadro, 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 del mercado |
| Cualquier temporalidad, y barras de ticks | Escalas y tiempo | 7m, 90m, 2d construidas con lo que sirve la fuente de datos; 100T a partir de sus operaciones |
| Escalas izquierda y derecha; logarítmica, invertida y porcentual por panel | Escalas y tiempo | La escala izquierda para un indicador superpuesto o una copia de la escala de precios |
| Comparar símbolos, diferencial y ratio | Escalas y tiempo | En su propia escala o panel, alineados por tiempo |
| Horario extendido | Escalas y tiempo | Según el horario de sesión del símbolo |
| Formatos de precio y de tiempo | Escalas y tiempo | priceFormat como función o en 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 de datos |
| Marcas de eventos en el gráfico | Escalas y tiempo | signalMarkerHover, signalMarkerClick |
| Fuentes de datos listas para usar y las tuyas propias | Datos y tiempo real | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Historial antiguo cargado al desplazarse a la izquierda | Datos y tiempo real | fetchHistoryBefore |
| Búsqueda de símbolos con detalles | Datos y tiempo real | searchSymbols, resolveSymbol: decimales, paso de precio, sesiones, zona horaria |
| Detalles del símbolo recibidos tras conectar | Datos y tiempo real | El evento symbolInfo del adaptador |
| Escalera de profundidad de mercado | Datos y tiempo real | Tamaño de bid y ask por precio; 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 del mercado | Datos y tiempo real | setMarket: pasos por tramo de precio, techo y suelo diarios, lotes, sesiones; HOSE, HNX, UPCoM y futuros VN30 |
| Órdenes y posiciones en el gráfico | Trading | Arrastra para modificar; cancela, cierra e 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; paso de precio, techo, suelo y lotes del mercado |
| Panel de cuenta | Trading | Posiciones con ganancia y pérdida en vivo, órdenes activas, 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 barra, con caducidad |
| Repetición de barras en pasos más finos | Alertas y repetición | Una temporalidad mayor repetida a partir de barras más pequeñas |
| Trading simulado en 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 | Sincronizados |
| Repetición para aplicaciones | Alertas y repetición | startTime, hideHistory, duration, marcas que aparecen 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, guardado automático; LayoutStorage para un servidor |
| Deshacer y rehacer para todo | Espacio de trabajo | Dibujos, indicadores, ajustes y tipo de gráfico; recordUndo |
| Menús contextuales por área | Espacio de trabajo | Dibujos, área del gráfico, paneles, eje de precios, eje de tiempo |
| Listas de seguimiento | Espacio de trabajo | Varias listas, reordenables 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 claves | Personalización | applyOverrides sobre 101 claves tipadas, en una capa de la aplicación y una capa del usuario |
| Ajustes que llegan a todas las claves | Personalización | Una pestaña de estilo para el tipo de gráfico en pantalla, una pestaña de trading |
| 112 interruptores de funciones | Personalización | features, setFeatures, isFeatureOn; se cambian en ejecución |
| Tus propias piezas en el widget | Personalización | Botones y desplegables en la barra de herramientas, botones en la barra lateral, elementos de estado, slots, elementos 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, barras leídas una a una, diálogos con el teclado |
| Este sitio en 14 idiomas y su documentación en seis | Idiomas y accesibilidad | English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย |
| Componentes para React, Vue y Svelte | Desarrolladores | Props reactivas: overrides, indicators, features |
| Plugins | Desarrolladores | Indicadores, herramientas de dibujo, tipos de gráfico y capas superpuestas; overlayScale y getPriceStep para dibujar sobre la cuadrícula de precios |
| Documentación para agentes de programación | 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; aún no se ha medido su tasa de fotogramas en Safari ni en pantallas 5K.
- Con una densidad de píxeles de 2 en un gráfico de 2560×1400, solo la composición del navegador tarda unos 23 ms en gráficos integrados, así que ahí los fotogramas WebGL promedian 29 ms.
- Las temporalidades de ticks se construyen con las operaciones recientes que devuelve una fuente de datos; no se puede cargar 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 mucho 8 gráficos de una página dibujan con WebGL a la vez; los demás dibujan con Canvas 2D.
¿Estás creando una pantalla de trading con TradeCanvas?
Nos encantaría saberlo.