Графики крипты на своём сайте

Графики крипты на своём сайте собираются из двух частей: данные и отрисовка. Скрипт котировок отдаёт свечи и тики, библиотека рисует шкалу, объём и переключение таймфреймов. Пустой ответ API даёт пустой холст — сколько ни правьте CSS контейнера.

Типичный сценарий: витрина рынка, карточка монеты, иногда встроенный график в шапке лендинга брокера. Везде один принцип — символ на странице и символ в history/WS совпадают, время бара валидно, домен страницы может достучаться до API.

Стек на практике

Частый выбор — TradingView Charting Library на своём домене плюс PHP datafeed. Публичный iframe-виджет проще, но отдаёт контроль бренда и гибкость символов. Если нужен white-label вид — своя библиотека. Мануал: TradingView Library.

• History endpoint по symbol + resolution.
• Realtime: WebSocket last или обновление текущего бара.
• Словарь пар: BTCUSDT и человекочитаемые алиасы.
• Precision цены для сатоши и для крупных альтов.

Общий источник правды по рынку — лента котировок и API. Витрина таблицей — CoinMarket-скрипт.

Почему график «встал»

1. В ответе history пустой массив или ошибка 5xx/429.
2. Символ в URL карточки не совпал с id в API.
3. Библиотека не загрузилась: 404 chunk, CSP, смешанный контент.
4. Время в секундах вместо миллисекунд — свечи «улетели».
5. CORS: curl зелёный, браузер красный.

Отладка без UI быстрее: запросите history curl/httpie, проверьте монотонность time и свежесть последнего бара. Потом уже консоль браузера. Для потока тиков смотрите WebSocket.

Таймфреймы и дыры

Крипта торгуется круглосуточно, но источник может отдавать дыры при инциденте биржи. Решите, как datafeed закрывает разрывы: оставлять gap или синтетить пустые бары — и документируйте. Пользователи сравнивают ваш график с привычным терминалом; расхождение в дырах вызывает вопросы раньше, чем расхождение в индикаторах.

Не обещайте в UI таймфреймы, которых нет в API. Серый пункт меню лучше, чем вечная загрузка H4 при отсутствии данных.

Встраивание на страницы

На карточке монеты график — главный визуальный якорь ниже заголовка и цены. На главной витрины достаточно спарклайна или мини-графика топ-монеты; полный Charting Library на каждый ряд таблицы убьёт мобильный трафик. Тикер в шапке цены не заменяет: тикер.

Индекс настроения рядом уместен как контекст, не как ось графика: Fear & Greed.

Нагрузка и мобильные клиенты

Тяжёлая библиотека + автоподписка на десятки символов = лаги на телефоне. Грузите full chart по требованию, для списков — лёгкие canvas/sparklines. Отключайте индикаторы по умолчанию на слабых профилях. Серверную историю отдавайте постранично/лимитом баров, не выгружайте год M1 одним ответом.

CDN для static библиотеки полезен; для personalized history — осторожный кэш с ключом symbol+tf.

Связка с торговлей

Если с карточки ведёте в терминал брокера, прокидывайте тот же symbol в query. Пользователь не должен заново искать BTC среди сотен инструментов. Контуры: бинарные опционы, Forex, оболочка white label. В терминале снова проверьте, что торговая цена и график не из разных кэшей.

Демо-счёт для показа графика «в деле» удобнее сразу с учебным балансом: человек двигает сделку, видит историю — доверие к витрине выше, чем у статичного лендинга.

Приёмка

Чеклист: три монеты, три таймфрейма, мобильная ширина, обрыв сети с восстановлением, совпадение last шапка/график, отсутствие ошибок CORS в консоли. Зафиксируйте URL datafeed и таблицу символов в передаче заказчику.

Правки шаблона карточки на VDS — через SFTP-диск или онлайн-редактор. Панель питания сервера, если график «лёг» вместе с машиной — MicroPanel.

График крипты на своём домене честен ровно настолько, насколько честна лента. Держите datafeed, символы и доступ с домена в одном согласованном контуре — и холст перестанет быть главной болью поддержки.

Precision, объём, индикаторы

Для SHIB и подобных парнулевая precision ломает шкалу: свечи превращаются в плоскую линию. Задайте формат цены в словаре инструментов и проверьте на тонких альтах, не только на BTC. Обём: если API не отдаёт volume, отключите pane объёма, а не рисуйте нули — нулевая гистограмма выглядит как баг источника.

Предустановки индикаторов сохраняйте per user в localStorage или в профиле, но дефолт для анонима держите лёгким. Витрина и терминал могут делить библиотеку, но не обязаны делить один и тот же layout: у трейдера другие задачи, чем у читателя карточки.

Логируйте медленные history-запросы (slow query / upstream time). Когда M1 за год отдают одним куском, график «думает» десятки секунд и пользователи обновляют страницу, умножая нагрузку. Лимит баров и догрузка при скролле назад решают это лучше, чем увеличение PHP timeout.

Права и публичный доступ

Публичный график на витрине не требует логина; график в терминале — требует счёт. Не смешивайте endpoint history с разными лимитами без разнесения путей. Боты, сосущие M1 по всем монетам, положат origin — rate limit и CDN для статики библиотеки обязательны. Подпись «данные рынка могут запаздывать» уместна на публичной карточке.

Сверьте deep link: `/chart/BTCUSDT` и редиректы со старых slug. Битые ссылки из тикера убивают доверие быстрее, чем медленная отрисовка.

Критерий сдачи графика: три символа, три ТФ, mobile, CORS чист, last совпал с шапкой, history лимит не душит. Дальше — только контент карточек и SEO.

Сопровождение графиков

После каждого обновления библиотеки прогоняйте один BTC и один альт с мелкой ценой. Смотрите console на deprecated API datafeed. Обновляйте documentation mapping символов. Если добавили акционные инструменты рядом с криптой, не забудьте precision и сессии — иначе «криптографик» начнут ругать за фондовый символ с дырами на выходных.

Сохраняйте server-side лог запросов history с user-agent: отличите мобильный Safari от бота, когда будете ужесточать лимиты.