JavaScript-графики

Торговые JavaScript-графики StockSharp — это самостоятельная браузерная библиотека графиков без внешних зависимостей. Она опубликована в npm как @stocksharp/chart и поставляет canvas-движок sschart, используемый в веб-терминале StockSharp. Рабочую версию можно посмотреть в онлайн-демо.

Торговый JavaScript-график StockSharp

В отличие от Windows-компонентов из StockSharp.Xaml.Charting, эта библиотека работает в браузере и рисует непосредственно на HTML-элементе canvas. Движок доступен через глобальный объект SSChart (из dist/sschart.js), а также может быть импортирован как ECMAScript-модули из npm-пакета (import { createChart, CandlestickSeries } from '@stocksharp/chart').

Онлайн-демо

График ниже — это реальный движок, работающий прямо на этой странице: свечи с гистограммой объёма и скользящей средней. Тяните мышью для прокрутки, используйте колесо для масштабирования и нажмите кнопку разворота (в правом верхнем углу), чтобы открыть его на весь экран.

Возможности

Полный набор ценовых серий: свечи, OHLC-бары, линия, область, гистограмма, полоса (band), а также производные типы Heikin-Ashi, Renko и Point & Figure.
Точные исследования потока ордеров: footprint, профиль объёма и TPO (рыночный профиль).
Загрузка истории и обновление в реальном времени через setData и update.
Маркеры сделок, ценовые линии, перекрестие, масштабирование, прокрутка и автоматический расчёт диапазона.
Движок индикаторов примерно со 160 реализациями расчётов.
Наложенные индикаторы, синхронизированные панели осцилляторов и легенда, управляемая перекрестием.
Светлая и тёмная темы, контекстное меню, диалог индикаторов и переключение типа графика.

Установка

Установите пакет из npm и импортируйте ES-модули:

npm install @stocksharp/chart

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

Либо без сборщика подключите готовый глобальный объект SSChart тегом <script>, как показано ниже.

Добавление графика на страницу

При сборке создаётся dist/sschart.js, который публикует window.SSChart. Значения времени передаются в API как Unix-время в секундах.

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

Создайте график, добавьте серию и загрузите данные:

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

Вызов update с текущей меткой времени заменяет последнюю точку. Более новая метка добавляет точку.

Режимы графика

У каждого типа серии есть собственная тема с онлайн-демо и JavaScript-кодом, который его настраивает:

Свечи — классические OHLC-свечи.
OHLC-бары — тики открытия/закрытия на вертикальном баре диапазона.
Линия — одна ломаная линия по ценам закрытия.
Область — линия с градиентной заливкой.
Гистограмма — вертикальные бары, обычно объём.
Полоса (Band) — верхний/нижний канал (конверты, полосы Боллинджера).
Свечи Heikin-Ashi — сглаженные свечи, фильтрующие шум.
Renko — кирпичи, управляемые ценой, независимые от времени.
График Point and Figure — столбцы X/O ценового движения.
Footprint-график — объём bid × ask на каждой цене внутри каждого бара.
Профиль объёма — объём по ценам с POC и зоной стоимости.
TPO (Профиль рынка) — время, проведённое на каждой цене за сессию.

Помимо типов серий, у графика есть движок индикаторов (около 160 исследований) и ленивая догрузка истории, которая подгружает старые бары по мере прокрутки.

О визуальном редакторе стратегий, отрисовываемом тем же веб-стеком, см. JavaScript-диаграмма.

Слои поверх движка

Всё, что описано выше, — это базовый движок, точка входа @stocksharp/chart. Остальное разложено по отдельным опубликованным точкам входа: импортируйте нужную, копировать исходники не требуется.

Точка входа	Что даёт
Обвязка графика — `@stocksharp/chart/ui`	Готовая обвязка: легенда, контекстное меню, переключатель типа графика, диспетчер панелей, диалог индикаторов. Требует таблицу стилей `@stocksharp/chart/ui.css`.
`@stocksharp/chart/indicators`	`IndicatorEngine`, отрисовщики и настройки индикаторов. Сами расчёты — в пакете @stocksharp/indicators.
Торговля с графика — `@stocksharp/chart/trading`	Торговый слой: линии заявок, позиция с текущим результатом, защитные заявки и котировки. Брокера не знает — сообщает о намерении, исполняет хост.
Инструменты разметки — `@stocksharp/chart/drawings`	Инструменты разметки, привязка к барам и регистрация собственных фигур.
Несколько графиков — `@stocksharp/chart/workspace`	Несколько синхронизированных графиков, сравнение инструментов, навигатор диапазона, шаблоны индикаторов.
Сохранение раскладки — `@stocksharp/chart/persistence`	Сохранение и восстановление раскладки с версионированием и миграциями.
Время и торговые сессии — `@stocksharp/chart/time`	Торговый календарь, сессии и таймзоны, обратный отсчёт до закрытия бара.
`@stocksharp/chart/orderflow`	Кластерный анализ: футпринт и профиль объёма.

Без сборщика те же возможности доступны браузерным пакетом: dist/sschartui.js публикует глобальный объект SSChartUI.

Сборка из исходного кода

Клонируйте репозиторий и используйте включённые npm-скрипты:

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

Сервер разработки публикует демо по адресу http://localhost:8791/demo/index.html.