Если вы следили за этой серией с самого начала, вы могли заметить, что Plotly.js использует один и тот же тип scatter для создания как линейных, так и пузырьковых диаграмм . Единственное отличие состоит в том, что мы должны были установить mode для lines при создании линейных диаграмм и markers при создании пузырьковых диаграмм.
Точно так же Plotly.js позволяет вам создавать круговые, кольцевые и калибровочные диаграммы, используя одно и то же значение для атрибута type и изменяя значение других атрибутов в зависимости от диаграммы, которую вы хотите создать.
Создание круговых диаграмм в Plotly.js
Вы можете создать круговые диаграммы в Plotly.js, установив атрибут type в pie . Есть также другие атрибуты, такие как opacity , visible и name которые являются общими для других типов диаграмм. Атрибут name используется для предоставления имени текущей круговой трассировки. Это имя затем отображается в легенде для идентификации. Вы можете показать или скрыть showlegend в легенде диаграммы, установив для атрибута showlegend значение true или false соответственно. Вы можете установить имя метки для различных секторов круговой диаграммы, используя атрибут labels .
В случае круговых диаграмм объект-маркер используется для управления отображением различных секторов диаграммы. Атрибут color вложенный в marker можно использовать для установки цвета каждого сектора круговой диаграммы. Цвет для разных секторов может быть указан как значение массива для атрибута color .
Вы также можете установить цвет и ширину всех линий, окружающих каждый сектор, используя атрибуты color и width вложенные в объект линии. У вас также есть возможность отсортировать все сектора круговой диаграммы от наибольшего к наименьшему, используя логический атрибут sort . Аналогично, направление секторов можно изменить на clockwise или counterclockwise clockwise counterclockwise с помощью атрибута direction .
Следующий код создает базовую круговую диаграмму, в которой перечислены лесные массивы пяти ведущих стран мира.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
var pieDiv = document.getElementById(«pie-chart»);
var traceA = {
type: «pie»,
values: [8149300, 4916438, 4776980, 3100950, 2083210],
labels: [‘Russia’, ‘Canada’, ‘Brazil’, ‘United States’, ‘China’]
};
var data = [traceA];
var layout = {
title: «Area Under Forest for Different Countries»
};
Plotly.plot(pieDiv, data, layout);
|
Как видите, мы больше не используем атрибуты x и y для указания точек, которые мы хотим построить. Теперь это делается с помощью values и labels . Проценты определяются автоматически на основе входных значений.
По умолчанию первый кусок пирога начинается в 12 часов. Вы можете изменить начальный угол диаграммы с помощью атрибута rotation , который принимает значение от -360 до 360. Значение по умолчанию для 12 часов равно углу 0.
Если вы хотите, чтобы срез на диаграмме выделялся, вы можете использовать атрибут pull , который может принимать либо число, либо массив чисел со значениями от 0 до 1. Атрибут pull используется для удаления указанных секторов из пирог. Расстояние вытягивания равно доле большего радиуса пирога или пончика.
Очень просто преобразовать круговую диаграмму в кольцевую диаграмму, указав значение для атрибута hole . Он будет вырезать заданную долю радиуса из круговой диаграммы, чтобы сделать кольцевую диаграмму.
Вы можете управлять цветом отдельных секторов в круговой диаграмме, используя атрибут colors вложенный в объект маркера. Ширина и цвет линии, охватывающей каждый сектор, также могут быть изменены с помощью атрибутов width и color вложенных в объект линии. Ширина по умолчанию вмещающей линии равна 0. Это означает, что по умолчанию никакая линия не будет проведена вокруг секторов.
Существует также атрибут hovertext , который может использоваться для предоставления некоторой дополнительной текстовой информации для каждого отдельного сектора. Эта информация будет видна зрителям при наведении курсора на сектор. Одним из условий появления текста является то, что атрибут hoverinfo должен содержать текстовый флаг. Вы можете установить цвет текста, лежащего внутри или снаружи секторов, используя атрибуты family , size и color вложенные в 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
32
33
34
35
36
37
38
39
|
var pieDiv = document.getElementById(«pie-chart»);
var traceA = {
type: «pie»,
values: [8149300, 4916438, 4776980, 3100950, 2083210],
labels: [‘Russia’, ‘Canada’, ‘Brazil’, ‘United States’, ‘China’],
hole: 0.25,
pull: [0.1, 0, 0, 0, 0],
direction: ‘clockwise’,
marker: {
colors: [‘#CDDC39’, ‘#673AB7’, ‘#F44336’, ‘#00BCD4’, ‘#607D8B’],
line: {
color: ‘black’,
width: 3
}
},
textfont: {
family: ‘Lato’,
color: ‘white’,
size: 18
},
hoverlabel: {
bgcolor: ‘black’,
bordercolor: ‘black’,
font: {
family: ‘Lato’,
color: ‘white’,
size: 18
}
}
};
var data = [traceA];
var layout = {
title: «Area Under Forest for Different Countries»
};
Plotly.plot(pieDiv, data, layout);
|
Создание калибровочных диаграмм в Plotly.js
Основная структура калибровочной диаграммы аналогична кольцевой диаграмме. Это означает, что мы можем использовать некоторые тщательно выбранные значения и создавать простые диаграммы, сохраняя атрибут type в pie . По сути, мы будем скрывать некоторые разделы полного круга, чтобы он выглядел как калибровочная диаграмма.
Во-первых, нам нужно выбрать некоторые значения для атрибута values . Для простоты я буду использовать верхнюю половину круговой диаграммы в качестве моей шкалы. Это означает, что значения должны быть поровну разделены между частью, которую я хочу видеть, и частью круговой диаграммы, которую я хочу скрыть. Видимый раздел диаграммы может быть далее разделен на более мелкие части. Вот пример выбора значений для нашей измерительной диаграммы.
|
1
|
values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]
|
Число 100 в приведенной выше строке является произвольным. Как видите, первые пять срезов вместе составляют до 100, что также является значением, установленным для скрытой области круговой диаграммы. Это делит весь пирог поровну между скрытой и видимой частью.
Вот полный код, который создает нашу базовую диаграмму. Вы должны отметить, что я установил цветовой атрибут сектора, который должен быть скрыт для белого. Аналогично, значения text и labels для соответствующего сектора также были установлены в пустые строки. Атрибут rotation был установлен на 90, чтобы график не отображался с позиции по умолчанию на 12 часов.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
var gaugeDiv = document.getElementById(«gauge-chart»);
var traceA = {
type: «pie»,
showlegend: false,
hole: 0.4,
rotation: 90,
values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100],
text: [«Very Low», «Low», «Average», «Good», «Excellent», «»],
direction: «clockwise»,
textinfo: «text»,
textposition: «inside»,
marker: {
colors: [«rgba(255, 0, 0, 0.6)», «rgba(255, 165, 0, 0.6)», «rgba(255, 255, 0, 0.6)», «rgba(144, 238, 144, 0.6)», «rgba(154, 205, 50, 0.6)», «white»]
},
labels: [«0-10», «10-50», «50-200», «200-500», «500-2000», «»],
hoverinfo: «label»
};
|
Следующая часть кода посвящена стрелке измерительной диаграммы. Значение, которое вы установите для переменной degrees будет определять угол, под которым нарисована стрелка. Переменная radius определяет длину иглы. Атрибуты x0 и y0 используются для установки начальной точки нашей линии. Точно так же атрибуты x1 и y1 используются, чтобы установить конечную точку нашей линии.
Вы можете создавать более сложные формы для вашей иглы с помощью SVG-контуров. Все, что вам нужно сделать, это установить атрибут type в path и указать фактический путь, используя атрибут path . Подробнее об этом вы можете прочитать в разделе « Формы макета» .
|
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
|
var degrees = 115, radius = .6;
var radians = degrees * Math.PI / 180;
var x = -1 * radius * Math.cos(radians);
var y = radius * Math.sin(radians);
var layout = {
shapes:[{
type: ‘line’,
x0: 0,
y0: 0,
x1: x,
y1: 0.5,
line: {
color: ‘black’,
width: 8
}
}],
title: ‘Number of Printers Sold in a Week’,
xaxis: {visible: false, range: [-1, 1]},
yaxis: {visible: false, range: [-1, 1]}
};
var data = [traceA];
Plotly.plot(gaugeDiv, data, layout, {staticPlot: true});
|
Весь код этого раздела создает следующую диаграмму. Прямо сейчас график не очень причудливый, но он может послужить хорошей отправной точкой.
Последние мысли
Из этого руководства вы узнали, как создавать круговые и кольцевые диаграммы, используя тип pie в Plotly.js. Вы также узнали, как аккуратно устанавливать значения нескольких атрибутов, чтобы преобразовать эти круговые диаграммы в простые измерительные диаграммы. Вы можете прочитать больше о круговых диаграммах и их различных атрибутах на странице ссылок .
Это был последний урок из нашей серии интерактивных диаграмм Plotly.js. Первый вводный урок предоставил вам обзор библиотеки. Во втором, третьем и четвертом руководствах показано, как создавать линейные диаграммы , гистограммы и пузырьковые диаграммы соответственно. Надеюсь, вам понравился этот урок, а также вся серия. Если у вас есть какие-либо вопросы, дайте мне знать в комментариях.