Из серии « Начало работы с 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
2
3
4
|
<script type=»text/javascript» src=»https://cdn.plot.ly/plotly-latest.min.js»></script>
<!— Install a specific version —>
<script type=»text/javascript» src=»https://cdn.plot.ly/plotly-1.9.0.min.js»></script>
|
На момент написания этого руководства последняя версия библиотеки была 1.28.3. Размер файла после минимизации и сжатия библиотеки составляет 666 кБ. Не сжатая и несжатая версия имеет размер 5,4 МБ. Как видите, длинный список функций, предлагаемых этой библиотекой, имеет свою цену.
Начиная с версии 1.15, вы можете выбирать из различных частичных комплектов, каждый из которых позволяет создавать определенные типы диаграмм. Существует семь различных пакетов: базовый , декартовый , гео , gl3d , gl2d , mapbox и финансы . Вы можете получить ссылку CDN для этих пакетов, используя следующую строку:
|
1
2
3
4
5
6
7
|
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 КБ. - декартово : этот пакет содержит модули
scatter,box,box,scatterternary,histogram2d,histogram2dcontourscatterternary,histogram2dcontourscatterternarypie,contourи модулиscatterternary. Сжатый и сжатый вариант этого пакета имеет размер 238,2 КБ. - geo : этот пакет позволяет создавать различные типы карт-карт в JavaScript. Сжатый и сжатый вариант этого пакета имеет размер 224,1 кБ.
- gl3d : этот пакет позволяет создавать различные типы 3D-карт с помощью модулей трассировки
scatter,scatter3d,surfaceиmesh3d. Сжатый и сжатый вариант этого пакета имеет размер 354 КБ. - gl2d : этот комплект содержит модули трассировки
scatter,scattergl,pointcloud,heatmapgl,contourglиparcoords. Он имеет размер 362,9 кБ после минификации и сжатия. - mapbox : этот пакет содержит модули трассировки
scatterиscattermapbox. Размер файла в этом случае составляет 328,6 КБ. - финансы . Пакет финансов можно использовать для создания временных рядов, свечей и других типов графиков для построения финансовых данных. Этот модуль состоит из модулей
scatter,bar,histogram,pie,ohlcиcandlestick.
Использование Plotly для создания диаграммы
Как только вы определились с диаграммами, которые хотите создать, и загрузили соответствующий пакет на свою веб-страницу, вы можете начать создавать свои собственные диаграммы с помощью Plotly.js. Первое, что вам нужно сделать, это создать пустой элемент div котором должен быть нарисован график.
Подготовьте данные, которые вы хотите отобразить на графике. В этом примере я просто использую некоторые случайные числа для создания диаграммы. Наконец, вы должны вызвать функцию plot() и предоставить ей всю информацию, такую как div контейнера, данные и параметры макета. Вот код для создания очень простой линейной диаграммы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
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, который можно использовать для полной настройки внешнего вида и поведения диаграммы.
Атрибуты можно широко разделить на две категории. Первый называется трассировками , которые представляют собой объекты, которые используются для предоставления информации об одной серии данных, которые должны быть нанесены на график. Вторая категория — это макет , который предоставляет различные атрибуты, которые контролируют все другие аспекты диаграммы, такие как заголовок или аннотации. Различные трассы далее классифицируются по типу диаграммы, и атрибуты, доступные вам для построения диаграммы, будут зависеть от значения атрибута типа .
В приведенном выше примере мы создали объект traceA который хранит тип трассы и данные, которые вы хотите traceA на диаграмме. Следующая демонстрационная программа CodePen показывает окончательный результат вышеприведенного кода.
Как вы можете видеть в демонстрации, вы можете увеличивать, уменьшать или автоматически масштабировать график. Вы также можете скачать график в виде изображения. Сам график выглядит очень профессионально с его четкими линиями.
Атрибуты макета для настройки графиков
В остальных руководствах этой серии мы сосредоточимся на изучении различных атрибутов, связанных с конкретными типами диаграмм, такими как линейные и гистограммы. Прежде чем делать это, вы должны также иметь некоторые базовые знания о различных атрибутах макета, которые управляют аспектами, общими для всех типов диаграмм, такими как шрифт, заголовок, ось X, ось Y и т. Д.
Вы можете указать глобальный шрифт, который следует использовать при создании трасс и других компонентов макета, таких как оси и заголовок. Параметры указываются с использованием объекта font , и эти значения используются по умолчанию всеми компонентами диаграммы. color , size и family ключи вложены в ключ font . Вы можете использовать их, чтобы установить глобальный цвет шрифта, глобальный размер шрифта и глобальное семейство шрифтов соответственно.
Каждая диаграмма имеет атрибут title который можно использовать для установки заголовка текущей диаграммы. Он дает пользователю некоторую информацию о том, что вы наносите на график. Свойства шрифта для заголовка можно указать с titlefont атрибута titlefont . Как и глобальный атрибут font , ключи color , size и family вложенные в атрибут titlefont могут использоваться для управления связанными со шрифтом свойствами заголовка.
Вы можете указать ширину и высоту диаграммы в пикселях, используя клавиши width и height . Вы также можете управлять интервалом вокруг диаграммы и областью построения графика, используя различные атрибуты, вложенные под ключ margin . Все значения указаны в пикселях.
Левое поле задается с использованием атрибута l , правое поле с использованием атрибута r , верхнее поле с использованием атрибута t и нижнее поле с использованием атрибута b . Область построения и линии оси по умолчанию очень близки друг к другу. Вы можете добавить пространство вокруг области построения, используя атрибут pad вложенный в клавишу margin . Заполнение указывается в пикселях, и его значение по умолчанию равно нулю.
Вы можете выбрать свои собственные цвета для фона всей диаграммы, а также область построения в соответствии с темой вашего сайта. Оба эти цвета по умолчанию настроены на белый, но вы можете указать разные значения для каждого из них, используя paper_bgcolor и plot_bgcolor соответственно.
Вы также можете указать заголовок и различные свойства шрифта для всех осей в диаграмме. Свойства шрифта вложены в клавиши оси для соответствующих осей. У вас также есть возможность независимо управлять основным цветом для оси и цветом шрифта, используемого для ее заголовка.
Иногда точки, нанесенные на график, не доходят до нуля. В таких случаях тики, созданные Plotly на оси, также не расширяются до нуля. Однако, если вы хотите, чтобы тики всегда начинались с нуля, независимо от диапазона отображаемых точек, вы можете использовать атрибут rangemode и установить его значение в tozero .
В следующем фрагменте кода используются некоторые атрибуты, которые мы только что обсудили, чтобы изменить внешний вид диаграммы, созданной в предыдущем разделе.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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 );
|
Вывод
В этом руководстве вы узнали о различных функциях библиотеки Plotly.js. Я также рассмотрел установку и использование библиотеки, а также различные атрибуты макета для настройки внешнего вида графиков в соответствии с вашими потребностями.
JavaScript стал одним из де-факто языков работы в сети. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
В оставшейся части серии вы узнаете о различных типах базовых диаграмм, которые можно создавать с помощью Plotly. Надеюсь, вам понравился урок, и если у вас есть какие-либо вопросы или предложения, не стесняйтесь делиться ими в комментариях.