Gráficos em JavaScript

Os Gráficos de negociação JS da StockSharp constituem uma biblioteca de gráficos para navegador, autónoma e sem dependências. É publicada no npm como @stocksharp/chart e fornece o motor de canvas sschart utilizado pelo terminal web da StockSharp. Está disponível uma versão funcional na demonstração online.

Gráfico de negociação JavaScript do StockSharp

Ao contrário dos componentes Windows de StockSharp.Xaml.Charting, esta biblioteca é executada num navegador e desenha diretamente num canvas HTML. O motor é exposto através do objeto global SSChart (de dist/sschart.js) e também pode ser importado como módulos ECMAScript a partir do pacote npm (import { createChart, CandlestickSeries } from '@stocksharp/chart').

Demonstração online

O gráfico abaixo utiliza o motor real em execução nesta página — velas com um histograma de volume e uma média móvel. Arraste para deslocar, utilize a roda do rato para ampliar ou reduzir e prima o botão de expansão (no canto superior direito) para o abrir em ecrã inteiro.

Funcionalidades

Um conjunto completo de séries de preço: velas, barras OHLC, linha, área, histograma, banda, além dos tipos derivados Heikin-Ashi, Renko e Point & Figure.
Estudos exatos de order-flow: footprint, perfil de volume e TPO (market profile).
Carregamento de histórico e atualizações em tempo real com setData e update.
Marcadores de negócios, linhas de preço, cursor em cruz, zoom, deslocamento e cálculo automático do intervalo.
Um motor de indicadores com aproximadamente 160 implementações de cálculo.
Indicadores sobrepostos, painéis de osciladores sincronizados e uma legenda controlada pelo cursor em cruz.
Temas claro e escuro, menu de contexto, diálogo de indicadores e mudança do tipo de gráfico.

Instalação

Instale o pacote a partir do npm e importe os módulos ES:

npm install @stocksharp/chart

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

Ou, sem um bundler, insira o global pré-compilado SSChart com uma tag <script>, conforme mostrado abaixo.

Adicionar um gráfico a uma página

A compilação gera dist/sschart.js, que publica window.SSChart. Os valores de tempo passados à API são marcas de tempo Unix em segundos.

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

Crie um gráfico, adicione uma série e carregue os dados:

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();

Uma chamada a update com a marca de tempo atual substitui o último ponto. Uma marca mais recente adiciona um ponto.

Modos de gráfico

Cada tipo de série tem o seu próprio tópico com uma demonstração online e o JavaScript que a configura:

Candlestick — velas OHLC clássicas.
Barras OHLC — marcas de abertura/fecho numa barra vertical de intervalo.
Linha — uma única polilinha através dos fechos.
Área — uma linha com preenchimento em gradiente.
Histograma — barras verticais, tipicamente de volume.
Banda — um canal superior/inferior (envelopes, Bollinger).
Velas Heikin-Ashi — velas suavizadas que filtram o ruído.
Renko — tijolos determinados pelo preço, independentes do tempo.
Ponto e Figura — colunas de X/O do movimento de preço.
Footprint — volume de bid × ask em cada preço dentro de cada barra.
Perfil de volume — volume por preço com POC e área de valor.
TPO (Perfil de mercado) — tempo gasto em cada preço por sessão.

Além dos tipos de série, o gráfico também tem um motor de indicadores com cerca de 160 estudos e preenchimento de histórico a pedido, que carrega barras mais antigas à medida que o utilizador desloca o gráfico.

Para conhecer o editor visual de estratégias apresentado pela mesma plataforma web, consulte Diagrama em JavaScript.

Camadas sobre o motor

Tudo o que foi descrito acima é o motor base, o ponto de entrada @stocksharp/chart. O restante está distribuído por pontos de entrada publicados em separado: importe o de que precisa, não é necessário copiar código-fonte.

Ponto de entrada	O que dá
Interface do gráfico — `@stocksharp/chart/ui`	Interface pronta a usar: legenda, menu de contexto, seletor de tipo de gráfico, gestor de painéis, diálogo de indicadores. Exige a folha de estilos `@stocksharp/chart/ui.css`.
`@stocksharp/chart/indicators`	`IndicatorEngine`, renderizadores e definições de indicadores. Os cálculos propriamente ditos estão no pacote @stocksharp/indicators.
Negociação a partir do gráfico — `@stocksharp/chart/trading`	Camada de negociação: linhas de ordens, posição com o resultado atual, ordens de proteção e cotações. Não conhece a corretora — comunica a intenção e o anfitrião executa-a.
Ferramentas de desenho — `@stocksharp/chart/drawings`	Ferramentas de desenho, ajuste às barras e registo de figuras próprias.
Vários gráficos — `@stocksharp/chart/workspace`	Vários gráficos sincronizados, comparação de instrumentos, navegador de intervalo, modelos de indicadores.
Guardar a disposição — `@stocksharp/chart/persistence`	Guardar e repor a disposição, com versionamento e migrações.
Tempo e sessões de negociação — `@stocksharp/chart/time`	Calendário de negociação, sessões e fusos horários, contagem decrescente até ao fecho da barra.
`@stocksharp/chart/orderflow`	Análise por clusters: footprint e perfil de volume.

Sem um empacotador, as mesmas funcionalidades estão disponíveis no pacote para navegador: dist/sschartui.js publica o objeto global SSChartUI.

Compilar a partir do código-fonte

Clone o repositório e use os scripts npm incluídos:

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

O servidor de desenvolvimento disponibiliza a demonstração em http://localhost:8791/demo/index.html.