В первом вводном руководстве по Chart.js вы узнали, как установить и использовать Chart.js в проекте. Вы также узнали о некоторых глобальных параметрах конфигурации, которые можно использовать для изменения шрифтов и всплывающих подсказок различных диаграмм. В этом уроке вы узнаете, как создавать линейные и гистограммы в Chart.js.
Создание линейных графиков
Линейные диаграммы полезны, когда вы хотите показать изменения в значении данной переменной относительно изменений в некоторой другой переменной. Другой переменной обычно является время. Например, линейные графики могут использоваться, чтобы показать скорость транспортного средства в течение определенных временных интервалов.
Chart.js позволяет создавать линейные диаграммы, устанавливая ключ type в line . Вот пример:
|
1
2
3
4
5
|
var lineChart = new Chart(speedCanvas, {
type: ‘line’,
data: speedData,
options: chartOptions
});
|
Теперь мы будем предоставлять данные, а также параметры конфигурации, которые нам нужны для построения линейного графика.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
var speedData = {
labels: [«0s», «10s», «20s», «30s», «40s», «50s», «60s»],
datasets: [{
label: «Car Speed»,
data: [0, 59, 75, 20, 20, 55, 40],
}]
};
var chartOptions = {
legend: {
display: true,
position: ‘top’,
labels: {
boxWidth: 80,
fontColor: ‘black’
}
}
};
|
Поскольку мы не предоставили цвет для линейного графика, будет использоваться цвет по умолчанию rgba(0,0,0,0.1) . Мы не вносили никаких изменений в подсказку или легенду. Вы можете прочитать больше об изменении размера ящика, всплывающей подсказке или легенде в первой части серии .
В этой части мы сосредоточимся на различных параметрах, специально предназначенных для изменения линейных графиков. Все параметры и данные, которые мы предоставили выше, создадут следующую таблицу.
Цвет области под кривой определяется ключом backgroundColor . Все линейные диаграммы, нарисованные с использованием этого метода, будут заполнены заданным цветом. Вы можете установить значение ключа fill на false если вы хотите только нарисовать линию, а не залить ее каким-либо цветом.
Еще одна вещь, которую вы могли заметить, это то, что мы используем дискретные точки данных для построения графика. Библиотека автоматически интерполирует значения всех других точек с помощью встроенных алгоритмов.
По умолчанию точки строятся с использованием пользовательской взвешенной кубической интерполяции. Однако вы также можете установить monotone значение ключа cubicInterpolationMode чтобы точнее отображать точки, когда диаграмма, которую вы строите, определяется уравнением y = f(x) . Натяжение построенной кривой Безье определяется lineTension . Вы можете установить его значение на ноль, чтобы рисовать прямые линии. Обратите внимание, что этот ключ игнорируется, когда значение cubicInterpolationMode уже указано.
Вы также можете установить значение цвета границы и его ширину, используя ключи borderColor и borderWidth . Если вы хотите построить график с использованием пунктирной линии вместо сплошной линии, вы можете использовать ключ borderDash . В качестве значения он принимает массив, элементы которого определяют длину и интервал между тире соответственно.
Внешний вид нанесенных точек можно контролировать с помощью pointBorderColor , pointBackgroundColor , pointBorderWidth , pointRadius и pointHoverRadius . Существует также ключ pointHitRadius , который определяет расстояние, на котором нанесенные точки начнут взаимодействовать с мышью.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
var speedData = {
labels: [«0s», «10s», «20s», «30s», «40s», «50s», «60s»],
datasets: [{
label: «Car Speed»,
data: [0, 59, 75, 20, 20, 55, 40],
lineTension: 0,
fill: false,
borderColor: ‘orange’,
backgroundColor: ‘transparent’,
borderDash: [5, 5],
pointBorderColor: ‘orange’,
pointBackgroundColor: ‘rgba(255,150,0,0.5)’,
pointRadius: 5,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: ‘rectRounded’
}]
};
|
Приведенный выше объект speedData отображает те же точки данных, что и предыдущая диаграмма, но с настраиваемыми значениями, установленными для всех свойств.
Вы также можете построить несколько линий на одном графике и предоставить различные варианты для рисования каждой из них, например:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var dataFirst = {
label: «Car A — Speed (mph)»,
data: [0, 59, 75, 20, 20, 55, 40],
lineTension: 0.3,
// Set More Options
};
var dataSecond = {
label: «Car B — Speed (mph)»,
data: [20, 15, 60, 60, 65, 30, 70],
// Set More Options
};
var speedData = {
labels: [«0s», «10s», «20s», «30s», «40s», «50s», «60s»],
datasets: [dataFirst, dataSecond]
};
var lineChart = new Chart(speedCanvas, {
type: ‘line’,
data: speedData
});
|
Создание гистограмм
Гистограммы полезны, когда вы хотите сравнить одну метрику для разных объектов — например, количество автомобилей, проданных разными компаниями, или количество людей в определенных возрастных группах в городе. Вы можете создавать гистограммы в Chart.js, установив ключ type в bar . По умолчанию это создаст диаграммы с вертикальными полосами. Если вы хотите создать диаграммы с горизонтальными полосами, вам нужно будет установить type horizontalBar .
|
1
2
3
4
5
|
var barChart = new Chart(densityCanvas, {
type: ‘bar’,
data: densityData,
options: chartOptions
});
|
Давайте создадим гистограмму, которая отображает плотность всех планет в нашей солнечной системе. Данные о плотности были взяты из Планетарного бюллетеня, предоставленного НАСА.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var densityData = {
label: ‘Density of Planets (kg/m3)’,
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};
var barChart = new Chart(densityCanvas, {
type: ‘bar’,
data: {
labels: [«Mercury», «Venus», «Earth», «Mars», «Jupiter», «Saturn», «Uranus», «Neptune»],
datasets: [densityData]
}
});
|
Приведенные выше параметры создадут следующую диаграмму:
Как и на линейном графике, столбцы на этот раз также заполнены светло-серым цветом. Вы можете изменить цвет полос с помощью клавиши backgroundColor . Точно так же цвет и ширина границ различных баров могут быть определены с помощью borderColor и borderWidth .
Если вы хотите, чтобы библиотека пропускала рисование границы для определенного ребра, вы можете указать это ребро в качестве значения ключа borderSkipped . Вы можете установить его значение top , left , bottom или right . Вы также можете изменить границу и цвет фона различных полос, когда они hoverBorderColor hoverBackgroundColor клавиши hoverBorderColor и hoverBackgroundColor .
Столбцы на столбчатой диаграмме выше были рассчитаны автоматически. Однако вы можете контролировать ширину отдельных баров, используя свойства barThickness и barPercentage . Клавиша barThickness используется для установки толщины полос в пикселях, а barPercentage — для установки толщины в процентах от доступной ширины категории.
Вы также можете показать или скрыть конкретную ось, используя ее клавишу display . Установка значения display в false будет скрывать эту конкретную ось. Вы можете прочитать больше обо всех этих опциях на странице документации .
Давайте сделаем график плотности более интересным, переопределив значения по умолчанию для гистограмм, используя следующий код.
|
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
|
var densityData = {
label: ‘Density of Planets (kg/m3)’,
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
backgroundColor: [
‘rgba(0, 99, 132, 0.6)’,
‘rgba(30, 99, 132, 0.6)’,
‘rgba(60, 99, 132, 0.6)’,
‘rgba(90, 99, 132, 0.6)’,
‘rgba(120, 99, 132, 0.6)’,
‘rgba(150, 99, 132, 0.6)’,
‘rgba(180, 99, 132, 0.6)’,
‘rgba(210, 99, 132, 0.6)’,
‘rgba(240, 99, 132, 0.6)’
],
borderColor: [
‘rgba(0, 99, 132, 1)’,
‘rgba(30, 99, 132, 1)’,
‘rgba(60, 99, 132, 1)’,
‘rgba(90, 99, 132, 1)’,
‘rgba(120, 99, 132, 1)’,
‘rgba(150, 99, 132, 1)’,
‘rgba(180, 99, 132, 1)’,
‘rgba(210, 99, 132, 1)’,
‘rgba(240, 99, 132, 1)’
],
borderWidth: 2,
hoverBorderWidth: 0
};
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5
}]
},
elements: {
rectangle: {
borderSkipped: ‘left’,
}
}
};
var barChart = new Chart(densityCanvas, {
type: ‘horizontalBar’,
data: {
labels: [«Mercury», «Venus», «Earth», «Mars», «Jupiter», «Saturn», «Uranus», «Neptune»],
datasets: [densityData],
},
options: chartOptions
});
|
Объект densityData используется для установки границы и цвета фона полос. В приведенном выше коде есть две вещи, на которые стоит обратить внимание. Во-первых, значения свойств barPercentage и borderSkipped были установлены внутри объекта chartOptions вместо объекта dataDensity .
Во-вторых, на этот раз type графика был установлен в horizontalBar бар. Это также означает, что вам придется изменить значения barThickness и barPercentage для оси Y вместо оси X, чтобы они имели какое-либо влияние на столбцы.
Приведенные выше параметры создадут следующую гистограмму.
Вы также можете построить несколько наборов данных на одном графике, назначив идентификатор соответствующей оси определенному набору данных. Ключ xAxisID используется для назначения идентификатора любой оси X вашему набору данных. Аналогично, ключ yAxisID используется для назначения идентификатора любой оси Y вашему набору данных. Обе оси также имеют ключ id , который можно использовать для назначения им уникальных идентификаторов.
Если последний абзац был немного запутанным, следующий пример поможет разобраться.
|
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
|
var densityData = {
label: ‘Density of Planet (kg/m3)’,
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
backgroundColor: ‘rgba(0, 99, 132, 0.6)’,
borderColor: ‘rgba(0, 99, 132, 1)’,
yAxisID: «y-axis-density»
};
var gravityData = {
label: ‘Gravity of Planet (m/s2)’,
data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
backgroundColor: ‘rgba(99, 132, 0, 0.6)’,
borderColor: ‘rgba(99, 132, 0, 1)’,
yAxisID: «y-axis-gravity»
};
var planetData = {
labels: [«Mercury», «Venus», «Earth», «Mars», «Jupiter», «Saturn», «Uranus», «Neptune»],
datasets: [densityData, gravityData]
};
var chartOptions = {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.6
}],
yAxes: [{
id: «y-axis-density»
}, {
id: «y-axis-gravity»
}]
}
};
var barChart = new Chart(densityCanvas, {
type: ‘bar’,
data: planetData,
options: chartOptions
});
|
Здесь мы создали две оси Y с уникальными идентификаторами, и они были назначены отдельным наборам данных с yAxisID ключа yAxisID . barPercentage и categoryPercentage были использованы здесь для группировки полос для отдельных планет. Если установить для categoryPercentage более низкое значение, пространство между столбцами разных планет увеличивается. Точно так же установка barPercentage на более высокое значение уменьшает пространство между барами одной и той же планеты.
Последние мысли
В этом уроке мы рассмотрели все аспекты линейных диаграмм и гистограмм в Chart.js. Теперь у вас должна быть возможность создавать основные диаграммы, изменять их внешний вид и отображать несколько наборов данных на одном графике без каких-либо проблем. В следующей части серии вы узнаете о картах радаров и полярных областей в Chart.js.
Я надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях.