Español ES

Gráficos en JavaScript

Gráficos de negociación JS de StockSharp es una biblioteca de gráficos para navegador, autónoma y sin dependencias. Se publica en npm como @stocksharp/chart e incluye el motor de canvas sschart que utiliza el terminal web de StockSharp. Hay una versión funcional disponible en la demo en vivo.

Gráfico de negociación en JavaScript de StockSharp

A diferencia de los componentes de Windows de StockSharp.Xaml.Charting, esta biblioteca se ejecuta en un navegador y dibuja directamente sobre un canvas HTML. El motor se expone a través del objeto global SSChart (desde dist/sschart.js) y también puede importarse como módulos ECMAScript desde el paquete npm (import { createChart, CandlestickSeries } from '@stocksharp/chart').

Demo en vivo

El gráfico de abajo es el motor real ejecutándose en esta página: velas con un histograma de volumen y una media móvil. Arrastre para desplazarse, use la rueda para hacer zoom y pulse el botón de expandir (arriba a la derecha) para abrirlo en pantalla completa.

Capacidades

  • Un conjunto completo de series de precios: velas, barras OHLC, línea, área, histograma, banda, además de los tipos derivados Heikin-Ashi, Renko y Point & Figure.
  • Estudios exactos de order-flow: footprint, perfil de volumen y TPO (perfil de mercado).
  • Carga histórica y actualizaciones en tiempo real mediante setData y update.
  • Marcadores de operaciones, líneas de precio, crosshair, zoom, desplazamiento y cálculo automático del rango.
  • Un motor de indicadores con aproximadamente 160 implementaciones de cálculo.
  • Indicadores superpuestos (overlay), paneles de osciladores sincronizados y una leyenda controlada por el crosshair.
  • Temas claro y oscuro, un menú contextual, un diálogo de indicadores y cambio de tipo de gráfico.

Instalación

Instale el paquete desde npm e importe los módulos ES:

npm install @stocksharp/chart

import { createChart, CandlestickSeries } from '@stocksharp/chart';

O bien, sin un bundler, incluya el objeto global precompilado SSChart con una etiqueta <script> como se muestra a continuación.

Añadir un gráfico a una página

La compilación produce dist/sschart.js, que publica window.SSChart. Los valores de tiempo pasados a la API son marcas de tiempo Unix en segundos.

<div id="chart" style="width: 800px; height: 400px"></div>
<script src="dist/sschart.js"></script>

Cree un gráfico, añada una serie y cargue los datos:

const chart = SSChart.createChart(document.getElementById('chart'), {
  timeScale: { timeVisible: true },
  crosshair: { mode: SSChart.CrosshairMode.Normal },
});

const candles = chart.addSeries(SSChart.CandlestickSeries, {
  upColor: '#26a69a',
  downColor: '#ef5350',
  borderVisible: false,
});

candles.setData([
  { time: 1704153600, open: 120, high: 122, low: 119, close: 121 },
  { time: 1704240000, open: 121, high: 124, low: 120, close: 123 },
]);

candles.update({
  time: 1704326400,
  open: 123,
  high: 123.5,
  low: 122.8,
  close: 123.2,
});

chart.timeScale().fitContent();

Llamar a update con la marca de tiempo actual reemplaza el último punto. Una marca de tiempo más reciente añade un punto.

Modos de gráfico

Cada tipo de serie tiene su propio tema con una demo en vivo y el JavaScript que la configura:

  • Velas — velas OHLC clásicas.
  • Barras OHLC — ticks de apertura/cierre sobre una barra de rango vertical.
  • Línea — una única polilínea a través de los cierres.
  • Área — una línea con un relleno degradado.
  • Histograma — barras verticales, normalmente de volumen.
  • Banda — un canal superior/inferior (envolventes, Bollinger).
  • Velas Heikin-Ashi — velas suavizadas que filtran el ruido.
  • Renko — ladrillos guiados por el precio, independientes del tiempo.
  • Punto y Figura — columnas de X/O del movimiento del precio.
  • Footprint — volumen de bid × ask en cada precio dentro de cada barra.
  • Perfil de volumen — volumen por precio con POC y área de valor.
  • TPO (Perfil de mercado) — tiempo pasado en cada precio por sesión.

Más allá de los tipos de serie, el gráfico también dispone de un motor de indicadores con unos 160 estudios y de relleno histórico perezoso (lazy backfill) que carga barras más antiguas a medida que se desplaza.

Para el editor visual de estrategias renderizado por la misma pila web, consulte Diagrama en JavaScript.

Pila completa del gráfico del terminal

Los módulos bajo src/chart amplían el motor base con funciones de terminal:

  • IndicatorEngine, renderizadores de indicadores, ajustes y el catálogo de cálculos.
  • Un conmutador de tipo de gráfico para velas, barras, líneas, áreas, Heikin-Ashi, Renko y Point & Figure.
  • Una leyenda, paneles secundarios sincronizados, un menú contextual y un diálogo de selección de indicadores.
  • Recálculo de los indicadores activos cuando cambian los datos en tiempo real.

Use src/chart/app.ts como ejemplo de integración de la pila completa.

Compilar desde el código fuente

Clone el repositorio y utilice los scripts de npm incluidos:

git clone https://github.com/StockSharp/Charts.git
cd Charts
npm install
npm run build
npm test
npm run serve

El servidor de desarrollo sirve la demo en http://localhost:8791/demo/index.html.

Véase también