До этого момента вы узнали о четырех различных типах диаграмм в Chart.js. Вторым уроком серии покрыты линейные и гистограммы . В третьем уроке обсуждались радиолокационные и полярные диаграммы . В этом руководстве вы узнаете, как использовать Chart.js для создания круговых, кольцевых и пузырьковых диаграмм.
Создание круговых и кольцевых диаграмм
Круговые и кольцевые диаграммы полезны, когда вы хотите показать пропорцию, в которой что-то делится между различными объектами. Например, вы можете использовать круговые диаграммы, чтобы показать процент самцов, самок и молодых львов в парке дикой природы или процент голосов, которые разные кандидаты получили на выборах.
Круговые диаграммы полезны только тогда, когда вы хотите сравнить один конкретный параметр или набор данных. Важно помнить, что вы не можете использовать круговые диаграммы для построения объектов, значения которых равны нулю, поскольку угол секторов в круговой диаграмме зависит от величины точек данных.
Это означает, что любой объект, доля которого равна нулю, вообще не будет отображаться на графике. Точно так же вы не можете построить отрицательные значения на круговой диаграмме. Вы можете создать круговые диаграммы в Chart.js, установив для клавиши type pie . Точно так же вы можете создать кольцевые диаграммы, установив ключ type на doughnut . Вот пример создания этих двух диаграмм:
|
01
02
03
04
05
06
07
08
09
10
11
|
var pieChart = new Chart(votesCanvas, {
type: ‘pie’,
data: votesData,
options: chartOptions
});
var doughnutChart = new Chart(votesCanvas, {
type: ‘doughnut’,
data: votesData,
options: chartOptions
});
|
Давайте создадим круговую диаграмму, которая показывает данные об экспорте нефти из пяти крупнейших стран в 2015 году. Данные приведены в миллиардах долларов США.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
var data = {
labels: [
«Saudi Arabia»,
«Russia»,
«Iraq»,
«United Arab Emirates»,
«Canada»
],
datasets: [
{
data: [133.3, 86.2, 52.2, 51.2, 50.2],
backgroundColor: [
«#FF6384»,
«#63FF84»,
«#84FF63»,
«#8463FF»,
«#6384FF»
]
}]
};
|
Вы можете контролировать внешний вид вышеупомянутой диаграммы, используя различные клавиши, такие как cutoutPercentage , который определяет процент диаграммы, вырезанной из середины. Вы также можете указать начальный угол графика, используя клавишу rotation . Точно так же вы можете указать угол, который будет охватывать диаграмма при построении графика, используя клавишу circumference .
При рисовании диаграммы можно активировать две разные анимации. Вы можете указать, должна ли диаграмма иметь анимацию вращения, используя ключ animateRotate . Аналогичным образом вы также можете указать, следует ли масштабировать диаграмму пончика от центра с animateScale клавиши animateScale . По умолчанию для animateScale установлено значение true , а для animateScale по умолчанию установлено значение false .
Как обычно, вы можете управлять цветом фона, цветом границы и шириной границы всех точек данных, используя клавиши backgroundColor , borderColor и borderWidth соответственно. Точно так же значениями наведения всех этих свойств можно управлять с помощью hoverBackgroundColor , hoverBorderColor и hoverBorderWidth .
Вот код для создания кольцевой диаграммы для вышеуказанных данных. Установка значения для rotation равного -Math.PI берет эту начальную точку на 180 градусов против часовой стрелки. Затем, установив значение circumference в Math.PI диаграмма будет охватывать только полукруг.
|
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
|
var oilData = {
labels: [
«Saudi Arabia»,
«Russia»,
«Iraq»,
«United Arab Emirates»,
«Canada»
],
datasets: [
{
data: [133.3, 86.2, 52.2, 51.2, 50.2],
backgroundColor: [
«#FF6384»,
«#63FF84»,
«#84FF63»,
«#8463FF»,
«#6384FF»
],
borderColor: «black»,
borderWidth: 2
}]
};
var chartOptions = {
rotation: -Math.PI,
cutoutPercentage: 30,
circumference: Math.PI,
legend: {
position: ‘left’
},
animation: {
animateRotate: false,
animateScale: true
}
};
|
Создание пузырьковых диаграмм
Пузырьковые диаграммы используются для построения или отображения трех измерений ( p1 , p2 , p3 ) данных на диаграмме. Положение и размер пузырьков определяет значение этих трех точек данных. Горизонтальная ось представляет первую точку данных (p1), вертикальная ось представляет вторую точку данных ( p2 ), а область пузырька используется для представления значения третьей точки данных ( p3 ).
Следует иметь в виду, что величина третьей точки данных представлена не радиусом пузырьков, а их площадью. Теперь площадь круга пропорциональна квадрату радиуса. Это означает, что вы должны убедиться, что радиус пузырька, который вы строите, пропорционален квадратному корню из величины третьей точки данных.
Вы можете создать пузырьковые диаграммы в Chart.js, установив значение type ключ на bubble . Вот пример создания пузырьковой диаграммы.
|
1
2
3
4
5
|
var bubbleChart = new Chart(popCanvas, {
type: ‘bubble’,
data: popData,
options: chartOptions
});
|
Давайте построим график веса различных предметов, хранящихся в комнате, используя пузырьковую диаграмму. Данные для диаграммы должны быть переданы в виде объекта. Объект данных должен иметь следующий интерфейс для правильного построения графика.
|
1
2
3
4
5
|
{
x: <Number>,
y: <Number>,
r: <Number>
}
|
Одно важное различие между пузырьковыми диаграммами и всеми другими диаграммами состоит в том, что радиус пузырька не масштабируется с диаграммой.
Например, ширина столбцов в столбчатой диаграмме может увеличиваться или уменьшаться в зависимости от размера диаграммы. То же самое не происходит с пузырьковыми диаграммами. Радиус пузырьков всегда равен точному количеству пикселей, которое вы указали. Это имеет смысл, потому что в этом типе диаграммы радиус фактически используется для представления реальных данных.
Давайте создадим пузырьковую диаграмму, чтобы отобразить популяцию оленей в разных точках леса.
|
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 popData = {
datasets: [{
label: [‘Deer Population’],
data: [{
x: 100,
y: 0,
r: 10
}, {
x: 60,
y: 30,
r: 20
}, {
x: 40,
y: 60,
r: 25
}, {
x: 80,
y: 80,
r: 50
}, {
x: 20,
y: 30,
r: 25
}, {
x: 0,
y: 100,
r: 5
}],
backgroundColor: «#FF9966»
}]
};
|
Поскольку радиус здесь пропорционален квадратному корню из действительной величины, количество оленей в (80, 80) в 100 раз больше, чем количество оленей в (0, 100).
Как и все другие типы диаграмм, вы можете управлять цветом фона, цветом границы и шириной границы нанесенных точек с помощью клавиш backgroundColor , borderColor и borderWidth . Аналогичным образом вы также можете указать цвет фона наведения, цвет границы наведения и ширину наведения, используя hoverBackgroundColor , hoverBorderColor и hoverBorderWidth .
Вы также можете указать дополнительный радиус, который вы хотите добавить к различным пузырькам при наведении, используя клавишу hoverRadius . Помните, что этот радиус добавляется к исходному значению, чтобы нарисовать наведенный пузырь. Если исходный пузырь имел радиус 10, а hoverRadius установлен на 5, радиус пузырька при наведении будет равен 15.
|
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
|
var popData = {
datasets: [{
label: [‘Deer Population’],
data: [{
x: 100,
y: 0,
r: 10
}, {
x: 60,
y: 30,
r: 20
}, {
x: 40,
y: 60,
r: 25
}, {
x: 80,
y: 80,
r: 50
}, {
x: 20,
y: 30,
r: 25
}, {
x: 0,
y: 100,
r: 5
}],
backgroundColor: «#9966FF»,
hoverBackgroundColor: «#000000»,
hoverBorderColor: «#9966FF»,
hoverBorderWidth: 5,
hoverRadius: 5
}]
};
|
Приведенные выше параметры создадут следующую пузырьковую диаграмму.
Последние мысли
В этом руководстве вы узнали о трех других типах диаграмм, доступных в Chart.js. Теперь у вас должна быть возможность выбрать соответствующий тип диаграммы для отображения ваших данных и задать конкретные значения для разных ключей, чтобы контролировать их внешний вид. В следующем уроке вы узнаете, как управлять масштабами для разных типов диаграмм.
Я надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях.