В учебном пособии « Начало работы с Plotly.js» этой серии вам было представлено краткое руководство по началу работы, в котором кратко описаны все функции, комплекты и типы диаграмм, доступные в библиотеке. Если вы еще не читали этот учебник, я бы посоветовал вам хотя бы раз прочитать его, чтобы получить общее представление о библиотеке Plotly.js.
В этом уроке вы узнаете, как создавать линейные диаграммы в Plotly. В прошлом я также написал еще одну серию об облегченной библиотеке Chart.js, которую можно использовать для создания диаграмм на основе холста в JavaScript. В одном учебном пособии под названием « Начало работы с Chart.js: линейные и гистограммы» я рассмотрел процесс создания линейных диаграмм с использованием Chart.js. Люди, которые читали это руководство, вероятно, помнят, что для создания линейного графика в Chart.js необходимо установить атрибут type в line.
С Plotly.js вы не можете установить атрибут type в line для создания линейной диаграммы. Вам нужно будет установить атрибут type scatter а затем установить атрибут mode на «линии» , «линии + маркеры» или «линии + маркеры + текст» . Имея это в виду, давайте начнем с учебника и создадим несколько потрясающих линейных диаграмм.
Создание базовой линейной диаграммы
В этом разделе мы построим два различных следа scatter в виде линейных диаграмм, используя Plotly. Код очень похож на тот, который мы использовали в предыдущем уроке, чтобы создать линейную диаграмму, используя одну трассировку. Вот фактический код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
var lineDiv = document.getElementById(‘line-chart’);
var traceA = {
x: [1, 5, 13, 24, 35, 46, 60],
y: [80, 40, 70, 65, 15, 75, 49],
type: ‘scatter’
};
var traceB = {
x: [4, 9, 17, 21, 31, 42, 56],
y: [64, 81, 3, 49, 25, 17, 26],
type: ‘scatter’
};
var data = [traceA, traceB];
var layout = {
title:’A Line Chart in Plotly’
};
Plotly.plot( lineDiv, data, layout );
|
Стилизация линий диаграммы с использованием разных атрибутов
На данный момент все на нашем графике было создано с использованием параметров по умолчанию. Остальные разделы учебника покажут вам, как использовать все атрибуты, доступные для трассировки типа scatter для создания пользовательских линейных диаграмм. Варианты изменения внешнего вида нанесенной линии доступны под ключом line .
Цвет линии можно указать с помощью color клавиши. Вы также можете контролировать ширину линии, используя атрибут width . Ширина указана в пикселях, и ее значение по умолчанию равно 2.
Форма линии между различными точками, которые наносятся на график, может быть указана с помощью атрибута shape . Форма по умолчанию является linear , но вы также можете установить для нее spline , vh , hv , hvh или vhv . Когда shape установлена на linear , в линии, которая соединяет две последовательные точки, нет изгибов. В случае vh , hv , hvh и vhv , линии никогда не рисуются под углом. Они могут быть горизонтальными или вертикальными, с изгибом на 90 градусов, который может произойти в первой точке, второй точке, средней точке или обеих точках, в зависимости от заданного значения формы.
Последний вариант — установить shape spline . В этом случае линия фактически становится кривой без резких изгибов. Гладкость этой кривой может быть установлена с помощью другого атрибута, называемого smoothing . Этот атрибут может принимать любое значение от 0 до 1,3 включительно. Установка его в ноль приведет к прямым линиям, таким как linear значение. Вот некоторый код, который использует все эти атрибуты для построения пяти разных линий на графике:
|
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
var lineDiv = document.getElementById(‘line-chart’);
var traceLinear = {
x: [1, 5, 13, 24, 35, 46, 60],
y: [180, 160, 170, 165, 175, 175, 149],
type: ‘scatter’,
name: ‘Linear Shape’,
line: {
shape: ‘linear’,
color: ‘rgb(255, 157, 98)’
}
};
var traceSpline = {
x: [1, 5, 13, 24, 35, 46, 60],
y: [150, 130, 140, 135, 145, 145, 119],
type: ‘scatter’,
name: ‘Spline Shape’,
line: {
shape: ‘spline’,
color: ‘rgb(157, 255, 98)’
}
};
var traceVH = {
x: [1, 5, 13, 24, 35, 46, 60],
y: [120, 100, 110, 105, 115, 115, 89],
type: ‘scatter’,
name: ‘VH Shape’,
line: {
shape: ‘vh’,
color: ‘rgb(157, 98, 255)’
}
};
var traceHVH = {
x: [1, 5, 13, 24, 35, 46, 60],
y: [90, 70, 80, 75, 85, 85, 59],
type: ‘scatter’,
name: ‘HVH Shape’,
line: {
shape: ‘hvh’,
color: ‘rgb(98, 157, 255)’
}
};
var traceSplineB = {
x: [1, 5, 13, 24, 35, 46, 60],
y: [60, 40, 50, 45, 55, 55, 29],
type: ‘scatter’,
name: ‘Spline Shape (1.3)’,
line: {
shape: ‘spline’,
smoothing: 1.3,
color: ‘rgb(255, 98, 157)’
}
};
var data = [traceLinear, traceSpline, traceVH, traceHVH, traceSplineB];
var layout = {
title:’Different Shapes of a Line Chart’,
yaxis: {
rangemode: ‘tozero’
}
};
Plotly.plot( lineDiv, data, layout );
|
Следующая линейная диаграмма показывает разницу между различными значениями атрибута shape . Я использовал параметр name чтобы назначать разные имена каждой строке, чтобы вы могли четко видеть форму, созданную каждым значением.
Еще один параметр, который можно использовать при рисовании линий графика, — это параметр dash . Вы можете установить для этого параметра строковое значение, чтобы задать стиль штрихов для ваших линий. Допустимые значения для этого атрибута: solid , dot , dash , longdash , dashdot и longdashdot .
Другой вариант — указать длину тире самостоятельно, используя список значений пикселей, таких как «4px, 4px, 10px». В следующей демонстрации используются разные значения свойства dash для создания уникальных стилей линий.
Настройка цвета заливки и маркеров
Область под нанесенной линией на графике по умолчанию остается прозрачной, но вы можете заполнить ее цветом по вашему выбору, если хотите. Это может быть достигнуто с помощью параметра fill . По умолчанию это значение равно none , но другие допустимые значения включают tozeroy , tozerox , tonexty , tonextx , toself и tonext .
Значение tozeroy заполнит всю область, начиная с линии трассировки до y=0 . Аналогично, значение tozerox заполнит всю область, начиная с трассировки линии до x=0 . Значения tonexty и tonextx заполняют всю область между конечными точками текущей трассы и трассы перед ней. Когда никаких других следов не осталось, эти значения будут действовать как tozeroy и tozerox соответственно. Вы можете использовать эти два значения для создания составных графиков.
Как следует из названия, само значение соединяет конечные точки трассы друг с другом, образуя замкнутую форму. Последнее значение, tonext , заполняет все доступное пространство между двумя трассами, только когда одна трасса полностью закрывает другую.
По умолчанию область, заданная значением параметра fill заполняется с использованием полупрозрачного варианта цвета линии, цвета маркера или цвета линии маркера, в зависимости от доступности. Однако вы можете указать свой собственный цвет для заполнения этой области, используя параметр fillcolor .
Точки, представляющие построенные точки на графике, помечены с помощью кружков по умолчанию. Plotly.js также предоставляет множество других символов маркеров на ваш выбор. Существует около 44 различных символов маркера, и почти все они доступны в четырех разных версиях. Вы можете найти список всех этих символов в документации . Маркеры также имеют параметры opacity , size и color которые позволяют контролировать непрозрачность, размер и цвет этих символов. Значение opacity умолчанию равно 1, а значение size по умолчанию равно 6.
Вот небольшой код, который использует все параметры из этого раздела для создания линейных диаграмм с заполненными областями и некруглыми маркерами:
|
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
var lineDiv = document.getElementById(‘line-chart’);
var traceA = {
x: [1, 8, 13, 24, 35, 46, 60],
y: [180, 150, 210, 165, 175, 185, 220],
type: ‘scatter’,
name: ‘marker: circle’,
fill: ‘tonexty’,
marker: {
symbol: ‘circle’,
size: 10
}
};
var traceB = {
x: [1, 8, 13, 24, 35, 46, 60],
y: [130, 120, 160, 135, 145, 145, 119],
type: ‘scatter’,
name: ‘marker: diamond’,
fill: ‘tonexty’,
marker: {
symbol: ‘diamond’,
size: 10
}
};
var traceC = {
x: [1, 8, 13, 24, 35, 46, 60],
y: [110, 100, 105, 100, 115, 85, 95],
type: ‘scatter’,
name: ‘marker: pentagon’,
fill: ‘tonexty’,
marker: {
symbol: ‘pentagon’,
size: 12
}
};
var traceD = {
x: [1, 8, 13, 24, 35, 46, 60],
y: [70, 80, 60, 85, 75, 50, 59],
type: ‘scatter’,
name: ‘marker: star’,
fill: ‘tonexty’,
marker: {
symbol: ‘star’,
size: 12
}
};
var traceE = {
x: [1, 8, 13, 24, 35, 46, 60],
y: [30, 20, 30, 15, 55, 15, 30],
type: ‘scatter’,
name: ‘dash: 4px, 4px, 10px’,
fill: ‘tonexty’,
marker: {
symbol: ‘bowtie’,
size: 12
}
};
var data = [traceE, traceD, traceC, traceB, traceA];
var layout = {
title:’Dash values for a Line Chart’,
xaxis: {
rangemode: ‘tozero’
},
yaxis: {
rangemode: ‘tozero’
}
};
Plotly.plot( lineDiv, data, layout );
|
При заполнении области между различными трассировками с заданным цветом, вы должны иметь в виду, что все эти параметры заполняют область трассировки на основе порядка, в котором трассы передаются функции plot() , а не порядка, в котором следы были объявлены.
В нашем случае traceE — это первая трасса, и до нее нет трассировки. Это означает, что значение tonexty эффективно становится tozeroy этот раз. Мы передали traceD после traceE , поэтому все точки между этими двумя трассами будут закрашены цветом traceD . Если бы мы сначала пропустили traceA , то область заполнения расширилась бы от вершины до y=0 . Это может быть нежелательным результатом в некоторых случаях. Поэтому вы всегда должны помнить порядок следования следов.
Вывод
В этом уроке вы узнали, как создавать линейные диаграммы с помощью Plotly.js. В разных разделах руководства обсуждались различные параметры настройки, такие как настройка формы, цвета и ширины линий.
Вы также узнали о различных символах маркера и параметре заполнения, предоставленном Plotly.js, который можно использовать для дальнейшей настройки графика. Здесь я рассмотрел только некоторые основные атрибуты, но есть несколько других, таких как showlegend и hoverinfo , о которых вы, вероятно, должны знать. Вы можете прочитать обо всех этих атрибутах в разделе справки Scatter на веб-сайте Plotly.
В следующем уроке из этой серии вы узнаете, как создавать гистограммы в Plotly. Если у вас есть какие-либо вопросы или советы, связанные с этим руководством, не стесняйтесь делиться ими в комментариях.