Дизайн графиков. Линии

Вторая часть рассказа о дизайне графиков. После того, как дизайнер определился с выбором осей и координатной сетки, пора заняться дизайном формы самого графика. В статье рассказывается о выборе толщины линии, сканерах и спредах, финансовых индикаторах и знаменитых японских свечах.
Андрей Маркелов
Андрей Маркелов
Дизайнер интерфейсов, переводчик шрифтов, автор статей

Линейные графики

График в виде ломаной линии – наиболее популярная модель, с которой любой человек знаком со школы.

Важнее всего правильно выбрать толщину линии. В этом вопросе большую роль играет личный вкус. Автор использует толщину линии 1.3 пикселя, поскольку привык к воздушной легкости в интерфейсах. Если читатель привык к толстым графикам, которые строит Excel, тонкие линии могут показаться ему сложными для восприятия.

Отдельно стоит объяснить, что дробные пиксели существуют. При выводе линии толщиной 1.3 пикселя графическая система рисует линию толщиной 1 пиксель и добавляет к ней обводку толщиной 1 пиксель с прозрачностью 30 %. Из-за этого линия кажется тоньше.

Второй параметр ломаной линии – скругление изломов. Скругление особенно заметно на толстых линиях, но существует поверье, что глаз считывает ювелирные изыски на любой толщине и это влияет на восприятие.

Несколько графиков

Часто сравнивают два графика между собой. Например, это может быть график акции и рыночный индекс. Если просто добавить второй график другого цвета поверх первого, то оба графика будут плохо читаться.

Поэтому первому графику добавляют тень в виде градиентой заливки. Цвет верхней точки должен иметь прозрачность около 15 %. Градиент должен спускаться до горизонтальной оси до нулевой прозрачности.

Линиям присваивают обводку, равную толщине линии. Это делает для того, чтобы избежать цветового шума на стыке двух линий разных цветов.

В редких случаях приходится сравнивать три графика. Большее число линий практически никогда не выводят одновременно.

Сканер и спреды

По статичному графику можно быстро определить только последнюю цену, ведь она выделена и подписана на вертикальной шкале.

Чтобы узнать цену в любой точке графика, используется сканер. Это вертикальная линия, которая накладывается поверх графика и следует за курсором мыши. В месте пересечения сканера с графиком ставится точка, справа от которой выводится цена в этой точке. Под сканером на шкале времени выводится дата в этой точке.

Сканер хорошо работает и для нескольких графиков. Цены в точке выводятся на цветном фоне, причем цвет соответствует цвету линии.

При сравнении двух графиков часто требуется узнать спред – разницу между графиками в конкретной точке. Спред выводится на сканере, справа от цены, со знаком плюс или минус.

Спред выделяется цветным фоном, причем цвет соответствует той линии, до которой считается спред.

Индикаторы

Не всегда удобно работать со спредом в числовом виде. Приходится водить курсором по всей длине графика, чтобы увидеть спред в каждой точке.

В финансовых системах используются индикаторы. Это мини-графики, которые размещаются под основным графиком. Индикаторы не обязательно рисуются в виде линий, часто используется столбчатая диаграмма.

Спред можно представить в виде индикатора. Тогда аналитик сможет увидеть график спреда за весь диапазон.

Самый популярный индикатор в финансовых системах – объем торгов. Этот индикатор настолько важен, что его выводят по умолчанию в плоскости самого графика, не вынося в отдельный мини-график. 

Объем торгов изображается в виде столбчатой диаграммы. Столбец выделяется зеленым, если цена шла вверх, и красным, если цена шла вниз.

Трейдеры используют десятки индикаторов. Один из самых популярных – индикатор относительной силы RSI.

Для каждой точки графика вычисляется отношение среднего роста к среднему падению цены за последние 15 дней. В индикаторе рисуется график полученных значений. Выделяется цветная зона в диапазоне от 30 до 70 условных единиц.

Считается, что если график RSI выходит за пределы цветной зоны вверх, то цена актива слишком высокая, и его нужно продавать. Если график выходит за цветную зону вниз, то актив слишком дешев, и его можно покупать.

Свечные графики

Стандарт любой финансовой системы – графики в виде японских свечей.

Японские свечи – это особый вид столбчатой диаграммы. Каждая свеча состоит из тела и фитиля. Тело рисуется в виде прямоугольника, фитиль – в виде линии, которая пронзает тело насквозь и торчит сверху и снизу.

Тело свечи показывает, как менялась цена в течение периода. Фитиль показывает, как цена пыталась измениться, но откатывалась назад.

Допустим, что утром цена акции была 200 долларов, а вечером составила 300 долларов. Тогда тело свечи следует нарисовать от 200 до 300 долларов, а фитилей не будет.

Предположим, что цена в обед достигла 400 долларов, но вечером все равно опустилась до 300. Тогда свеча будет с верхним фитилем.

Наконец, представим, что цена после обеда опустилась до 100 долларов, но вечером вернулась к 300. Тогда свеча будет с двумя фитилями.

Первая цена за период называется ценой открытия, а последняя – ценой закрытия. До сих пор свеча была зеленой, ведь цена закрытия 300 долларов выше цены открытия 100 долларов. Если было бы наоборот, то свеча была бы красной.

График в виде японских свечей считается стандартом для отображения колебаний цен. Его используют почти все аналитики, поскольку свеча показывает колебания цены за день со всеми нюансами в лаконичной форме.

При наведении на свечу сканер отображает четыре значения: цену открытия и закрытия, минимальную и максимальную цену.

В завершение – пример технического анализа графика. Современные системы способны выявлять тренды, находить фигуры и волны автоматически. Стоит внедрить такой инструмент для автоматического проведения технического анализа по графику. Аналитику остается только включить результаты анализа подобно индикатору.

Поделиться
Отправить
Запинить

Обсуждение