Визуализация данных широко применяется в различных областях. Одной из таких областей является финансовая торговля, где биржевые графики необходимы для разумного анализа рыночных данных и принятия решений. Независимо от того, инвестируете ли вы в акции или нет, я уверен, что вы сталкивались с такой графикой или даже нуждались в ее создании прямо сейчас. Итак, вы хотите знать, как сделать биржевую диаграмму? Я готов показать вам простой путь, используя данные о ценах на акции Tesla и JavaScript! Присоединяйтесь ко мне на протяжении всего этого урока, и вы научитесь быстро создавать элегантные интерактивные биржевые диаграммы JS, подобные той, что вы видите на картинке.
Что такое биржевая диаграмма?
Большинство из вас может знать основы, но чтобы убедиться, что мы все на одной странице, я кратко расскажу вам, что такое биржевая диаграмма.
Биржевая диаграмма в основном представляет движение цены или объема акции с течением времени путем нанесения значений цены или объема по оси Y и периода времени по оси X.
Графики акций играют очень важную роль, помогая инвесторам определять тенденции и принимать правильные решения о покупке и продаже на быстро меняющихся финансовых рынках.
Наиболее распространенным типом диаграммы, используемой для отображения акций, является биржевая диаграмма свечей. Но вы также можете использовать «открыто-высоко-низко-закрыто» (OHLC), линейную, площадную, столбцовую или другие формы визуализации рядов в зависимости от конкретного случая и задачи.
График акций, который будет создан
Tesla — компания, которая всегда в новостях. За эти годы он вырос в геометрической прогрессии, и это в значительной степени отразилось на стоимости его акций с течением времени. Итак, для этого урока я собираюсь построить биржевую диаграмму, чтобы продемонстрировать движение цены Tesla Inc. Я также покажу вам, как добавлять различные технические индикаторы, и проиллюстрирую эффект недавней шумихи вокруг продажи акций Илоном Маском.
Вот окончательная версия биржевого графика JavaScript, чтобы подготовить вас к следующим шагам.
Построение биржевой диаграммы с помощью JavaScript
Создание интерактивной биржевой диаграммы с нуля может быть довольно сложной задачей, но становится намного проще и быстрее с помощью соответствующего инструмента визуализации данных. Например, есть некоторые полезные JavaScript-библиотеки графиков, которые позволяют создавать финансовые графики, и вы можете работать с тем, что соответствует вашим потребностям.
В этом уроке я использую одну из хороших — JS-библиотеку AnyChart, которая имеет несколько отличных опций для биржевых диаграмм вместе с аккуратной документацией к ним и бесплатна для любого некоммерческого и образовательного использования.
Хотя это и не обязательно, некоторые навыки работы с HTML и JavaScript могут помочь быстрее понять концепции. Но все довольно просто и будет подробно объяснено, так что не о чем беспокоиться, даже если вы новичок.
Первый звонок прозвенел, и пришло время создать биржевую диаграмму!
1. Создайте HTML-страницу
Первое, что я делаю, это создаю HTML-страницу для хранения диаграммы и добавляю элемент div для отображения диаграммы. Этому блочному элементу должен быть присвоен уникальный идентификатор, чтобы на него можно было ссылаться в коде позже.
Я также установил стиль div, где я определяю ширину и высоту как 100% с 0 полями и отступами. Это отобразит биржевую диаграмму на весь экран.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Stock Chart</title>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. Добавьте необходимые скрипты
Поскольку я использую библиотеку диаграмм, мне нужно ссылаться на соответствующие сценарии JS из этой библиотеки для биржевой диаграммы. Помните, что эти скрипты включены в раздел head HTML-страницы.
Для биржевого графика мне нужно добавить несколько скриптов. Во-первых, я включаю модули AnyChart ядро и фонд. Далее я добавляю модуль Адаптер данных, который помогает загружать данные. Наконец, я включаю модули UI и Exports для элементов пользовательского интерфейса и для включения функций экспорта, которые позволяют сохранять диаграмму в виде изображения или извлекать базовые данные в файл данных.
Чтобы стандартные функции пользовательского интерфейса работали правильно, мне также необходимо связать соответствующие таблицы стилей.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Stock Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-exports.min.js"></script>
<link href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the JS Stock Chart will come here
</script>
</body>
</html>
3. Подготовьте данные
На этом биржевом графике я хочу визуализировать ежедневные данные о ценах на акции Tesla Inc. (TSLA), поэтому я беру их из Yahoo Finance и CSV-файл данных здесь.
Все приготовления завершены, так что давайте приступим к торговле или, в нашем случае, к написанию кода для построения графиков акций на JavaScript!
4. Напишите необходимый код JavaScript
Для начала я заключаю код в функцию с именем anychart.onDocumentReady(). Это гарантирует, что код не будет выполнен до полной загрузки страницы. Затем я загружаю файл данных с помощью функции anychart.data.loadCsvFile().
Затем я создаю таблицу данных и добавляю в нее загруженные данные, но прежде чем я смогу использовать эти данные для своей биржевой диаграммы, мне нужно их отобразить. Поскольку я создаю биржевую диаграмму в виде свечей, я сопоставляю значения открытия, максимума, минимума и закрытия.
anychart.onDocumentReady(function () {
anychart.data.loadCsvFile( 'https://gist.githubusercontent.com/shacheeswadia/cd509e0b0c03964ca86ae7d894137043/raw/5f336c644ad61728dbac93026f3268b86b8d0680/teslaDailyData.csv',
function (data) {
// create data table on loaded data
var dataTable = anychart.data.table();
dataTable.addData(data);
// map loaded data for the candlestick series
var mapping = dataTable.mapAs({
open: 1,
high: 2,
low: 3,
close: 4
});
}
);
});
Теперь я определяю биржевую диаграмму, рисую ее и устанавливаю линии сетки. Поскольку числа важны при просмотре значений биржевых данных, я включаю все линии сетки для лучшей читабельности.
// create stock chart var chart = anychart.stock(); // create first plot on the chart var plot = chart.plot(0); // set grid settings plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);
Теперь идет основная часть создания сериала. Это делается с помощью функции рисования свечей с сопоставлением, которое я определил ранее. Я даю серии имя и добавляю значок легенды.
var series = plot.candlestick(mapping)
.name('Tesla');
series.legendItem().iconType('rising-falling');
// create scroller series with mapped data
chart.scroller().candlestick(mapping);
Графики акций имеют значения за длительный период времени. Поэтому я добавляю ряд прокрутки под основной график, который позволяет пользователю указать диапазон дат и более внимательно изучить значения этих данных. Я установил диапазон в один год для отображения по умолчанию.
Чтобы упростить задачу для пользователя, я предоставляю средство выбора диапазона, в котором пользователь может вручную вводить даты, и средство выбора диапазона, в котором часто используемые периоды времени можно выбрать одним щелчком мыши.
// set chart selected date/time range
chart.selectRange('2020-11-27', '2021-11-26');
// create range picker
var rangePicker = anychart.ui.rangePicker();
// init range picker
rangePicker.render(chart);
// create range selector
var rangeSelector = anychart.ui.rangeSelector();
// init range selector
rangeSelector.render(chart);
Наконец, я даю диаграмме название, ссылаюсь на ранее определенный контейнер диаграммы и рисую диаграмму.
// sets the title of the chart
chart.title('Tesla Inc. Stock Chart');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
Это последний звонок, и красивая, функциональная биржевая диаграмма создана!
Вы можете быстро понять, что цены на акции Tesla колебались в прошлом году, но в целом тенденция положительная. Наведите указатель мыши на график, чтобы увидеть функциональную подсказку, показывающую дату, а также значения открытия, максимума, минимума и закрытия. Это одна из многих полезных функций, уже доступных здесь.
Вы можете увидеть эту начальную версию графика акций JS на CodePen [и на AnyChart Playground] с полным кодом.
Настройка графика акций JavaScript
Этот интерактивный биржевой график уже выглядит довольно хорошо и демонстрирует полезную информацию, которую можно легко изучить. Но это только начало.
Следуйте за мной, пока я покажу вам, как настроить биржевую диаграмму JS, добавив дополнительные функции (изменив ряды, добавив технические индикаторы, аннотации и т. д.) и настроив ее визуализацию всего за несколько простых действий.
А. Тип серии и условная раскраска
Биржевой график чаще всего представлен свечами. Но это не обязательно. Здесь я хочу показать вам, как быстро переключить тип визуализации данных со свечного биржевого графика, где отображаются все четыре значения (открытие, максимум, минимум и закрытие), на линейный график, где вы можете указать, какие значение, которое вы хотите отобразить (по умолчанию это первое значение, т. е. цена открытия в данном случае). Поскольку представлено только одно значение, сопоставление, которое я сделал ранее, здесь не требуется.
Итак, я просто указываю серию как «строку» и напрямую передаю данные в качестве параметра.
Чтобы продемонстрировать рост и падение цен на линейном графике акций, я добавляю условную окраску, где я указываю, что цвет линии будет красным, если цена снижается, и зеленым, если она растет. Это можно очень удобно сделать с помощью встроенных функцийrisingStroke иfallStroke. Можно указать следующие параметры: цвет обводки, ширину обводки, тип обводки и окончания обводки.
Я также меняю серию прокрутки на представление линейного графика.
// create and setup line series
var lineSeries = plot.line(dataTable)
.name('Tesla');
// set rising/falling and normal stroke settings
lineSeries.risingStroke('#2FA85A', 3, null, 'round', 'round');
lineSeries.fallingStroke('#EE4237', 3, null, 'round', 'round');
// create scroller series
chart.scroller().line(dataTable);
Вы можете поближе познакомиться с этой новой версией графика акций JS на CodePen [и на AnyChart Playground]. На следующих шагах я вернусь к построению серии свечей для представления данных.
B. Технические индикаторы: EMA и Envelope
Трейдеры и инвесторы часто полагаются на технический анализ, чтобы определить тенденции, понять, является ли финансовый инструмент перекупленным или перепроданным, и решить, когда продавать или покупать. И есть несколько технических индикаторов, которые могут в этом помочь. Давайте посмотрим, как быстро добавить их на биржевые графики.
Я хочу включить два популярных технических индикатора: экспоненциальную скользящую среднюю (EMA) и конверт. Оба этих индикатора можно очень легко нарисовать с помощью минимального кода.
Все, что мне нужно сделать, это сопоставить значение данных, которое я хочу использовать, которое я указываю в качестве значения закрытия, указать ширину и цвет штриха, и линия EMA будет нанесена на график свечи. Я могу указать период EMA, и значение по умолчанию равно 50, если не задано пользовательское значение.
Точно так же для индикатора Envelope я просто задаю график, а нижняя и верхняя линии полосы рисуются поверх графика.
// create EMA indicators with period 50
plot
.ema(dataTable.mapAs({ value: 4 }))
.series()
.stroke('1.5 #455a64');
// create envelope indicator
chart.plot().env(mapping);
Посмотрите, как выглядит эта версия графика акций JS с EMA и Envelope ниже. Вы также можете поиграть с его интерактивной версией (и его полным кодом) на CodePen [или на AnyChart Playground], где вы можете, например, скрыть и показать эти дополнительные линии технического индикатора, нажав на соответствующую легенду. предметы.
C. Индикатор MACD
MACD или конвергенция скользящей средней. Дивергенция — это индикатор импульса, обычно отображаемый с помощью сигнальной линии. Он рассчитывается с 26-периодной и 12-периодной EMA и указывает на признаки покупки или продажи, когда пересекает сигнальную линию выше или ниже соответственно.
Я рисую индикатор MACD в виде отдельного графика, представляющего линию MACD, сигнальную линию и гистограмму в виде диаграммы с областями под свечной диаграммой. Первое, что я делаю, это отключаю ось X для свечного графика, так как она будет отображаться на графике MACD. Теперь я определяю второй график и сопоставляю значения данных.
Затем я устанавливаю тип серии как гистограмму области и определяю параметры обводки и заливки для положительных и отрицательных значений. Наконец, я просто установил высоту этого графика как 40% от общей суммы.
// second plot to show macd values
var indicatorPlot = chart.plot(1);
// map the values
var macdIndicator = indicatorPlot.macd(mapping);
// set series type for histogram series.
macdIndicator.histogramSeries('area');
macdIndicator
.histogramSeries()
.normal()
.fill('green .3')
.stroke('green');
macdIndicator
.histogramSeries()
.normal()
.negativeFill('red .3')
.negativeStroke('red');
// set second plot's height
indicatorPlot.height('40%');
D. Удивительный осциллятор
Awesome Oscillator (AO) показывает силу или слабость инструмента, сравнивая рыночный импульс с общими колебаниями цен на акции в течение большего периода времени.
Я также рисую этот индикатор как второй график под основным графиком, как и в предыдущем шаге. Я показываю вам это только для того, чтобы понять, как легко можно строить графики различных технических индикаторов.
Точно так же, как и для графика MACD, я определяю второй график и сопоставляю данные, используя здесь функцию ao для индикатора Awesome Oscillator.
Я задаю цвета штриховых линий зеленым для повышения и красным для падающих цен и устанавливаю высоту графика на 40%.
// create awesome oscillator series
var aoIndicator = indicatorPlot.ao(mapping);
// set rising and falling stroke settings
aoIndicator.series().risingStroke('green');
aoIndicator.series().fallingStroke('red');
// set second plot's height
indicatorPlot.height('40%');
Если вы наведете курсор на верхнюю или нижнюю диаграмму, вы увидите два значка в правом верхнем углу, которые позволяют перемещать этот график вверх или вниз, а также отображать его в полноэкранном режиме, скрывая другой график.
Вы можете поиграть с этими версиями биржевых диаграмм JS на CodePen, с графиком MACD здесь [и на Игровой площадке AnyChart] и графиком AO здесь [и на Игровой площадке AnyChart].
Е. Цветовая палитра
Простой и эффективный способ персонализировать график акций — изменить цвета графика. В библиотеке AnyChart есть готовые темы оформления, поэтому мне достаточно добавить нужный скрипт в раздел head и просто установить его в коде. Здесь я применяю монохромную тему.
<script src="https://cdn.anychart.com/releases/8.11.0/themes/monochrome.min.js"></script>
...
// set chart theme
anychart.theme('monochrome');
Посмотрите, как утонченно и отполировано выглядит биржевая диаграмма!
Теперь, в финальной настройке, я покажу вам еще одну крутую вещь, которая часто востребована в биржевых графиках.
F. Иллюстрация и аннотация
В биржевых диаграммах может потребоваться добавление пользовательских объектов, которые дополнительно что-то отображают или выделяют. Например, в JS-библиотеке AnyChart есть полезная функция, позволяющая создавать рисунки и аннотации.
Здесь я покажу, как выделить конкретный период, а также снабжу его пояснительной запиской. Я продемонстрирую время, когда цены на акции Tesla упали из-за того, что Илон Маск продал кучу собственных акций.
Для начала я определяю аннотацию, а затем создаю прямоугольник. Я устанавливаю различные параметры, такие как ширина и высота прямоугольника, а также даты, указывающие на начало и конец прямоугольника. Я также устанавливаю значения обводки и заливки, где я выбираю красный цвет из логотипа компании.
Затем я создаю метку аннотации под прямоугольником. Я снова определяю, где начать метку, размеры, цвета и, конечно же, текст.
// create annotation rectangle
annotation.rectangle({
// X - part of the first anchor
xAnchor: '2021-11-08',
// Y - part of the first anchor
valueAnchor: 950,
// X - part of the second anchor
secondXAnchor: '2021-11-26',
// Y - part of the second anchor
secondValueAnchor: 1250,
// set stroke settings
stroke: '3 #c20000',
// set fill settings
fill: '#c20000 0.25'
});
// create annotation and set settings
annotation
.label()
.xAnchor('2021-11-26')
.valueAnchor(950)
.anchor('right-top')
.offsetY(5)
.padding(6)
.text('Elon Musk sells Tesla stock worth $1.05 billion')
.fontColor('#fff')
.background({
fill: '#c20000 0.75',
stroke: '0.5 #c20000',
corners: 2
});
Это была просто простая иллюстрация. Если вы хотите узнать больше о том, как такие варианты рисования и аннотации могут выглядеть и работать в реальной жизни, поиграйте с этим демонстрационным инструментом.
И это завершает настройку, и красивая, интерактивная и проницательная диаграмма акций JS готова. Взгляните на окончательную версию ниже. Разве это не похоже на то, на что вы будете вкладывать свои деньги? Вы можете просмотреть полный код HTML/CSS/JavaScript и продолжить настраивать этот биржевой график по своему вкусу на CodePen [или на AnyChart Playground].
Заключение
Как видите, создание стильного интерактивного биржевого графика с техническими индикаторами и аннотациями на первый взгляд кажется сложным, но в реальности может быть довольно простым и удобным. JavaScript-библиотек для построения диаграмм много, и процесс построения биржевых диаграмм одинаков для большинства тех, которые поддерживают этот тип диаграмм. Таким образом, вы можете выбрать, какой из них использовать, исходя из ваших требований и конкретных задач.
В этом уроке я показал вам, как создать один тип биржевого графика — свечной — и объяснил, как быстро изменить ряд, сделав из него линейный. Но есть и другие интересные виды биржевых диаграмм, которые вы можете посмотреть самостоятельно, например, здесь.
Тогда продолжайте, создайте биржевые графики и посмотрите, сможете ли вы предсказать, что произойдет дальше. Конечно, ни одна конкретная акция не может быть верной ставкой на фондовых рынках. Но научиться его составлять определенно гарантированно будет выигрышным решением! Пожалуйста, свяжитесь с нами, если вам нужна помощь.
Публикуется с разрешения Шачи Свадиа. Первоначально появилась на Лучшем программировании под заголовком Создание биржевой диаграммы с помощью библиотеки AnyChart JavaScript 4 января 2022 г.
Узнайте больше о биржевых диаграммах в Chartopedia, бесплатном справочнике по типам диаграмм. Ознакомьтесь с другими руководствами по построению диаграмм JavaScript.
Хотите создать классный гостевой пост для нашего блога? Нам не терпится услышать от вас, чтобы обсудить ваши идеи.
Первоначально опубликовано на https://www.anychart.com 24 февраля 2022 г.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
