Jak vytvořit jednoduchý graf pomocí Chart.js

V dnešní době, kdy se rozhodnutí opírají o data, je zásadní umět je vizualizovat tak, aby byly srozumitelné pro každého. Tabulky a grafy jsou skvělým nástrojem, který nám pomáhá pochopit komplexní data, odhalit trendy a identifikovat vzorce.

Pojďme se podívat, jak si můžeme jednoduše vytvořit graf s pomocí Chart.js, populární JavaScriptové knihovny pro vizualizaci dat.

Co je to Chart.js?

Chart.js je bezplatný nástroj, který vývojářům umožňuje generovat interaktivní grafy pro webové aplikace. Využívá element canvas z HTML5 pro vykreslování grafů, čímž je zajištěna jejich funkčnost v moderních webových prohlížečích.

Funkce Chart.js

Mezi klíčové vlastnosti patří:

Chart.js je velmi uživatelsky přívětivá. I s minimálním množstvím kódu mohou vývojáři vytvářet vizuálně atraktivní a interaktivní grafy.
Knihovna nabízí širokou škálu typů grafů, od čárových, přes sloupcové, až po koláčové a radarové. Dokáže tak vyhovět různorodým potřebám prezentace dat.
Grafy v Chart.js jsou navrženy tak, aby byly responzivní a fungovaly dobře na všech typech zařízení, ať už jde o počítače nebo mobilní telefony.
Chart.js umožňuje rozsáhlé možnosti přizpůsobení grafů. Vývojáři tak mohou grafy doladit přesně podle svých potřeb.

Příprava prostředí

Knihovnu můžete do projektu začlenit dvěma způsoby:

Základní struktura HTML

Pro vložení grafu budete potřebovat prvek canvas v HTML. Níže je ukázková základní struktura:

 <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Dokument</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>Vítejte u mé prezentace dat</h1>
   <canvas id="myChart" width="400" height="150"></canvas>
  <script></script>
 </body>
</html>

Pro úpravu vzhledu stránky si vytvořte soubor style.css a vložte do něj následující CSS kód:

 @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;
}

Vytvoření vašeho prvního grafu: Příklad sloupcového grafu

V tomto příkladu si ukážeme, jak vytvořit sloupcový graf, který se hodí pro porovnání jednotlivých datových bodů v různých kategoriích.

V rámci značky script na konci vašeho HTML dokumentu začněte tím, že si vyberete prvek canvas pomocí jeho id:

 let canvas = document.getElementById('myChart');

Následně získejte kontext, který budete používat pro vykreslování grafu. V tomto případě to bude 2D kreslící kontext.

 let ctx = canvas.getContext('2d');

Dále vytvořte nový graf na vašem plátně s pomocí funkce Chart(). Tato funkce jako první argument přijímá kontext plátna a jako druhý objekt možností, který obsahuje data, jež chcete zobrazit v grafu.

 let options = {};
let myChart = new Chart(canvas, options);

Nyní vyplňte objekt options a specifikujte typ grafu, data a popisky, které chcete v grafu použít.

 let options = {
  type: "bar",  data: {
    labels: ["Červená", "Modrá", "Žlutá", "Zelená", "Fialová", "Oranžová"],
    datasets: [{
      label: "Celkový počet hlasů pro oblíbenou barvu",
      data: [12, 19, 3, 5, 2, 3],
    }],
  },
};

V tuto chvíli by váš graf měl vypadat přibližně takto:

Styling a přizpůsobení grafu

Chart.js nabízí široké možnosti pro přizpůsobení grafů. Můžete měnit:

Barvy: Můžete si vybrat barvy pozadí pruhů i okrajů čar grafu.
Legendy: Legenda může být umístěna nahoře, dole, vlevo nebo vpravo, pro co největší přehlednost.
Popisky: Popisky vám poskytnou detailní informace o jednotlivých datových bodech, které se zobrazí po najetí myší.
Animace: Můžete nastavit styl a rychlost animací, aby zobrazení grafu bylo dynamické.

Jako jednoduchý příklad si můžeme nastavit základní styly pro naši datovou sadu. To se provede změnou objektu options takto:

 let options = {
  type: "bar",  data: {
    labels: ["Červená", "Modrá", "Žlutá", "Zelená", "Fialová", "Oranžová"],
    datasets: [{
      label: "Celkový počet hlasů pro oblíbenou barvu",
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: "rgba(75, 192, 192, 0.2)",
      borderColor: "rgba(75, 192, 192, 1)",
      borderWidth: 1,
    }],
  },
};

Váš graf by nyní měl vypadat nějak takto:

Doporučené postupy a tipy pro optimální výkon

Pro zajištění co nejlepšího výkonu při vykreslování grafů:

Omezte počet datových bodů, které používáte v Chart.js. Zrychlíte tím vykreslování grafů a uživatelský zážitek bude lepší.
Pokud graf často aktualizujete, použijte metodu destroy(), kterou odstraníte starý graf předtím, než vykreslíte nový.

Tipy, jak se vyhnout častým chybám

Zde je několik věcí, kterým byste se měli vyhnout:

Ujistěte se, že jsou vaše data vždy naformátována stejným způsobem. Předejdete tím nepříjemným překvapením.
Pro lepší výkon je dobré omezit animace. Mohou sice zlepšit uživatelský zážitek, ale pokud jich je příliš, mohou způsobit problémy.

Chart.js: Výkonný nástroj pro vizualizaci webových dat

Chart.js je užitečný nástroj, pokud chcete interaktivně zobrazovat data atraktivním způsobem. Můžete si s ním snadno vytvářet krásné vizualizace dat, které poskytnou uživatelům přehled a mohou jim pomoci při rozhodování.

Chart.js je silné řešení pro vizualizaci dat, ať už jste ve vývoji webových aplikací nováček nebo zkušený profesionál.