() translation by (you can also view the original English article)
До этого момента вы уже узнали о четырех разных типах диаграмм в Chart.js. Второй учебник серии охватывал линейные и гистограммы. В третьем учебном пособии обсуждались радиолокационные и полярные диаграммы. В этом уроке вы узнаете, как использовать Chart.js для создания кругов, колец и пузырьков.
Создание круговой и кольцевой диаграммы
Круговой и кольцевой график полезен, когда вы хотите показать пропорцию, в которой что-то делится между разными сущностями. Например, вы можете использовать круговые диаграммы, чтобы показать процентное соотношение самцов, самок и молодых львов в парке дикой природы, или процент голосов, полученных разными кандидатами на выборах.
Круговые диаграммы полезны только тогда, когда вы хотите сравнить один конкретный параметр или набор данных. Важно иметь в виду, что вы не можете использовать круговые диаграммы для построения объектов, значения которых равны нулю, поскольку угол секторов в круговой диаграмме зависит от величины точек данных.
Это означает, что любой объект, чья доля равна нулю, вообще не будет отображаться на диаграмме. Аналогично, вы не можете наносить отрицательные значения на круговую диаграмму. Вы можете создать круговые диаграммы в Chart.js, установив ключ type в pie. Аналогичным образом, вы можете создавать кольцевые диаграммы, устанавливая ключ type в doughnut. Вот пример создания этих двух диаграмм:
1 |
var pieChart = new Chart(votesCanvas, { |
2 |
type: 'pie', |
3 |
data: votesData, |
4 |
options: chartOptions |
5 |
});
|
6 |
|
7 |
var doughnutChart = new Chart(votesCanvas, { |
8 |
type: 'doughnut', |
9 |
data: votesData, |
10 |
options: chartOptions |
11 |
});
|
Давайте создадим круговую диаграмму, в которой будут показаны данные по экспорту нефти из пяти стран в 2015 году. Данные в миллиардах долларов США.
1 |
var data = { |
2 |
labels: [ |
3 |
"Saudi Arabia", |
4 |
"Russia", |
5 |
"Iraq", |
6 |
"United Arab Emirates", |
7 |
"Canada" |
8 |
],
|
9 |
datasets: [ |
10 |
{
|
11 |
data: [133.3, 86.2, 52.2, 51.2, 50.2], |
12 |
backgroundColor: [ |
13 |
"#FF6384", |
14 |
"#63FF84", |
15 |
"#84FF63", |
16 |
"#8463FF", |
17 |
"#6384FF" |
18 |
]
|
19 |
}]
|
20 |
};
|
Вы можете контролировать внешний вид вышеприведенной диаграммы, используя различные ключи, такие как cutoutPercentage, который определяет процентную долю графика, вырезанного из середины. Вы также можете указать начальный угол диаграммы с помощью ключа rotation. Аналогичным образом, вы также можете указать угол, который будет прорисовываться диаграммой при построении графика с помощью ключа circumference.
Существует две разные анимации, которые можно активировать при рисовании диаграммы. Вы можете указать, должна ли диаграмма иметь анимацию вращения, используя ключ animateRotate. Аналогичным образом вы также можете указать, следует ли масштабировать кольцевую диаграмму из центра с помощью ключа animateScale. Значение animateRotate по умолчанию установлено в true, а значение для animateScale по умолчанию установлено в false.
Как обычно, вы можете управлять цветом фона, цветом границы и шириной границ всех точек данных, используя соответственно ключи backgroundColor, borderColor и borderWidth. Аналогично, hover-значения всех этих свойств можно контролировать с помощью ключей hoverBackgroundColor, hoverBorderColor и hoverBorderWidth.
Ниже приведен код для создания кольцевой диаграммы для приведенных выше данных. Установка значения rotation равна -Math.PI что устанавливает начальную точку на 180 градусов против часовой стрелки. Затем, если мы установим значение circumference в Math.PI, то диаграмма будет занимать только полукруг.
1 |
var oilData = { |
2 |
labels: [ |
3 |
"Saudi Arabia", |
4 |
"Russia", |
5 |
"Iraq", |
6 |
"United Arab Emirates", |
7 |
"Canada" |
8 |
],
|
9 |
datasets: [ |
10 |
{
|
11 |
data: [133.3, 86.2, 52.2, 51.2, 50.2], |
12 |
backgroundColor: [ |
13 |
"#FF6384", |
14 |
"#63FF84", |
15 |
"#84FF63", |
16 |
"#8463FF", |
17 |
"#6384FF" |
18 |
],
|
19 |
borderColor: "black", |
20 |
borderWidth: 2 |
21 |
}]
|
22 |
};
|
23 |
|
24 |
var chartOptions = { |
25 |
rotation: -Math.PI, |
26 |
cutoutPercentage: 30, |
27 |
circumference: Math.PI, |
28 |
legend: { |
29 |
position: 'left' |
30 |
},
|
31 |
animation: { |
32 |
animateRotate: false, |
33 |
animateScale: true |
34 |
}
|
35 |
};
|
Создание диаграмм с пузырьками
Пузырьковые диаграммы используются для построения или отображения трех данных измерений (p1, p2, p3) на диаграмме. Положение и размер пузырьков определяют значение этих трех точек данных. Горизонтальная ось представляет собой первую точку данных (p1), вертикальная ось представляет вторую точку данных (p2), а область пузырька используется для представления значения третьей точки данных (p3).
Одна вещь, которую вы должны иметь в виду, заключается в том, что величина третьей точки данных представлена не радиусом пузырьков, а их площадью. Теперь площадь круга пропорциональна квадрату радиуса. Это означает, что вы должны убедиться, что радиус пузыря, который вы строите, пропорционален квадратному корню от величины третьей точки данных.
Вы можете создать пузырьковые диаграммы в Chart.js, установив значение типа key в bubble. Вот пример создания пузырьковой диаграммы.
1 |
var bubbleChart = new Chart(popCanvas, { |
2 |
type: 'bubble', |
3 |
data: popData, |
4 |
options: chartOptions |
5 |
});
|
Давайте нарисуем вес различных предметов, хранящихся в комнате, используя пузырьковую диаграмму. Данные для диаграммы должны передаваться в виде объекта. Объект данных должен иметь следующий интерфейс, чтобы его можно было правильно построить.
1 |
{
|
2 |
x: <Number>, |
3 |
y: <Number>, |
4 |
r: <Number> |
5 |
}
|
Одно важное различие между пузырьковыми диаграммами и всеми другими графиками состоит в том, что радиус пузыря не масштабируется с помощью диаграммы.
Например, ширина баров на гистограмме может увеличиваться или уменьшаться в зависимости от размера диаграммы. То же самое не происходит с пузырьковыми диаграммами. Радиус пузырьков всегда равен точному числу пикселей, которое вы указали. Это имеет смысл, поскольку в этом типе диаграммы радиус фактически используется для представления реальных данных.
Давайте создадим пузырьковую диаграмму, чтобы построить популяцию оленей в разных местах в лесу.
1 |
var popData = { |
2 |
datasets: [{ |
3 |
label: ['Deer Population'], |
4 |
data: [{ |
5 |
x: 100, |
6 |
y: 0, |
7 |
r: 10 |
8 |
}, { |
9 |
x: 60, |
10 |
y: 30, |
11 |
r: 20 |
12 |
}, { |
13 |
x: 40, |
14 |
y: 60, |
15 |
r: 25 |
16 |
}, { |
17 |
x: 80, |
18 |
y: 80, |
19 |
r: 50 |
20 |
}, { |
21 |
x: 20, |
22 |
y: 30, |
23 |
r: 25 |
24 |
}, { |
25 |
x: 0, |
26 |
y: 100, |
27 |
r: 5 |
28 |
}],
|
29 |
backgroundColor: "#FF9966" |
30 |
}]
|
31 |
};
|
Поскольку радиус здесь пропорционален квадратному корню от фактической величины, число оленей при (80, 80) в 100 раз больше числа оленей при (0, 100).
Как и все другие типы диаграмм, вы можете управлять цветом фона, цветом границы и шириной границы нанесенных точек с помощью ключей backgroundColor, borderColor и borderWidth. Аналогичным образом вы также можете указать цвет фона наведения, цвет границы наведения и ширину границы наведения с помощью ключей hoverBackgroundColor, hoverBorderColor и hoverBorderWidth.
Вы также можете указать дополнительный радиус, который вы хотите добавить к различным пузырькам при наведении с помощью ключа hoverRadius. Помните, что этот радиус добавляется к исходному значению, чтобы нарисовать пузырь, на который был наведен курсор. Если исходный пузырь имел радиус 10, а hoverRadius установлен в 5, то радиус пузыря при наведении будет равен 15.
1 |
var popData = { |
2 |
datasets: [{ |
3 |
label: ['Deer Population'], |
4 |
data: [{ |
5 |
x: 100, |
6 |
y: 0, |
7 |
r: 10 |
8 |
}, { |
9 |
x: 60, |
10 |
y: 30, |
11 |
r: 20 |
12 |
}, { |
13 |
x: 40, |
14 |
y: 60, |
15 |
r: 25 |
16 |
}, { |
17 |
x: 80, |
18 |
y: 80, |
19 |
r: 50 |
20 |
}, { |
21 |
x: 20, |
22 |
y: 30, |
23 |
r: 25 |
24 |
}, { |
25 |
x: 0, |
26 |
y: 100, |
27 |
r: 5 |
28 |
}],
|
29 |
backgroundColor: "#9966FF", |
30 |
hoverBackgroundColor: "#000000", |
31 |
hoverBorderColor: "#9966FF", |
32 |
hoverBorderWidth: 5, |
33 |
hoverRadius: 5 |
34 |
}]
|
35 |
};
|
Вышеуказанные параметры создадут следующую диаграмму пузырьков.
Заключение
В этом уроке вы узнали о трех других типах диаграмм, доступных в Chart.js. Теперь вы можете выбрать подходящий тип диаграммы для построения ваших данных и задать определенные значения для разных ключей, чтобы контролировать их внешний вид. В следующем уроке вы узнаете, как манипулировать шкалами для разных типов диаграмм.
Надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях.
