Използвайте Chart.js, за да превърнете данните в интерактивни диаграми

Страница 1 от 2: Използване на Chart.js: Стъпки 01-10

На теория създаването на диаграми не е трудно. Работата с тригонометрията, необходима за кръгова диаграма, е сред най-класическите задачи, използвани за обучение на програмисти. В момента има много библиотеки с диаграми, които се борят за вниманието на разработчиците, но в тази статия ще се съсредоточим върху това как да използваме инструмента с отворен код Chart.js.

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



С Chart.js можете да избирате между осем различни типа диаграми, които да добавите към уебсайтовете си с минимални усилия. Наскоро добавеният модул за анимация обогатява диаграмите с изумителни визуални изображения. Да започваме.



защо има номер на моята хром икона

Щракнете върху иконата в горния десен ъгъл на всяко изображение, за да го увеличите.

01. Разгърнете библиотеката

Тъй като използването на Chart.js е широко разпространено, можете да намерите неговата минимизирана версия от различни CDN, като Cloudflare. Просто го заредете с a таг и се уверете, че a обектът е наблизо - Chart.js прави магията си, използвайки визуализиращата инфраструктура, предоставена в тази джаджа.



02. Започнете инициализация

Първо, заредете рамката

как да добавите текстура в илюстратора -
Първо, заредете рамката

Когато рамката се зареди, следващата стъпка включва получаване на манипулатор Canvas2D, сочещ към екземпляр, създаден в предходната стъпка. След това може да се използва за създаване на нов екземпляр на Диаграма () клас, който е отговорен за обработката на данните, изобразяването и взаимодействието.

(function() { var ctx = document. getElementById('workArea').getContext('2d'); var chart = new Chart(ctx, { type: 'line', options: {}, . . . }); })();

03. Добавете източник на данни

линейна диаграма



За нашата линейна диаграма е необходим само един набор от данни

Класовете на диаграмите вземат указател за данни, който предоставя един или повече DataSet обекти, съдържащи действителната информация за измерване. В случая с нашата линейна диаграма е необходим само един набор от данни. Предлага се със задължителен елемент от данни и няколко незадължителни параметри, управляващи действителния процес на показване.

var chart = new Chart(ctx, { type: 'line', options: {}, data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] } });

04. Спрете всяко трептене

Chart.js се предлага със сложна логика за преоразмеряване, която - за съжаление - от време на време има грешка в размерите на екрана. Ограничаване на размера на елемент за CSS, за съжаление, не прави номера. Вместо това, както поддръжката на съотношението, така и реакцията трябва да бъдат деактивирани чрез полето за опции, придружаващо конструктора на класове диаграми.

(function() { var ctx = document. getElementById('workArea').getContext('2d'); var chart = new Chart(ctx, { type: 'line', options: { responsive: false,maintainAspectRatio: false},

05. Добавете оформления

Перифразирайки Андрей Туполев: сега, когато малкият лети, нека изведем по-големия. Показаното скеле, придружаващо тази стъпка, „умножава“ нашата диаграма - вместо да работим с един елемент Canvas, сега създаваме общо четири от тях и ги подреждаме на екрана по начин, подобен на осцилоскопа на LeCroy. За съжаление, това не се получава съвсем по предназначение.

как да попълните пътека в

06. Укротете всички грешки при изобразяването

таговете налагат структура отвън '>

Wrapper етикетите налагат структура отвън

Най-безопасният начин за обработка на диаграми Chart.js в сложни оформления включва използването на обвивка етикети. Те налагат структура отвън, като по този начин гарантират, че механизмът за вътрешно оформление не може да причини повече вреда, отколкото е необходимо. В този случай обаче се уверете, че активирате отново функцията за реагиране.

document.addEventListener('DOMContentL oaded', function(){ var ctx = document. getElementById('workArea').getContext('2d'); var chart = new Chart(ctx, { type: 'line', options: { },

07. Опитайте барове

Създаването на диаграми е просто

Създаването на диаграми е просто

Винаги изобразяването на линейни диаграми става досадно бързо. Нека да оправим нещата, като променим свойството type на bar, като по този начин ще дадем диаграми на бара като тази, показана на фигурата, придружаваща тази стъпка. Ние популяризираме полето за данни до „глобален“ обхват, за да елиминираме повторната употреба.

document.addEventListener('DOMContentLoaded', function(){ var myfield = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }] }; . . . ctx = document. getElementById('workArea4').getContext('2d'); chart = new Chart(ctx, { type: 'bar', options: { }, data: myfield }); });

08. Избягвайте пайове

кръгови диаграми, превземащи екрана

Кръговите диаграми изискват специално третиране, ако не искате те да запълват целия ви екран

На теория, кръгова диаграма може да бъде изобразена по същите линии. Премахнете свойствата на цвета, за да предотвратите еднакъв външен вид, и задайте свойството type на pie. За съжаление, това не се получава съвсем - когато приключи, кръговата диаграма ще запълни целия екран. Това се дължи на специалността на инструмента за визуализация на пай, който използва „по-голямото“ от двете свойства, за да определи радиуса на пай.

var mypie = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', data: [0, 10, 5, 2, 20, 30, 45], }] }; ctx = document.getElementById('workArea2'). getContext('2d'); chart = new Chart(ctx, { type: 'pie', options: { }, data: mypie });

09. Решете проблема

Отворете файла „index.js“, създаден в стъпка 1. Започнете, като посочите типа графика като линия и добавите данните, които да бъдат визуално представени, както е показано по-долу.

10. Нека Chart.js мащабира диаграмата

Друг подход за решаване на проблема включва повторно деактивиране на keepAspectRatio особеност. По този начин на механизма за диаграми е позволено да мащабира диаграмата, както намери за добре, като гарантира, че целият кръг се показва на екрана.

ctx = document.getElementById('workArea2'). getContext('2d'); chart = new Chart(ctx, { type: 'pie', options: {maintainAspectRatio:false }, data: mypie });

Следваща страница: Завършете създаването на вашата интерактивна диаграма с Chart.js

каква е разликата между изкуство и дизайн

Текуща страница: Използване на Chart.js: Стъпки 01-10

Следваща страница Използване на Chart.js: Стъпки 11-20