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.
let canvas = document.getElementById('myChart');
let ctx = canvas.getContext('2d');
let options = {};
let myChart = new Chart(canvas, options);
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.