Создание интерактивных графиков с использованием Plotly.js, часть 1: Начало работы

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

В серии под названием Начинаем работу с Chart.js вы узнали, как использовать Chart.js для легкого создания гибких диаграмм на основе холста. Серия охватывала семь основных типов диаграмм, предлагаемых библиотекой. Однако вам может потребоваться создать более сложные диаграммы с дополнительной функциональностью, чтобы сделать эти диаграммы интерактивными.

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

Зачем использовать Plotly.js?

Plotly.js предлагает множество функций, которые позволяют изучать библиотеку, которая стоит усилий. Это высокоуровневая декларативная библиотека, построенная поверх d3.js и stack.gl. Вот список функций, которые делают Plotly одной из лучших библиотек графиков JavaScript:

С помощью Plotly.js можно легко создавать интерактивные диаграммы. Любая диаграмма, которую вы создаете в библиотеке, оснащена такими функциями, как масштабирование, панорамирование, автомасштабирование и т.д. Эти функции очень полезны, когда вы хотите изучать диаграммы с большим количеством построенных точек. Все эти события отображаются в API, поэтому вы можете написать собственный код для выполнения своих собственных действий при срабатывании любого из этих событий.
Высокая производительность при построении большого количества точек делает Plotly.js отличным выбором, когда вам нужно нарисовать большой объем данных. Поскольку большинство диаграмм создаются с использованием SVG, вы получаете достойную совместимость между браузерами и возможность экспортировать высококачественные изображения любого графика. Однако привлечение большого количества элементов SVG в DOM может отрицательно сказаться на производительности. Библиотека использует stack.gl для создания высокопроизводительных 2D и 3D-диаграмм.
Все созданные 3D-диаграммы с помощью WebGL будут в полной мере использовать все возможности, предлагаемые графическим процессором.
Все графики Plotly.js полностью настраиваются. Все, от цветов и меток до линий сетки и легенд, можно настроить с помощью набора атрибутов JSON. Вы узнаете, как настроить различные типы диаграмм в следующих трех частях серии.

Установка Plotly

Прежде чем мы начнем использовать Plotly.js, нам нужно сначала установить его. Существует множество различных способов установки библиотеки.

Вы можете напрямую клонировать библиотеку, используя следующую команду, а затем использовать файлы, расположенные в папке dist.

1	git clone https://github.com/plotly/plotly.js.git

Другой вариант - выполнить установку с помощью npm, выполнив следующую команду:

1	npm install plotly.js --save

Вы также можете использовать CDN Plotly.js и напрямую ссылаться на библиотеку. Как правило, вы хотите использовать скомпилированный и мини-файл с последней версией библиотеки. Однако вы также можете ссылаться на определенную версию библиотеки в CDN. Вот пример:

1	<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
2
3	<!-- Install a specific version -->
4	<script type="text/javascript" src="https://cdn.plot.ly/plotly-1.9.0.min.js"></script>

На момент написания этого урока последняя версия библиотеки - 1.28.3. Размер файла после минимизации и сжатия библиотеки составляет 666 кБ. Неограниченная и несжатая версия имеет размер 5,4 МБ. Как вы можете видеть, длинный список функций, предлагаемых этой библиотекой, много весит.

Начиная с версии 1.15, вы можете выбирать из разных частичных пакетов, каждый из которых позволяет создавать определенные типы диаграмм. Существует семь различных пакетов: basic, cartesian, geo, gl3d, gl2d, mapbox, и finance. Вы можете получить ссылку CDN для этих пакетов, используя следующую строку:

https://cdn.plot.ly/plotly-bundleName-latest.min.js

// Therefore the basic bundle becomes:
https://cdn.plot.ly/plotly-basic-latest.min.js

// and the cartesian bundle becomes:
https://cdn.plot.ly/plotly-cartesian-latest.min.js

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

basic: Этот комплект содержит модули scatter, bar и pie. Сжатая и уменьшенная версия этого пакета имеет размер 215,7 кБ.
cartesian: этот комплект содержит диаграммы scatter, bar, box, heatmap, histogram, histogram2d, histogram2dcontour, pie, contour и scatterternary. Сжатая и уменьшенная версия этого пакета имеет размер 238,2 кБ.
geo: Этот комплект позволяет создавать различные типы карт, связанных с картой, в JavaScript. Сжатая и уменьшенная версия этого пакета имеет размер 224,1 кБ.
gl3d: этот комплект позволяет создавать различные типы 3D-карт с использованием модулей трассировки scatter, scatter3d, surface and mesh3d. Сжатая и уменьшенная версия этого пакета имеет размер 354 кБ.
gl2d: Этот комплект содержит модули scatter, scattergl, pointcloud, heatmapgl, contourgl и parcoords. Он имеет размер 362,9 кБ после минимизации и сжатия.
mapbox: Этот комплект содержит модули scatter и scattermapbox. Размер файла в этом случае составляет 328,6 кБ.
finance: финансовый комплект может использоваться для создания временных рядов, подсвечника и других типов диаграмм для составления финансовых данных. Этот модуль состоит из модулей scatter, bar, histogram, pie, ohlc and candlestick.

Использование Plotly для создания диаграммы

После того, как вы определили графики, которые хотите создать и загрузили соответствующий пакет на своей веб-странице, вы можете начать создавать свои собственные диаграммы с помощью Plotly.js. Первое, что вам нужно сделать, это создать пустой элемент div, в котором должен быть нарисован график.

Подготовьте некоторые данные, которые вы хотите отобразить на диаграмме. В этом примере я просто использую некоторые случайные числа для создания диаграммы. Наконец, вы должны вызвать функцию plot() и предоставить ей всю информацию, такую как div контейнера, данные и параметры макета. Вот код для создания очень простой линейной диаграммы:

var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [1, 2, 3, 4, 16, 17, 26],
  y: [1, 40, 9, 60, 4, 20, 10],
  type: 'scatter'
};

var data = [traceA];

var layout = {
  title:'A Line Chart in Plotly'
};

Plotly.plot( lineDiv, data, layout );

Все диаграммы в Plotly.js создаются декларативно с использованием объектов JSON. Каждое свойство диаграммы, подобно ее цвету и данным, имеет соответствующий атрибут JSON, который можно использовать для полной настройки внешнего вида и поведения диаграммы.

Атрибуты можно разделить на две категории. Первый называется traces, которые являются объектами, которые используются для предоставления информации о одной серии данных, которые будут отображаться на графике. Вторая категория - это layout, который предоставляет различные атрибуты, которые контролируют все другие аспекты диаграммы, такие как название или аннотации. Различные трассы дополнительно классифицируются по типу диаграммы, а атрибуты, доступные вам для рисования диаграммы, будут зависеть от значения атрибута type.

В приведенном выше примере мы создали объект traceA, который хранит тип трассировки и данные, которые вы хотите отобразить на диаграмме. Следующая демо-версия CodePen показывает окончательный результат вышеуказанного кода.

Please accept marketing cookies to load this content.

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

Атрибуты макета для настройки диаграмм

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

Вы можете указать глобальный шрифт, который должен использоваться при создании трасс и других компонентов компоновки, таких как оси и заголовок. Параметры задаются с использованием объекта font, и эти значения используются по умолчанию всеми компонентами диаграммы. Ключи color, size and family вложены внутри ключа font. Вы можете использовать их для установки глобального шрифта, глобального размера шрифта и глобального семейства шрифтов, соответственно.

Каждая диаграмма имеет атрибут title, который может использоваться для установки заголовка для текущего графика. Он дает пользователю некоторую информацию о том, что вы рисуете на диаграмме. Свойства шрифта для заголовка можно указать с помощью атрибута titlefont. Так же, как и глобальный атрибут font, ключи color, size и family, вложенные в атрибут titlefont, могут использоваться для управления свойствами шрифта заголовка.

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

Левое поле задается с использованием атрибута l, правого поля с использованием атрибута r, верхнего поля с использованием атрибута t и нижнего поля с использованием атрибута b. По умолчанию область построения и линии осей очень близки друг к другу. Вы можете добавить некоторое пространство вокруг области построения, используя атрибут pad, вложенный в ключ margin. Отступы задаются в пикселях, а значение по умолчанию равно нулю.

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

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

Иногда точки, нанесенные на график, не проходят вплоть до нуля. В таких случаях тики, созданные Plotly на оси, также не распространяются на ноль. Однако, если вы хотите, чтобы тики всегда начинались с нуля, независимо от диапазона отображаемых точек, вы можете использовать атрибут rangemode и установить его значение tozero.

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

var lineDiv = document.getElementById('line-chart');

var traceA = {
  x: [25, 30, 35, 40, 45, 50, 55],
  y: [40, 40, 20, 60, 40, 20, 50],
  type: 'scatter'
};

var data = [traceA];

var layout = {
  title:'A Line Chart in Plotly',
  height: 550,
  font: {
    family: 'Lato',
    size: 16,
    color: 'rgb(100,150,200)'
  },
  plot_bgcolor: 'rgba(200,255,0,0.1)',
  margin: {
    pad: 10
  },
  xaxis: {
    title: 'Distance travelled along x-axis',
    titlefont: {
      color: 'black',
      size: 12
    },
    rangemode: 'tozero'
  },
  yaxis: {
    title: 'Distance travelled along y-axis',
    titlefont: {
      color: 'black',
      size: 12
    },
    rangemode: 'tozero'
  }
};

Plotly.plot( lineDiv, data, layout );

Please accept marketing cookies to load this content.

Заключение

В этом уроке вы узнали о различных функциях библиотеки Plotly.js. Я также рассмотрел установку и использование библиотеки вместе с различными атрибутами макета, чтобы настроить внешний вид диаграмм в соответствии с вашими потребностями.

JavaScript стал одним из де-факто языков работы в Интернете. Он не лишен кривых обучения, и есть множество фреймворков и библиотек, которые тоже будут вам интересны. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato.

В оставшейся части серии вы узнаете о различных типах базовых диаграмм, которые могут быть созданы с использованием Plotly. Надеюсь, вам понравился учебник, и если у вас есть какие-либо вопросы или предложения, не стесняйтесь делиться ими в комментариях.