Има доста JavaScript библиотеки за начертаване на различни диаграми, вариращи от стълбови графики до линейни диаграми и други. Ако се учите как да показвате динамично данни на уебсайта си с JavaScript, Chart.js е една такава библиотека, която трябва да изпробвате.

Как можете да започнете да създавате визуализации на данни с Chart.js? Ще научите как в тази статия.

Да започваме.

Какво е Chart.js?

Chart.js е JavaScript библиотека за визуализация на данни с отворен код, използвана за начертаване на HTML-изобразяеми диаграми. В момента поддържа осем различни типа интерактивни диаграми, които можете също да анимирате. За да направите HTML-базирана графика с chart.js, имате нужда от HTML платно, което да го държи.

Библиотеката приема набор от набори от данни и други параметри за персонализиране, като цвят на фона, цвят на границата и др. Един от наборите от данни е етикет, което представлява стойностите по оста X. Другият е набор от числови стойности, които обикновено лежат на оста Y.

Вие също трябва да посочите типа на графиката в обекта на диаграмата, така че библиотеката да знае коя графика да начертае.

Как да създавате диаграми с Chart.js

Както споменахме по-рано, можете да създавате различни видове диаграми с chart.js. За този урок ще започнете с линейни и стълбови графики. След като разберете концепцията зад тях, ще имате всички инструменти и увереност, от които се нуждаете, за да начертаете другите налични диаграми.

Свързани:Как да направите уебсайта си отзивчив и интерактивен с CSS и JavaScript

За да започнете да използвате chart.js, създайте необходимите файлове. За този урок имената на файловете са chart.html, plot.js, и index.css. Можете да използвате всяка конвенция за именуване за вашите файлове.

Сега поставете следното в глава раздел от вашия HTML файл, за да се свържете към мрежата за доставка на съдържание Chart.js (CDN).

В chart.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

След това създайте HTML платно, за да задържите вашата диаграма и да й дадете документ за самоличност. Също така, свържете се с CSS (index.css) файла в глава раздел и посочете вашия JavaScript (plot.js) файл в тяло раздел.

Структурата на HTML файла изглежда така:

 Графики

И във вашия CSS:

тяло{
 фон-цвят:#383735;
}
h1{
 цвят:#e9f0e9;
 марж вляво: 43%;
}
#plots{
 марж: автоматично;
 цвят на фона: #2e2d2d;
}

CSS стилът по-горе не е установена конвенция. Така че можете да стилизирате своя както искате в зависимост от вашата DOM структура. След като вашите HTML и CSS файлове са готови, е време да начертаете диаграмите си с JavaScript.

Линейната диаграма

За да направите линейна диаграма с chart.js, ще зададете диаграмата Тип да се линия. Това казва на библиотеката да начертае линейна диаграма.

За да демонстрирате това, във вашия JavaScript файл:

// Вземете HTML платното по неговия идентификатор
plots = document.getElementById("plots");
// Примерни набори от данни за X и Y-оси
var months = ["ян", "февруари", "мар", "апр", "май", "юни", "юли"]; //Остава на оста X
var трафик = [65, 59, 80, 81, 56, 55, 60] //Остава на оста Y
// Създаване на екземпляр на обект Chart:
нова диаграма (графики, {
 тип: 'линия', // Деклариране на типа диаграма
 данни: {
 етикети: месеци, // Данни за оста X
 набори от данни: [{
 данни: трафик, // Данни по оста Y
 фонов цвят: '#5e440f',
 Цвят на границата: 'бял',
 попълване: false, // Запълва кривата под линията с цвета на фона. По подразбиране е вярно
 }]
 },
});

Изход:

Чувствайте се свободни да промените попълнете стойност до вярно, използвайте повече данни, или коригирайте цветовете, за да видите какво се случва.

Както можете също да видите, в горната част на диаграмата има малко поле с легенда. Можете да премахнете това вътре в опцията настроики параметър.

В настроики параметърът помага и при други персонализации, освен премахването или включването на легендата. Например, можете да го използвате, за да принудите една ос да започне от нула.

За да декларирате ан настроики параметър, ето как изглежда секцията на диаграмата във вашия JavaScript файл:

// Създайте екземпляр на обект Chart:
нова диаграма (графики, {
 тип: 'линия', // Деклариране на типа диаграма
 данни: {
 етикети: месеци, // Данни за оста X
 набори от данни: [{
 данни: трафик, // Данни по оста Y
 фонов цвят: '#5e440f', //Цвят на точките
 Цвят на границата: 'бял', // Цвят на линията
 попълване: false, // Запълва кривата под линията с цвета на фона. По подразбиране е вярно
 }]
 },
 // Посочете персонализирани опции:
 настроики:{
 легенда: {display: false}, // Премахнете полето с легенда, като го зададете на false. По подразбиране е вярно.
//Посочете настройките за везните. За да накарате оста Y да започне от нула, например:
 везни:{
 yAxes: [{тикове: {min: 0}}] //Можете да повторите същото за оста X, ако съдържа цели числа.
 }
 } 
});

Изход:

Можете също да използвате различни цветове на фона за всяка точка. Промяната на цветовете на фона по този начин обикновено е по-полезна при лентовидните графики.

Създаване на лентови графики с Chart.js

Тук трябва само да промените графиката Тип да се бар. Не е необходимо да задавате попълнете опция, защото лентите автоматично наследяват цвета на фона:

// Създаване на екземпляр на обект Chart:
нова диаграма (графики, {
 тип: 'бар', // Деклариране на типа диаграма
 данни: {
 етикети: месеци, // Данни за оста X
 набори от данни: [{
 данни: трафик, // Данни по оста Y
 фонов цвят: '#3bf70c', //Цвят на лентите
 }]
 },
 настроики:{
 легенда: {display: false}, // Премахнете полето с легенда, като го зададете на false. По подразбиране е вярно.
 }
});

Изход:

Чувствайте се свободни да принудите оста Y да започне от нула или каквато и да е стойност, както направихте за линейната диаграма.

Свързани:Методи за масиви на JavaScript, които трябва да овладеете

За да използвате различни цветове за всяка лента, предайте масив от цветове, които съответстват на броя на елементите във вашите данни в Цвят на фона параметър:

// Създаване на екземпляр на обект Chart:
нова диаграма (графики, {
 тип: 'бар', // Деклариране на типа диаграма
 данни: {
 етикети: месеци, // Данни за оста X
 набори от данни: [{
 данни: трафик, // Данни по оста Y
//Цвят на всяка лента:
 Цвят на фона: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 настроики:{
 легенда: {display: false}, // Премахнете полето с легенда, като го зададете на false. По подразбиране е вярно.
 }
});

Изход:

Създаване на кръгова диаграма с Chart.js

За да начертаете кръгова диаграма, променете типа диаграма на пай. Може също да искате да настроите показването на легендата на вярно за да видите какво представлява всеки сегмент от пая:

// Създайте екземпляр на обект Chart:
нова диаграма (графики, {
 type: 'pie', //Деклариране на типа на диаграмата
 данни: {
 етикети: месеци, //Определя всеки сегмент
 набори от данни: [{
 данни: трафик, //Определя размера на сегмента
 //Цвят на всеки сегмент
 Цвят на фона: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 настроики:{
 легенда: {display: true}, //Това е вярно по подразбиране.
}
});

Изход:

Както направихте в примерите по-горе, можете да изпробвате други диаграми, като промените Тип.

Въпреки това, ето списък на поддържаните chart.js типове диаграми, които можете да изпробвате, като използвате горните конвенции за кодиране:

• бар
• линия
• разпръсна се
• поничка
• пай
• радар
• polarArea
• балон

Играйте наоколо с Chart.js

Въпреки че сте се запознали само с линейните, кръговите и лентовидните графики в този урок, кодовият модел за начертаване на други диаграми с chart.js следва същата конвенция. Така че не се колебайте да си играете и с другите.

С това казано, ако искате повече от това, което chart.js предлага, може да искате да разгледате и някои други библиотеки с диаграми на JavaScript.

6 JavaScript рамки, които си струва да научите

Има много JavaScript рамки, които да помогнат при разработката. Ето някои, които трябва да знаете.

Прочетете Следващото

За автора