1 000 000 баров: Canvas 2D, затем WebGL
Миллион минутных свечей с Bollinger Bands, EMA, RSI и MACD, отдалённых до упора и прокручиваемых 150 кадров: сначала через Canvas 2D, затем через WebGL 2.
Аудит системы
Что он умеет и как быстро.
Всё на этой странице входит в @tradecanvas/chart 1.30.0. Время кадра измерено в Chrome на ноутбуке со встроенной графикой (Intel UHD); node scripts/bench-render.mjs из репозитория запускает те же сцены на вашем.
В цифрах
- 18
- типов графиков
- 134
- встроенных индикаторов
- 69
- инструментов рисования
- 30
- языков виджета
- 101
- ключей стиля
- 114
- переключателей функций виджета
- 0
- сторонних runtime-зависимостей
- 3 000+
- модульных тестов
Измерьте на своём компьютере
Цифры выше получены на нашем ноутбуке. Эти тесты запускают те же сцены в вашем браузере, с той же библиотекой, которую вы бы выпустили. Ничего не записано заранее.
Живые тики на 100 000 баров
В каждый кадр приходит двадцать тиков на график из 100 000 баров с четырьмя индикаторами. Каждый индикатор обновляется с последнего бара, а не пересчитывает всю серию.
Табло котировок на 1000 символов
bo-grid на 1000 символов, которые обновляются 50 раз в секунду. Каждая изменившаяся ячейка мигает, и перерисовываются только эти ячейки.
WebGL 2, а под ним Canvas 2D
renderer: 'webgl'рисует область графика на GPU: свечи, объём, линии и заливки индикаторов, тепловую карту стакана. Текст остаётся на слое Canvas 2D поверх неё.'auto'выбирает WebGL везде, где доступен WebGL 2.- Где WebGL 2 нет или его контекст потерян, тот же график продолжает работать на Canvas 2D. В вашем коде ничего не меняется.
- Одновременно через WebGL рисуют до 8 графиков на странице (
setMaxWebGLCharts); остальные рисуются через Canvas 2D и возвращаются к WebGL, когда освобождается контекст. - В обоих рендерерах свечи ложатся на одни и те же физические пиксели, поэтому график выглядит одинаково, какой бы рендерер его ни рисовал.
Время кадра
Время отрисовки одного кадра при прокрутке. 16,7 мс — это 60 кадров в секунду.
| График | Плотность пикселей | Canvas 2D | WebGL | Canvas 2D / WebGL |
|---|---|---|---|---|
| 1600×900, 500 свечей + 4 индикатора | 2× | 27,4 ms | 19,6 ms | |
| 1600×900, все 200 000 баров на экране + 4 индикатора | 2× | 34,5 ms | 20,2 ms | |
| 1600×900, все 1 000 000 баров на экране + 4 индикатора | 2× | 34,5 ms | 16,7 ms | |
| 1600×900, тепловая карта стакана, 240 снимков × 80 уровней | 2× | 25,5 ms | 16,8 ms | |
| Шесть графиков, у каждого 500 свечей и 2 индикатора | 2× | 23,5 ms | 17,2 ms | |
| 2560×1400, 2000 свечей + 4 индикатора | 1× | 41,6 ms | 17,7 ms | |
| 2560×1400, 2000 свечей + 4 индикатора | 1,5× | 70,8 ms | 17,6 ms | |
| 2560×1400, 2000 свечей + 4 индикатора | 2× | 114,5 ms | 29,1 ms |
По умолчанию используется Canvas 2D. renderer: 'webgl' (или 'auto') рисует область графика через WebGL 2 и переходит на Canvas 2D, если WebGL 2 нет или его контекст потерян.
Путь данных
- Живой тик с Bollinger Bands, EMA, RSI и MACD на 100 000 баров
- ~0,001 ms
- Полный пересчёт тех же четырёх индикаторов на 100 000 баров
- ~27 ms
- Линия из 1 000 000 видимых точек, прореженная для одного кадра
- ~2,6 ms
- Перерисовка при наведении (перекрестие, легенда)
- ~0,2 ms
- При смене символа или таймфрейма завеса загрузки появляется только через
- 200 ms
Размер загрузки
После минификации и gzip, вместе со всем, что импортируется.
- Chart, headless API
- 176 KB
- ChartWidget, полный интерфейс
- 315 KB
- Рендерер WebGL, загружается при первом использовании
- 18 KB
Как это проверяется
- Более 3000 модульных тестов в семи пакетах запускаются в CI при каждом pull request.
- Рендерер WebGL рисует свечи на тех же пикселях устройства, что и Canvas 2D; линии и заливки отличаются лишь в нескольких сглаженных пикселях по краям.
- Рендерер WebGL проверен в Chromium, Firefox и WebKit. Без WebGL 2 или при потере его контекста график продолжает работать на Canvas 2D.
- Примеры кода в документации и в навыке для агентов проходят проверку типов на настоящем API.
- Графики доступны программам чтения с экрана и управляются с клавиатуры; на арабском, иврите и персидском виджет идёт справа налево.
Возможности
Фильтруйте по области или ищите по названию или API.
80 из 80
| Возможность | Область | Подробности и API |
|---|---|---|
| Свечи, бары OHLC, линия, область, базовая линия, Хейкин-Аши, полые свечи | Типы графиков | candlestick, bar, line, area, baseline, heikinAshi, hollowCandle |
| Ренко, линейный прорыв, Каги, крестики-нолики, бары диапазона | Типы графиков | Размер блока или ATR, число линий для прорыва, разворот в процентах или в цене, диапазон на бар |
| Объёмные свечи, Equivolume, область HLC, ступенчатая линия, линия с маркерами, максимум-минимум | Типы графиков | Всего 18 типов графиков |
| Основная серия скрыта | Типы графиков | Остаются только индикаторы и рисунки |
| Графики для дашбордов | Типы графиков | Столбцы (группами, стопкой, горизонтальные), кольцевые и круговые диаграммы, диаграммы рассеяния и пузырьковые, гистограммы, календари, корреляционные матрицы, карты по секторам, кривые против часовой стрелки, спарклайны, круговые шкалы, тепловые карты и treemap, каскадные диаграммы, глубина стакана, кривые капитала |
| Canvas 2D или WebGL 2 | Отрисовка | renderer: 'canvas' | 'webgl' | 'auto', setRenderer, событие rendererChange |
| Один отрезок на столбец пикселей при отдалении | Отрисовка | Линии, полосы и гистограммы индикаторов, когда на бар приходится меньше пикселя |
| Миллион баров плавно прокручивается | Отрисовка | С четырьмя индикаторами, при плотности пикселей 2 |
| Тепловая карта стакана, профиль объёма и рыночный профиль на GPU | Отрисовка | pushDepthSnapshot(book, time) |
| Несколько графиков WebGL на странице | Отрисовка | До 8 (setMaxWebGLCharts); остальные рисуются через Canvas 2D; возврат к WebGL, когда контекст восстанавливается |
| Чёткость при любом масштабе экрана | Отрисовка | Свечи, объём и рисунки ложатся на физические пиксели при 100 %, 125 % и 200 % |
| Нет сторонних runtime-зависимостей | Отрисовка | Больше нечего устанавливать и проверять |
| 134 встроенных индикаторов | Индикаторы | Точки разворота шести видов, MA Cross, корреляция с другим символом |
| Источник цены | Индикаторы | open, high, low, hl2, hlc3, ohlc4, hlcc4 |
| Индикатор поверх индикатора | Индикаторы | Например, средняя от RSI, обновляемая на каждом тике |
| Несколько индикаторов в одной панели, перенос между панелями | Индикаторы | moveIndicatorToPane |
| Несколько экземпляров одного индикатора | Индикаторы | EMA 20 и EMA 50 рядом |
| Уровни и пороги | Индикаторы | RSI 30/70, CCI ±100, сохраняются вместе с макетом |
| Последнее значение на оси | Индикаторы | На ценовой оси и на оси каждой панели, цветом линии |
| Панели сворачиваются, разворачиваются и меняются местами | Индикаторы | Сохраняется вместе с макетом |
| Шаблоны индикаторов | Индикаторы | Параметры, стиль, уровни и панель сохраняются и применяются вместе |
| Стиль и видимость каждой линии | Индикаторы | Скрытая линия не растягивает шкалу; setIndicatorDefaults |
| Дельта объёма и CVD | Индикаторы | Оцениваются по барам |
| Экспорт значений индикаторов | Индикаторы | CSV или JSON, по столбцу на линию |
| Инкрементальные обновления на живых тиках | Индикаторы | update() пересчитывает только формирующийся бар |
| 69 инструментов рисования | Инструменты рисования | Линии, каналы, Фибоначчи, Ганн, вилы, волны Эллиотта, паттерны, циклы, проекции |
| Собственные настройки каждого инструмента | Инструменты рисования | Стиль, свойства и координаты по ценовой сетке рынка |
| Длинные и короткие позиции | Инструменты рисования | Риск:прибыль, объём по риску в процентах или в деньгах |
| Оповещения на рисунке | Инструменты рисования | Когда цена пересекает линию тренда или канал так, как они нарисованы, в том числе на логарифмической шкале |
| Порядок, группы и шаблоны | Инструменты рисования | На передний план, на задний план, группировка, блокировка, скрытие |
| Заметки, выноски, стрелки, флажки, кисть, путь, кривая | Инструменты рисования | Рисование от руки и по нескольким точкам |
| Anchored VWAP и профиль объёма фиксированного диапазона | Инструменты рисования | Строятся по барам графика |
| Ластик, зум рамкой, сильный магнит, горячие клавиши | Инструменты рисования | Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F |
| Переход к дате; диапазоны от 1D до All | Шкалы и время | Без ограничения на отдаление |
| Часовые пояса IANA с переходом на летнее время | Шкалы и время | Или собственный пояс биржи |
| Любой таймфрейм и тиковые бары | Шкалы и время | 7m, 90m, 2d строятся из того, что отдаёт поток; 100T — из его сделок |
| Левая и правая шкалы; логарифмическая, перевёрнутая и процентная для каждой панели | Шкалы и время | Левая шкала для оверлея или копии ценовой шкалы |
| Сравнение символов, спред и отношение | Шкалы и время | На своей шкале или панели, с выравниванием по времени |
| Расширенные часы торгов | Шкалы и время | По торговым сессиям символа |
| Форматы цены и времени | Шкалы и время | priceFormat как функция или дроби вроде 1/32; timeFormatter |
| Шкала в знаках после запятой и шаге цены символа | Шкалы и время | pricePrecision, minTick: акция с шагом 10 никогда не покажет 21 705 |
| Линии максимума и минимума, bid и ask | Шкалы и время | Bid и ask из тиков потока |
| Метки событий на графике | Шкалы и время | signalMarkerHover, signalMarkerClick |
| Готовые потоки и ваши собственные | Данные и реальное время | Binance, Bybit, Coinbase, Kraken, mock; WebSocketAdapter, PollingAdapter |
| Старая история подгружается при прокрутке влево | Данные и реальное время | fetchHistoryBefore |
| Поиск символов с подробностями | Данные и реальное время | searchSymbols, resolveSymbol: знаки после запятой, шаг цены, сессии, часовой пояс |
| Данные символа, полученные после подключения | Данные и реальное время | Событие адаптера symbolInfo |
| Стакан заявок | Данные и реальное время | Объём bid и ask по ценам; щелчок для торговли |
| Живые котировки для списков наблюдения | Данные и реальное время | subscribeQuotes, setQuotes, getQuote |
| Новости и статус рынка | Данные и реальное время | fetchNews; обратный отсчёт до открытия или закрытия |
| Правила биржи | Данные и реальное время | setMarket: шаг цены по ценовым диапазонам, дневные верхний и нижний пределы, лоты, сессии; HOSE, HNX, UPCoM и фьючерсы на VN30 |
| Ордера и позиции на графике | Торговля | Перетаскивание для изменения; отмена, закрытие и разворот прямо с линии |
| Отметки исполнения | Торговля | Причина и прибыль или убыток в executionFill |
| Тикет ордера | Торговля | Объём, тип, стоп-лосс и тейк-профит, срок действия, проверка по ходу ввода; шаг цены, верхний и нижний пределы и лоты биржи |
| Панель счёта | Торговля | Позиции с текущей прибылью и убытком, активные ордера, исполнения |
| Сигналы и торговые зоны | Торговля | Ключи стиля markers.*, tradeZones.* |
| Бэктестинг и метрики риска | Торговля | @tradecanvas/analytics: комиссия, проскальзывание, Sharpe, Sortino, Calmar, просадка |
| Оповещения не только по уровню цены | Оповещения и реплей | Пересечение линии линией, движение на N% за N баров, по закрытию бара, со сроком действия |
| Реплей баров более мелкими шагами | Оповещения и реплей | Старший таймфрейм проигрывается из младших баров |
| Бумажная торговля в реплее | Оповещения и реплей | Ордера исполняются по проигрываемым ценам |
| Реплей по сетке графиков | Оповещения и реплей | Все графики идут синхронно |
| Реплей для приложений | Оповещения и реплей | startTime, hideHistory, duration, метки появляются по ходу проигрывания, replayComplete |
| Сетка синхронизированных виджетов | Рабочая область | До 6, с общими символом, таймфреймом, перекрестием, временем и рисунками |
| Именованные макеты в вашем хранилище | Рабочая область | Сохранение, открытие, переименование, автосохранение; LayoutStorage для сервера |
| Отмена и повтор для всего | Рабочая область | Рисунки, индикаторы, настройки и тип графика; recordUndo |
| Контекстные меню по областям | Рабочая область | Рисунки, область графика, панели, ценовая ось, ось времени |
| Списки наблюдения | Рабочая область | Несколько списков, порядок меняется перетаскиванием |
| События для хост-приложения | Рабочая область | symbolChange, timeframeChange, ordersChange, executionFill, styleChange и другие |
| Три оформления виджета | Настройка | Studio, Terminal, Capsule; ui и setUI; CSS-переменные --tcw-* |
| Вид графика по ключам | Настройка | applyOverrides по 101 типизированному ключу, на слое хоста и слое пользователя |
| Настройки, доступные для каждого ключа | Настройка | Вкладка стиля для текущего типа графика, вкладка торговли |
| 112 переключателей функций | Настройка | features, setFeatures, isFeatureOn; меняются на лету |
| Свои элементы в виджете | Настройка | Кнопки и выпадающие списки панели инструментов, кнопки боковой панели, элементы строки состояния, слоты, пункты меню |
| Свои горячие клавиши | Настройка | addHotkey с учётом раскладки клавиатуры |
| Виджет на 30 языках | Языки и доступность | Арабский, иврит и персидский справа налево |
| Программы чтения с экрана и клавиатура | Языки и доступность | Сводка графика, бары по одному, диалоги с клавиатуры |
| Сайт на 14 языках, документация на шести | Языки и доступность | English, Tiếng Việt, 简体中文, 繁體中文, 日本語, 한국어, Español, Português, Français, Deutsch, Русский, Türkçe, Bahasa Indonesia, ไทย |
| Компоненты React, Vue и Svelte | Разработчикам | Реактивные props: overrides, indicators, features |
| Плагины | Разработчикам | Индикаторы, инструменты рисования, типы графиков и оверлеи; overlayScale и getPriceStep для рисования по ценовой сетке |
| Документация для агентов-программистов | Разработчикам | llms.txt, llms-full.txt и навык для агентов |
Известные ограничения
- Canvas 2D остаётся рендерером по умолчанию, пока WebGL не опробован на большем числе устройств; частота кадров WebGL в Safari и на экранах 5K ещё не измерялась.
- При плотности пикселей 2 на графике 2560×1400 одна только композиция в браузере занимает около 23 мс на встроенной графике, поэтому кадры WebGL там в среднем длятся 29 мс.
- Тиковые таймфреймы строятся из последних сделок, которые возвращает поток; более старую тиковую историю загрузить нельзя.
- Дельта объёма и CVD оцениваются по барам, а не по стороне каждой сделки.
- Одновременно через WebGL рисуют не более 8 графиков на странице; остальные рисуются через Canvas 2D.
Делаете торговый экран на TradeCanvas?
Мы будем рады узнать об этом.