В последних четырех уроках вы многое узнали о Chart.js. После прочтения первых четырех руководств вы сможете настраивать подсказки и метки , изменять шрифты и создавать различные типы диаграмм. Один из аспектов Chart.js, который еще не был рассмотрен в этой серии, — это весы.
Масштабы сильно изменились с версии v1.0 библиотеки и стали намного более мощными. В этом руководстве вы узнаете, как управлять масштабами и контролировать их внешний вид, используя различные опции, предоставляемые библиотекой.
Изменение линий сетки
Все параметры конфигурации для линий сетки вложены в параметр масштаба в ключе gridLines . Этот ключ определяет параметры для настройки линий сетки, которые проходят перпендикулярно осям. Давайте изменим линии сетки линейного графика, который вы создали в руководстве по линейным и линейным диаграммам .
Вы можете показать или скрыть линии сетки диаграммы, используя клавишу display . Его начальное значение — true , поэтому линии сетки отображаются по умолчанию. Цвет линий сетки можно указать с помощью клавиши color . Если вы хотите, чтобы линии сетки состояли из штрихов, а не были сплошными линиями, вы можете borderDash значение длины и расстояния между штрихами как значение ключа borderDash . Вы можете установить ширину и цвет линий для первого или нулевого индекса, используя ключи zeroLineWidth и zeroLineColor соответственно.
На всех графиках до этого момента у шкал не было никакого описательного текста, чтобы позволить зрителям знать, что представляет конкретная ось. Это может сделать диаграммы менее полезными. Например, если вы видите график скорости автомобиля и не можете определить единицу, в которой скорость отображается на оси Y, график в значительной степени бесполезен.
Вы можете показать или скрыть метки шкалы на графике с помощью клавиши display . Метки масштаба по умолчанию скрыты. Текст, который должен отображаться в этих масштабах, можно указать с labelString ключа labelString . Вы также можете управлять цветом, семейством, размером и стилем fontColor , используя fontColor , fontFamily , fontSize и fontStyle соответственно.
Вот та же самая старая диаграмма скорости автомобиля с другим набором определенных опций диаграммы.
|
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
|
var chartOptions = {
legend: {
display: true,
position: ‘top’,
labels: {
boxWidth: 80,
fontColor: ‘black’
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: «black»
},
scaleLabel: {
display: true,
labelString: «Time in Seconds»,
fontColor: «red»
}
}],
yAxes: [{
gridLines: {
color: «black»,
borderDash: [2, 5],
},
scaleLabel: {
display: true,
labelString: «Speed in Miles per Hour»,
fontColor: «green»
}
}]
}
};
|
Есть еще один ключ, который называется offsetGridLines . При значении true метки смещаются к середине линий сетки. Это обычно полезно при создании гистограмм.
Настройка линейных весов
Линейные шкалы используются для отображения числовых данных. Эти шкалы могут быть созданы на оси X или Y. В большинстве случаев Chart.js автоматически определяет минимальное и максимальное значения для весов. Однако это может привести к некоторой путанице.
Допустим, вы хотите построить оценки учеников в классе. Если максимальное количество баллов за тест было 200, но ни один из студентов не набрал более 180 баллов, то шкала, скорее всего, будет максимально равна 180. В таких случаях читатели не смогут узнать, были ли максимальные баллы 180 или 200. ,
Chart.js имеет несколько встроенных опций, которые позволяют вам управлять различными клавишами для весов. Вы можете указать минимальное и максимальное значение для весов, используя клавиши min и max . Размер шага весов можно контролировать с stepSize свойства stepSize . Таким образом, вы можете определить, сколько линий сетки должно быть нарисовано на графике. Другой способ установить ограничение на количество линий сетки и отметок, показанных на графике, — использовать ключ maxTicksLimit .
Вот код для указания минимального и максимального значений шкалы для горизонтальной шкалы на гистограмме для предыдущего урока этой серии.
|
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
|
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5,
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: «black»,
zeroLineWidth: 2
},
ticks: {
min: 0,
max: 6500,
stepSize: 1300
},
scaleLabel: {
display: true,
labelString: «Density in kg/m3»
}
}]
},
elements: {
rectangle: {
borderSkipped: ‘left’,
}
}
};
|
Как и линейная шкала, вы также можете создавать логарифмические шкалы для отображения значений на графике. В этом случае логарифмическая интерполяция используется для определения положения точки на осях. Эти шкалы также могут быть размещены как по оси X, так и по оси Y.
Настройка радиальных линейных весов
Этот тип шкалы используется для типов карт радара и полярных зон. В отличие от обычного линейного масштаба, он перекрывает область диаграммы, а не располагается на оси.
Есть много ключей, специально предназначенных для радиальных шкал. Например, вы можете использовать клавишу lineArc чтобы указать, должны ли линии сетки быть круглыми или прямыми. Значение по умолчанию false для радиолокационных карт и true для полярных карт.
С помощью клавиши angleLines вы можете контролировать вид линий, которые излучаются от центра диаграммы к ее точечным меткам. Он принимает объект в качестве своего значения. Объект может содержать ключи для управления цветом и шириной угловых линий. Вы можете скрыть линии угла, установив значение клавиши display на false . Цвет и ширина угловых линий можно контролировать с помощью клавиш color и lineWidth .
Внешний вид меток точек можно контролировать с pointLabels клавиши pointLabels . Как и угловые линии, этот ключ также принимает объект в качестве значения. Обратите внимание, что эти параметры действуют только тогда, когда значение lineArc установлено в false . Цвет, семейство, размер и стиль шрифта можно указать с помощью fontColor , fontFamily , fontSize и fontStyle .
Вы также можете установить минимальное и максимальное значение для шкалы с помощью клавиш min и max . Размер шага и максимальное количество stepSize на шкале можно указать с помощью stepSize и maxTicksLimit . Эти опции доступны под ticks ключом. Некоторые другие ключи, доступные внутри showLabelBackdrop , это showLabelBackdrop , showLabelBackdrop , backDropPaddingY и backDropPaddingY . Вы можете использовать их, чтобы показать или скрыть фон за метками галочек и контролировать его ширину, высоту и цвет.
Вы также можете использовать ключ gridLines который мы использовали для линейной диаграммы, чтобы установить цвет и ширину линий сетки на радиолокационной диаграмме. Вот несколько вариантов создания радиолокационной карты с настроенными масштабами.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var chartOptions = {
scale: {
gridLines: {
color: «black»,
lineWidth: 3
},
angleLines: {
display: false
},
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20
},
pointLabels: {
fontSize: 18,
fontColor: «green»
}
},
legend: {
position: ‘left’
}
};
|
Настройка шкал времени
Вы можете использовать шкалу времени для отображения времени и даты на графике. Как упоминалось во вводном руководстве по Chart.js, вам необходимо включить Moment.js в свои проекты, чтобы отобразить время. Одно ограничение на использование шкалы времени состоит в том, что она может отображаться только на оси X. Все параметры конфигурации для шкалы времени находятся под подопцией time .
Чтобы создать шкалу времени, вы должны установить значение клавиши type на time в xAxes . После этого вы можете установить значение разных ключей по time . Единица, которая должна использоваться для рисования галочек, устанавливается с помощью клавиши unit .
Шаг блока можно указать с unitStepSize ключа unitStepSize . Формат, в котором должны отображаться метки для displayFormats указывается с помощью displayFormats . Вы можете прочитать больше о допустимых форматах строк на веб-сайте Moment.js .
Формат отображения времени во всплывающих подсказках можно указать с tooltipFormat клавиши tooltipFormat .
Вы также можете округлить время, прежде чем наносить его на график, используя клавишу round . Будьте осторожны при установке значения для round . Допустим, вы установили его значение в hour и на графике необходимо отобразить два раза. Если одно время 5:30, а другое 5:50, они оба будут нанесены на отметку в 5:00. Установка его значения в minute будет отображать их на отметках 5:30 и 5:50 соответственно.
Линейная диаграмма, построенная в начале урока, может быть построена с использованием временной шкалы с помощью следующего кода.
|
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 chartOptions = {
legend: {
display: true,
position: ‘top’,
labels: {
boxWidth: 80,
fontColor: ‘black’
}
},
scales: {
xAxes: [{
type: «time»,
time: {
unit: ‘hour’,
unitStepSize: 0.5,
round: ‘hour’,
tooltipFormat: «h:mm:ss a»,
displayFormats: {
hour: ‘MMM D, h:mm A’
}
}
}],
yAxes: [{
gridLines: {
color: «black»,
borderDash: [2, 5],
},
scaleLabel: {
display: true,
labelString: «Speed in Miles per Hour»,
fontColor: «green»
}
}]
}
};
|
Последние мысли
Этот урок помог вам узнать о различных видах весов в Chart.js. Теперь вы можете легко настроить шкалы на графике, контролируя их цвет, минимальное и максимальное значение, количество тиков и другие подобные факторы.
Прочитав все пять руководств этой серии, вы сможете создавать все виды диаграмм, доступных в Chart.js. Надеюсь, вам понравился учебник и сериал.
Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato . Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях. Вы когда-нибудь использовали эту библиотеку в своих проектах? Пожалуйста, поделитесь некоторыми советами в комментариях.