В нашем последнем уроке вы узнали, как создавать линейные диаграммы в Plotly.js . Каждый аспект линейных диаграмм, например данные, которые должны быть нанесены на график, и форма или цвет линии, соединяющей нанесенные точки, можно контролировать с помощью набора атрибутов. Plotly.js позволяет создавать гистограммы аналогичным образом.
В этом уроке вы узнаете, как создавать различные виды гистограмм с помощью Plotly.js. Я также расскажу, как контролировать внешний вид этих диаграмм, например, цвет и ширину полосы, используя определенные атрибуты.
Прежде чем идти дальше, я хотел бы упомянуть, что вы также можете создать некоторые базовые гистограммы, используя Chart.js . Если вы не планируете использовать какие-либо изящные функции Plotly.js, использование облегченной библиотеки имеет больше смысла.
Создание вашей первой гистограммы
Вы можете построить гистограмму в Plotly.js, установив значение атрибута type равным bar . Остальные задачи, такие как создание объекта трассировки или предоставление данных для построения графика, аналогичны процессу создания линейных диаграмм. Вот код, необходимый для создания базовой гистограммы в Plotly.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
var barDiv = document.getElementById(‘bar-chart’);
var traceA = {
x: [«Mercury», «Venus», «Earth», «Mars», «Jupiter», «Saturn», «Uranus», «Neptune»],
y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
type: ‘bar’
};
var data = [traceA];
var layout = {
title:’Density of Planets (kg/m3)’
};
Plotly.plot( barDiv, data, layout );
|
Вот диаграмма, созданная с помощью вышеуказанного кода. Данные о плотности планет были взяты из Информационного бюллетеня о планетах, предоставленного НАСА.
Создание сгруппированных, сгруппированных и относительных гистограмм
Если вам необходимо представить более сложные данные в форме диаграммы, вы можете использовать для barmode атрибут barmode доступный в Plotly. Этот атрибут может быть установлен на stack , group , overlay и relative . Обычно это полезно, если вы хотите построить несколько следов баров с соответствующей информацией.
Значение stack создает столбчатые диаграммы с накоплением, в которых столбцы, представляющие подгруппы объекта, располагаются друг над другом, образуя один столбец. Все столбцы в подгруппе имеют разные цвета, которые показывают индивидуальный вклад этого раздела во всю сущность. Общая длина столбцов с накоплением представляет общий размер этого объекта.
Вот некоторый код, который объединяет вклад ВВП восьми ведущих стран вместе. Данные о номинальном составе сектора ВВП взяты из Википедии.
|
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
|
var barDiv = document.getElementById(‘bar-chart’);
var primaryGDP = {
x: [«United States», «China», «Japan», «Germany», «United Kingdom», «France», «India», «Italy»],
y: [215364, 964772, 56764, 27959, 18549, 47277, 391672, 37050],
type: ‘bar’,
name: ‘Agricultural Sector’
};
var secondaryGDP = {
x: [«United States», «China», «Japan», «Germany», «United Kingdom», «France», «India», «Italy»],
y: [3427876, 4464876, 1300833, 982067, 556477, 455355, 580755, 448305],
type: ‘bar’,
name: ‘Industrial Sector’
};
var tertiaryGDP = {
x: [«United States», «China», «Japan», «Germany», «United Kingdom», «France», «India», «Italy»],
y: [14303756, 5788633, 3377434, 2484874, 2074864, 1985647, 1280813, 1367145],
type: ‘bar’,
name: ‘Service Sector’
};
var data = [primaryGDP, secondaryGDP, tertiaryGDP];
var layout = {
title:’Nominal GDP Sector Composition of Top 8 Countries’,
barmode: ‘stack’
};
Plotly.plot( barDiv, data, layout );
|
Порядок размещения для подгрупп зависит от порядка, в котором данные были переданы в функцию.
Установка barmode overlay для overlay поместит отдельные панели в подгруппы друг над другом. Хотя этот режим может быть полезен для прямых сравнений, вы должны быть осторожны с ним, потому что он скроет более короткие столбцы, которые были переданы ранее в функции plot() .
Следующая диаграмма была создана с barmode установленным на overlay . Теперь вы можете легко сравнить вклад ВВП в один сектор во всех странах. Стоит отметить, что все бары одной страны теперь начинаются снизу. Это позволяет легко заметить несколько наблюдений. Например, сейчас очень ясно, что ВВП сектора услуг> ВВП промышленного сектора> ВВП сельскохозяйственного сектора во всех восьми ведущих странах.
В нынешних масштабах невозможно правильно увидеть вклад сельскохозяйственного сектора в ВВП Германии, Великобритании и Франции. Возможность увеличения масштаба изображения Plotly.js может оказаться очень полезной в таких случаях. Вы можете увеличивать столько, сколько хотите, и график все еще будет очень резким.
Вместо того чтобы размещать все столбцы подгруппы друг над другом, вы также можете разместить их вместе, чтобы сформировать группу. Вам нужно будет установить barmode для group чтобы создать сгруппированные диаграммы. Имейте в виду, что предоставление слишком большого количества информации в сгруппированных диаграммах может затруднить их чтение.
Вы можете управлять пространством между барами из разных категорий, а также барами в подгруппе, используя bargap и bargroupgap соответственно. До этого момента все столбцы были нарисованы для того, чтобы построить фактические цифры ВВП. Однако вы можете использовать параметр barnorm чтобы нарисовать barnorm в процентах или долях. Когда для barnorm задано percentage или fraction , вычисляется общий вклад основной категории, а затем процент распределяется по отдельным столбцам на основе значения подгруппы.
Например, сектор услуг составляет около 79,7% от общего ВВП США. Это означает, что планка для сферы услуг в случае США будет поднята до отметки 79,7. Все эти атрибуты, обсуждаемые в этом абзаце, указываются в объекте layout . Вот пример объекта макета, который определяет все эти параметры.
|
1
2
3
4
5
6
7
|
var layout = {
title:’Nominal GDP Sector Composition of Top 8 Countries’,
barmode: ‘group’,
bargap: 0.25,
bargroupgap: 0.1,
barnorm: ‘percent’
};
|
barmode значение barmode называемое relative , полезно, когда вы barmode группу трасс с отрицательными и положительными значениями. В этом случае положительные значения отображаются над осью, а отрицательные значения — под осью.
Изменение цвета панели, ширины, текста и других атрибутов
Можно изменить цвет полос в кривой, используя атрибут color вложенный в параметр marker . color и width контура стержня могут быть изменены аналогичным образом. Эти параметры вложены в атрибут line , который сам вложен в marker . Каждая из этих опций может быть предоставлена либо как одно значение, чтобы указать цвет и ширину всех столбцов в трассе одновременно, либо как массив, чтобы указать другой цвет или ширину для отдельных столбцов.
Другим важным атрибутом, который может оказаться полезным, является base . Позволяет указать позицию, где рисуется основание бара. Это может быть полезно в определенных ситуациях, когда вы публикуете относительные значения, которые должны быть смещены, чтобы показать правильный результат.
Дополнительная информация может быть предоставлена о конкретной полосе или нанесенной точке с использованием атрибута text . Положение текста можно указать, используя inside , outside , auto и none . При использовании inside текст будет располагаться внутри панели рядом с ее концом. Сам текст можно масштабировать и поворачивать так, чтобы он правильно помещался внутри панели. Когда используется outside , текст будет размещен за пределами строки рядом с ее концом. В этом случае текст будет только масштабироваться. Если для атрибута hovertext не задано hovertext , значение text отображается внутри меток наведения.
Вы также можете использовать разные семейства шрифтов для текста, лежащего как внутри, так и снаружи панели, используя insidetextfont и outsidetextfont .
Вот пример использования всех этих атрибутов для создания диаграммы, которая отображает относительную скорость различных транспортных средств, с одним движущимся транспортным средством в качестве ориентира.
|
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
|
var barDiv = document.getElementById(‘bar-chart’);
var lightGreen = ‘rgba(0,255,50,0.6)’;
var redShade = ‘rgba(255,50,0,0.6)’;
var traceA = {
x: [«Car A», «Car B», «Car C», «Car D», «Car E», «Car F», «Car G», «Car H»],
y: [100, 80, 40, 160, 75, 93, 8, 125],
type: ‘bar’,
text: [»,»,»,’Overspeeding’,»,’Overspeeding’,»,’Overspeeding’],
textposition: ‘inside’,
width: 0.8,
base: [-40, 10, 50, -45, 0, 15, 60, -20],
marker: {
color: [lightGreen, lightGreen, lightGreen, redShade, lightGreen, redShade, lightGreen, redShade],
line: {
color: ‘black’,
width: 1
}
}
};
var data = [traceA];
var layout = {
title:’Speed of Cars (km/hr)’,
yaxis: {
dtick: 15
}
};
Plotly.plot( barDiv, data, layout );
|
Как видите, я передал base и color значения в виде массива. Когда транспортные средства движутся в одном и том же направлении, они, кажется, движутся медленнее, поэтому нам нужно добавить скорость нашего транспортного средства в качестве базового значения, чтобы получить фактическую скорость.
Когда транспортные средства движутся в противоположном направлении, они, кажется, движутся быстро, поэтому нам нужно вычесть скорость нашего собственного автомобиля, чтобы получить точный результат. Это позволяет нам показывать дополнительную информацию о скорости нашего транспортного средства на том же участке. В следующем примере CodePen показан окончательный график, нанесенный приведенным выше кодом.
Вывод
Из этого туториала вы узнали, как создавать различные гистограммы в Plotly.js с barmode атрибута barmode . Вы также узнали, как настроить внешний вид отдельных столбцов на графике, используя определенный набор атрибутов. Я попытался охватить все часто используемые атрибуты гистограмм в учебнике.
Тем не менее, есть еще несколько дополнительных атрибутов, о которых вы можете прочитать в справочном разделе трассировки стержней на Plotly. Некоторые атрибуты, которые я объяснил в руководстве, отсутствуют в справочном разделе, но их можно найти в исходных файлах библиотеки, если вы хотите узнать о них больше.
Если у вас есть какие-либо вопросы или предложения, связанные с этим учебником, не стесняйтесь сообщать мне в комментариях.