Використовуйте chart.js, щоб перетворити дані на інтерактивні діаграми

Sep 13, 2025
Як

У теорії створення діаграм не складно. Обробка тригонометрії, необхідної для кругової діаграми, є однією з найбільш класичних робочих місць, що використовуються для навчання програмістів. В даний час існує багато бібліотек діаграми, але в цій статті ми збираємося зосередити увагу на те, як користуватися пристроєм з відкритим вихідним кодом.

Ми покладемо бібліотеку через свої кроки, створюємо набір друкованих діаграм з випадкових даних. Chart.js є особливо популярним Інструмент веб-дизайну Оскільки він пропонує унікальний компроміс між легкістю використання та розширеними функціями, що дозволяє створювати інтерактивні діаграми та залучення інфографіка .

За допомогою chart.js, ви можете вибрати з восьми різних типів графіків, щоб додати до своїх веб-сайтів з мінімальними зусиллями. Нещодавно-доданий модуль анімації збагачує діаграми з язиками Snazzy. Створення нового сайту для розміщення ваших діаграм? Отримати свій веб хостинг місце, і обов'язково спробуйте вершину Веб-будівельник . Гаразд, давайте почнемо.

Натисніть значок у верхньому правому куті кожного зображення, щоб збільшити його.

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

Як широко розповсюджено, ви можете знайти свою мініфіковану версію з різних CDN, таких як CloudFlare. Просто завантажте його & lt; сценарій & gt; тег і переконайтеся, що a & lt; canvas & gt; Об'єкт знаходиться поруч - Chart.js робить свою магію за допомогою інфраструктури надання надання наданої в цьому віджеті. 

 & lt; html & gt;
& lt; head & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; canvas id = "workarea" & gt;
& lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Початок ініціалізації

First, load up the framework

По-перше, завантажте рамку

Коли каркас завантажено, наступний крок включає в себе отримання ручки Canvas2D, вказуючи на & lt; canvas & gt; екземпляр, створений у попередньому кроці. Це може бути використаний для створення нового екземпляра Діаграма () Клас, який відповідає за обробку даних, рендеринг та взаємодію. 

 & lt; сценарій & gt;
(Функція () {
var ctx = документ.
getelementbyid ('workarea'). GetContext ("2D");
Var Chart = Нова діаграма (CTX,
{
Тип: "Лінія",
Опції: {},
. . .
});
}) ();
& lt; / script & gt;

03. Додайте джерело даних

line chart

Для нашого діаграму лінії потрібен лише один набір даних

Класи діаграми приймають покажчик даних, який забезпечує один або кілька Набір даних Об'єкти, що містять фактичну інформацію вимірювання. У випадку нашої лінії діаграми потрібен лише один набір даних. Він поставляється з обов'язковим елементом даних та декількома необов'язковими параметрами, що регулюють фактичний процес відображення. 

 Var Chart = Нова діаграма (CTX, {
Тип: "Лінія",
Опції: {},
Дані: {
Етикетки: ["Січень",
"Лютий", "Марш", "Квітень", "Травень", "Червень",
"Липень"],
Датації: [{{
Мітка: "Моє перше набір даних",
Колір фону:
        'RGB (255, 99, 132)',
Корпорація:
'RGB (255, 99, 132)',
Дані: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Зупиніть будь-які мерехтіння

Chart.js поставляється з вишуканою логікою зміщення розміру, яка - на жаль, - прагнуть від часу від часу, щоб отримати розмір екрана. Обмеження розміру & lt; canvas & gt; Елемент через CSS, на жаль, не робить трюку. Навпаки, обидва співвідношення співвідношення, так і відповідальність повинні бути відключені за допомогою поля параметрів, що супроводжують конструктор класичних класів. 

 & lt; canvas id = "workarea" style = "ширина: 800px;
Висота: 600px; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; сценарій & gt;
(Функція () {
var ctx = документ.
getelementbyid ('workarea'). GetContext ("2D");
Var Chart = Нова діаграма (CTX,
{
Тип: "Лінія",

Опції: {
Відповідаю: False, Seciredaspectratio:
false},

05. Додайте макети

До парафразу Андрій Туполєв: Тепер, коли маленький літаючий, давайте піднімаємо більше. Ліси показали, що супроводжує цей крок "помножена на нашу діаграму - замість того, щоб працювати з одним елементом полотна, тепер ми створюємо в цілому чотири з них і влаштовуємо їх на екрані, подібний до лекрового осцилоскопа. На жаль, це не зовсім не працює, як передбачалося. 

 & lt; canvas id = "workarea"
Стиль = "Позиція: абсолютна, топ: 0%; залишилося: 0%;
Ширина: 49%; Висота: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; canvas id = "workarea2"
Стиль = "Позиція: абсолютна, топ: 0%; залишилося: 51%;
Ширина: 49%; Висота: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; canvas id = "workarea3"
Стиль = "Позиція: абсолютна, топ: 51%; залишилося: 0%;
Ширина: 49%; Висота: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; canvas id = "workarea4"
Стиль = "Позиція: абсолютна, топ: 51%; залишилося: 51%;
Ширина: 49%; Висота: 49%; "& gt; & lt; / canvas & gt; & lt; / canvas & gt;

06. Приручення будь-яких помилок

Wrapper <div> tags enforce a structure from the outside

Wrapper & Lt; Div & GT; Теги забезпечують дотримання структури ззовні

Найбезпечніший спосіб керування діаграмою.JS діаграм у складних макетах передбачає використання обгортки & lt; div & gt; теги. Вони виконують структуру ззовні, тим самим забезпечуючи, щоб внутрішній макет двигуна не може зробити більше шкоди, ніж це необхідно. У цьому випадку, однак, забезпечити зміну функції відповідальності. 

 & lt; div style = "Позиція: абсолютна, топ: 0%;
0%; Ширина: 49%; Висота: 49%; "& GT;
& lt; canvas id = "workarea" & gt; & lt; / canvas & gt; & lt; /
полотно & gt;
& lt; / div & gt;
& lt; div style = "Позиція: абсолют, топ: 0%;
51%; Ширина: 49%; Висота: 49%; "& GT;
& lt; canvas id = "workarea2" & gt; & lt; / canvas & gt; & lt; /
полотно & gt;
& lt; / div & gt;
& lt; div style = "Позиція: абсолют, вершина: 51%;
0%; Ширина: 49%; Висота: 49%; "& GT;
& lt; canvas id = "workarea3" & gt; & lt; / canvas & gt; & lt; /
полотно & gt;
& lt; / div & gt;
& lt; div style = "Позиція: абсолют, вершина: 51%;
51%; Ширина: 49%; Висота: 49%; "& GT;
& lt; canvas id = "workarea4" & gt; & lt; / canvas & gt; & lt; /
полотно & gt;
& lt; / div & gt;
& lt; сценарій & gt;
document.addeventlistener ("domcontentl
Oaded ", функція () {
var ctx = документ.
getelementbyid ('workarea'). GetContext ("2D");
var chart = new
Діаграма (CTX, {
Тип:
"Лінія",
Опції:
{},

07. Спробуйте бари

Creating bar charts is simple

Створення карткових графіків простий

Завжди рендеринг лінійних графіків швидко стає нудним. Давайте випускаємо речі, змінюючи властивість типу до бару, тим самим дає діаграми, такі як, як показано на малюнку, що супроводжує цей крок. Ми рекламуємо поле даних "глобальний" масштаб, щоб усунути повторне використання. 

 & lt; сценарій & gt;
document.addeventlistener ("domcontentloaded", функція () {
var myfield = {
Етикетки: ["Січень", "Лютий", "Марш", "Квітень", "Травень", "Червень", "Липень"],
Датації: [{{
Мітка:
"Моє перше набір даних",

Backgroundcolor: 'RGB (255, 99, 132)',

Кордонкол: "RGB (255, 99, 132) ',
Дані: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = Документ.
getelementByid ('workarea4'). GetContext ("2D");
Діаграма = Нова діаграма (CTX, {
Тип: "Бар",
Опції: {},
Дані: Myfield
});
});
& lt; / script & gt;

08. Уникайте пирогів

pie charts taking over the screen

Графіки пиріг вимагають спеціального лікування, якщо ви не хочете, щоб вони заповнювали весь свій екран

У теорії, кругова діаграма може бути надана вздовж тих самих ліній. Видаліть властивості кольорів, щоб запобігти рівномірному вигляду та встановити властивість типу до пирога. На жаль, це не зовсім не працює - коли це зроблено, кругова діаграма заповнить весь екран. Це викликано спеціальністю Pie Renderer, який використовує "більшу" двох властивостей для визначення радіуса пиріга. 

 var mypie = {
Етикетки: ["Січень", "Лютий", "Марш", "Квітень", "Травень", "Червень", "Липень"],
Датації: [{{
Мітка: "Моє перше набір даних",
Дані: [0, 10, 5, 2, 20, 30, 45],
}]
};
ctx = document.getelementByid ('workarea2').
getContext ('2D');
Діаграма = Нова діаграма (CTX, {
Тип: "пиріг",
Опції: {},
Дані: mypie
});

09. Вирішіть проблему

Відкрийте файл "index.js", створений на кроці 1. Почніть, вказавши тип графіка як лінію та додавання даних, щоб бути візуально, як показано нижче. 

 & lt; body & gt;
& lt; div style = "Позиція: абсолют, вершина: 0%;
ліворуч: 0%; Ширина: 49%; Висота: 49%; "& GT;
& lt; canvas id = "workarea" & gt; & lt; /
полотно & gt; & lt; / canvas & gt;
& lt; / div & gt;
& lt; div style = "Позиція: абсолют, вершина: 0%;
ліворуч: 51%; Ширина: 29%; Висота: 49%; "& GT;
& lt; canvas id = "workarea2" & gt; & lt; /
полотно & gt; & lt; / canvas & gt;
& lt; / div & gt;

10. Нехай chart.js rescale діаграма

Інший підхід до вирішення проблеми передбачає повторне відключення secementaspectratio функція.Таким чином, двигун діаграми дозволяється розміщувати діаграму, оскільки вона бачить придатність, забезпечуючи, щоб весь коло показує на екрані. 

 CTX = Document.GetElementByid ('workarea2').
getContext ('2D');
Діаграма = Нова діаграма (CTX, {
Тип: "пиріг",
Опції: {stectionaspectratio: false
},
Дані: mypie
});

Наступна сторінка: Завершіть створення інтерактивної діаграми з Chart.JS

  • 1
  • 2

Поточна сторінка: Використання chart.js: кроки 01-10

Як - Найпопулярніші статті

Як створити 3D сканування з захопленням реальності

Як Sep 13, 2025

(Зображення кредиту: Філ Нолан) Захоплення реальності - це чудов�..

Як стискати зображення: довідник веб-дизайнера

Як Sep 13, 2025

Середня швидкість сучасного підключення до Інтернету звучить дуже фу�..

Створіть анімований текстовий ефект "

Як Sep 13, 2025

Додавання ефектів до тексту може додати весь новий рівень залучення т�..

Як зробити смачні текстури з олівцями

Як Sep 13, 2025

Під час навчання як малювати Натюрморт, важливо створити інте�..

Як малювати фантастичні звірі

Як Sep 13, 2025

Після того, як ви придумаєте ідею для фантастичної істоти, наступний к�..

Створити інтерактивні 3D-візуальні матеріали з трьома.JS

Як Sep 13, 2025

Цей підручник WebGL демонструє, як створити 3D-симуляцію навколишнього се..

Створіть цифровий тракт ескізу

Як Sep 13, 2025

У цьому підручнику ми беремо механічну малювання Toy Toy Ench ескіз як натх�..

Як досконале волосся у ваших портретах

Як Sep 13, 2025

Page 1 з 2: Сторінка 1 Сторінка 1 ..

Категорії