Интерактивная диаграмма свечей с использованием элемента холста HTML и ванильного JavaScript
С некоторыми из недавних ценовых рекордов Биткойна и других криптовалют, а также с короткими сжатиями GameStop и AMC Reddit, графики цен были повсюду в новостях. Обычно при просмотре рыночных данных в реальном времени информация отображается на графиках свечей.
Графики свечей всегда казались мне очень запутанными, потому что я никогда не утруждал себя их пониманием. Однако когда я наконец это сделал, я понял, что на самом деле их довольно легко и просто читать.
Недавно я занимался случайным майнингом с NiceHash, и, поскольку мне нравятся графики и диаграммы, я решил создать собственное решение для свечных диаграмм с помощью JavaScript, чтобы я мог создавать собственные графики цен на биткойны.
Что такое свечные графики?
Я предполагаю, что большинство из вас знает, что такое свечные графики и как их читать, но в любом случае вот краткий обзор: свеча суммирует, что произошло с ценой акции / криптовалюты в течение фиксированного временного интервала, например 1 день, 1 час, или 5 минут.
Основное тело свечи показывает цену открытия и закрытия (цена в начале временного интервала и цена в конце). Если цена закрытия выше цены открытия, т.е. цена выросла, свеча будет зеленой, если цена упала, свеча будет красной.
«Фитиль» (маленький столбик, выступающий из свечи) отображает самую высокую и самую низкую цену в пределах интервала, например, короткий скачок цены в середине периода времени.
Реализация
Вместо того, чтобы использовать стороннее решение для рисования графиков свечей (например, графики Google могут рисовать символы свечей), я решил реализовать собственное решение с нуля. Хотя пользовательская реализация будет иметь меньше функций, чем большая библиотека, она позволяет избежать добавления другой зависимости в проект. Кроме того, вы можете настроить собственное решение в большей степени, чтобы оно идеально подходило для ваших проектов.
Оптимальный вариант интерактивных элементов сайта - холсты. Вы можете легко рисовать простые двухмерные фигуры и текст, и это все, что нам понадобится для графиков свечей.
Сложная часть создания диаграмм - это преобразования координат. Нам нужно перейти от значений времени и цены к координатам x и y и наоборот. Чтобы преобразовать значение цены в ее координату y, нам нужно вычесть самую низкую глобальную цену, затем масштабировать по высоте холста, разделенной на глобальный диапазон цен, и, наконец, инвертировать значение, потому что наша диаграмма свечей имеет ось Y, которая идет вверх, а координаты y холста уменьшаются. Полное уравнение также включает поля по краям и выглядит следующим образом: return this.canvasHeight — this.marginBottom — (priceValue-this.lowestPriceValue) * this.usableCanvasHeight/this.globalPriceRange;. Преобразование других значений выглядит очень похоже, см. Полный код ниже.
Рисование на холсте не очень сложно, и нам нужно только знать, как нарисовать линию и прямоугольник, чтобы нарисовать свечу. Для этого мы можем создать две небольшие вспомогательные функции:
В обоих случаях мы начинаем путь, устанавливаем цвет, затем используем moveTo и lineTo для рисования линии или rect для прямоугольника и заканчиваем рисование с помощью stroke или fill. Есть хороший трюк, чтобы нарисовать линии шириной в 1 пиксель: нам нужно добавить 0,5 к координатам, чтобы линия была выровнена по центру и не переполнялась на соседние пиксели, что дает гораздо более чистый результат. Теперь все, что нам нужно знать, это как рисовать текст, что можно сделать с помощью функции fillText, и у нас есть все, что нам нужно знать, чтобы нарисовать полный график свечей.
Поскольку графики свечей за более длительные периоды времени могут охватывать большие ценовые диапазоны, неплохо получить дополнительную информацию, наведя курсор на график. Поэтому я добавил эффект наведения курсора. Когда вы перемещаете мышь, перекрестие следует за ее положением и выделяет точное время и значение цены по краям. Он также привязывается к свечам на временной оси, и свеча в зависании меняет свой цвет. Наконец, рядом с ним появляется небольшое всплывающее окно с точными ценами открытия, закрытия, максимума и минимума зависшей свечи.
использование
Использовать класс свечных графиков просто. Фактически, моей главной целью было создание простого в использовании решения. Все, что ему нужно, это элемент холста HTML, затем вы создаете новый класс диаграммы свечей, добавляете данные и вызываете функцию рисования.
Во время разработки я тестировал класс со случайными данными, но использование реальных рыночных данных имеет гораздо больший смысл. К счастью, существует множество API-интерфейсов, которые можно использовать для получения текущих и исторических данных о свечах. Я использую для этого Binance API, но есть много других вариантов API для криптовалют и акций.
Одна функция, которую я еще не тестировал, - это использование класса свечных графиков для данных о реальном рынке. Binance предлагает WebSocket API для получения обновлений свечей в реальном времени, и я хотел бы в будущем создать свой собственный тикер цены биткойнов с его помощью. С небольшой дополнительной логикой для обработки обновлений в реальном времени класс свечных графиков пригодится для этого.
Создавать графики свечей в JavaScript легко и удобно, а холсты HTML - отличное решение для небольших интерактивных элементов на веб-сайте.
Мне нравятся всевозможные данные, диаграммы и диаграммы, поэтому наличие моего собственного решения для свечных диаграмм будет полезно для будущих проектов.
Ресурсы
Вам нравится такой контент? Получите неограниченный доступ ко всем историям и поддержите меня и других писателей, присоединившись к Medium. Если вы зарегистрируетесь по этой ссылке, часть вашего членского взноса пойдет мне.
