Як побудувати просту діаграму за допомогою Chart.js

Автор

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

Давайте розглянемо, як створити просту діаграму за допомогою Chart.js, популярної бібліотеки JavaScript для візуалізації даних.

Що таке Chart.js?

Chart.js це безкоштовний інструмент, який допомагає розробникам створювати інтерактивні діаграми для веб-програм. Елемент canvas HTML5 рендерить діаграми, дозволяючи їм працювати в сучасних браузерах.

Особливості Chart.js

Функції включають:

  • Chart.js виділяється своїм зручним підходом. За допомогою мінімального коду розробники можуть створювати інтерактивні та візуально привабливі діаграми.
  • Бібліотека є універсальною та підтримує різні типи діаграм, як-от лінії, стовпчики, сектори та радари. Він може задовольнити різноманітні потреби представлення даних.
  • Chart.js розробляє діаграми для роботи на настільних комп’ютерах і мобільних пристроях. Вони чуйні та адаптивні.
  • Ви можете змінити діаграми Chart.js, використовуючи багато параметрів замість налаштувань за замовчуванням. Розробники можуть точно налаштовувати діаграми відповідно до конкретних вимог.
  Інтерактивні історії розділів. Коди викупу: викупіть зараз

Налаштування середовища

Ви можете налаштувати бібліотеку одним із двох способів:

Базова структура HTML

Щоб вставити діаграму, вам знадобиться елемент canvas у вашому HTML. Ось базова структура:

 <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <link rel="stylesheet" href="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
   <h1>Welcome to My Data Representation</h1>
   <canvas id="myChart" width="400" height="150"></canvas>
  <script></script>
 </body>
</html>

Щоб створити стиль сторінки, створіть файл style.css і додайте до нього наступний CSS:

 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Tilt Neon", sans-serif;
  padding: 2rem 4rem;
}
h1 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  padding: 3rem;
}

Створення вашої першої діаграми: приклад гістограми

У цьому прикладі ми використаємо гістограму, ідеальну для порівняння окремих точок даних за категоріями.

  • У тезі сценарію внизу вашого HTML почніть із вибору елемента canvas за допомогою властивості id: 
     let canvas = document.getElementById('myChart');
  • Далі отримайте контекст того, як відобразити вашу діаграму. У цьому випадку це двовимірний контекст малювання. 
     let ctx = canvas.getContext('2d');
  • Потім ініціалізуйте нову діаграму на полотні за допомогою функції Chart(). Ця функція приймає в якості першого аргументу контекст полотна, а потім об’єкт параметрів, включаючи дані для відображення на діаграмі. 
     let options = {};
    let myChart = new Chart(canvas, options);
  • Далі заповніть об’єкт параметрів, щоб указати тип діаграми, дані та мітки, які ви хочете мати на діаграмі. 
     let options = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
        }],
      },
    };

    • На даний момент ваша діаграма виглядає так:

      Як налаштувати Steam Link на iPhone, iPad та Apple TV

    Стилі та налаштування діаграми

    Chart.js пропонує безліч опцій для налаштування діаграм, наприклад:

    • Кольори: налаштуйте кольори діаграми, від фону смуг до меж ліній, за допомогою Chart.js.
    • Легенди: для наочності розміщуйте легенди вгорі, внизу, ліворуч або праворуч.
    • Спливаючі підказки. Використовуйте спливаючі підказки, щоб отримати докладні відомості про точки даних, які з’являються при наведенні курсора.
    • Анімація: установіть стиль і темп анімації діаграми для динамічного відображення.

    Як простий приклад, ви можете встановити деякі базові стилі для свого набору даних, змінивши об’єкт параметрів таким чином:

     let options = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: "rgba(75, 192, 192, 0.2)",
          borderColor: "rgba(75, 192, 192, 1)",
          borderWidth: 1,
        }],
      },
    };

    Тепер ваша діаграма має виглядати так:

      Як написати сценарії кол-центру для початківців

    Найкращі практики та поради щодо продуктивності

    Щоб забезпечити оптимальну продуктивність під час відтворення діаграм:

    • Обмежте кількість точок даних, які використовуються в Chart.js, для швидшого рендерингу та кращої взаємодії з користувачем.
    • Якщо ви часто оновлюєте діаграму, використовуйте метод destroy(), щоб видалити стару діаграму перед відтворенням нової.

    Поради, як уникнути поширених пасток

    Ось кілька підводних каменів, яких слід уникати:

    • Переконайтеся, що ваші дані завжди відформатовані в однаковий спосіб, щоб уникнути будь-яких сюрпризів.
    • Щоб покращити продуктивність, краще обмежити анімацію. Хоча вони можуть покращити взаємодію з користувачем, використання занадто великої кількості може спричинити проблеми.

    Chart.js: розширення можливостей візуалізації веб-даних

    Chart.js — корисний інструмент, коли ви хочете відобразити інтерактивні дані привабливим способом. Ви можете легко створювати красиві візуалізації даних, які надають розуміння та обґрунтовують рішення.

    Chart.js надає надійне рішення для візуалізації даних, незалежно від того, маєте ви досвід чи новачок у розробці.