Existuje několik knihoven JavaScriptu pro vykreslování různých grafů, od sloupcových grafů po spojnicové grafy a další. Pokud se učíte, jak dynamicky zobrazovat data na svém webu pomocí JavaScriptu, Chart.js je jednou z takových knihoven, kterou byste měli vyzkoušet.

Jak můžete začít vytvářet vizualizace dat pomocí Chart.js? Jak na to, se dozvíte v tomto článku.

Začněme.

Co je Chart.js?

Chart.js je knihovna JavaScript pro vizualizaci dat s otevřeným zdrojovým kódem, která se používá k vykreslování grafů vykreslitelných v HTML. V současné době podporuje osm různých typů interaktivních grafů, které můžete také animovat. Chcete-li vytvořit graf založený na HTML pomocí chart.js, potřebujete plátno HTML, které jej podrží.

Knihovna přijímá sadu datových sad a další parametry přizpůsobení, jako je barva pozadí, barva ohraničení a další. Jedním z datových souborů je označení, který představuje hodnoty na ose X. Druhým je sada číselných hodnot, které obvykle leží na ose Y.

Také je potřeba určit typ grafu v objektu grafu, aby knihovna věděla, který graf má vykreslit.

Jak vytvářet grafy pomocí Chart.js

Jak jsme již zmínili, můžete pomocí nich vytvářet různé typy grafů chart.js. V tomto tutoriálu začnete se spojnicovými a sloupcovými grafy. Jakmile pochopíte koncept, který je za nimi, budete mít všechny nástroje a jistotu, které potřebujete k vykreslení ostatních dostupných grafů.

Příbuzný:Jak zajistit, aby byl váš web responzivní a interaktivní pomocí CSS a JavaScriptu

Chcete-li začít používat chart.js, vytvořte potřebné soubory. V tomto tutoriálu jsou názvy souborů chart.html, plot.js, a index.css. Pro své soubory můžete použít jakoukoli konvenci pojmenování.

Nyní vložte následující do hlava části vašeho souboru HTML pro propojení se sítí Chart.js pro doručování obsahu (CDN).

v chart.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Dále vytvořte HTML plátno, na kterém bude graf držet a dát mu ID. Připojte se také k souboru CSS (index.css) v hlava a ukažte na svůj soubor JavaScript (plot.js) v souboru tělo sekce.

Struktura souboru HTML vypadá takto:

 Grafy

A ve vašem CSS:

tělo{
 background-color:#383735;
}
h1{
 barva:#e9f0e9;
 levý okraj: 43 %;
}
#plots{
 okraj: auto;
 barva pozadí: #2e2d2d;
}

Výše uvedený styl CSS není stanovenou konvencí. Takže si můžete stylizovat svůj, jak chcete, v závislosti na vaší struktuře DOM. Jakmile jsou vaše soubory HTML a CSS připraveny, je čas vykreslit grafy pomocí JavaScriptu.

Spojnicový graf

Chcete-li vytvořit spojnicový graf s chart.js, nastavíte graf typ na čára. To říká knihovně, aby nakreslila spojnicový graf.

Chcete-li to demonstrovat, ve svém souboru JavaScript:

// Získání HTML plátna podle jeho id
plots = document.getElementById("plots");
// Příklad datových sad pro osy X a Y
var měsíce = ["leden", "únor", "březen", "duben", "květen", "červen", "červenec"]; //Zůstane na ose X
var traffic = [65, 59, 80, 81, 56, 55, 60] //Zůstane na ose Y
// Vytvoří instanci objektu Chart:
nový graf (zákresy, {
 typ: 'řádek', //Deklarujte typ grafu
 údaje: {
 štítky: měsíce, //Data osy X
 datové sady: [{
 údaje: provoz, //Data osy Y
 backgroundColor: '#5e440f',
 borderColor: 'bílá',
 vyplnit: nepravda, //Vyplní křivku pod čarou barvou babckground. Ve výchozím nastavení je to pravda
 }]
 },
});

Výstup:

Neváhejte a změňte vyplnit hodnotu k skutečný, použijte více dat nebo upravte barvy, abyste viděli, co se stane.

Jak můžete také vidět, v horní části grafu je malá legenda. Můžete to odstranit uvnitř volitelného příslušenství možnosti parametr.

The možnosti kromě odstranění nebo zahrnutí legendy také pomáhá s dalšími přizpůsobeními. Můžete jej například použít k tomu, aby osa začala na nule.

Prohlásit an možnosti parametr, takto vypadá část grafu ve vašem souboru JavaScript:

// Vytvořte instanci objektu Chart:
nový graf (zákresy, {
 typ: 'řádek', //Deklarujte typ grafu
 údaje: {
 štítky: měsíce, //Data osy X
 datové sady: [{
 údaje: provoz, //Data osy Y
 backgroundColor: '#5e440f', //Barva teček
 borderColor: 'bílá', //Barva čáry
 vyplnit: nepravda, //Vyplní křivku pod čarou barvou babckground. Ve výchozím nastavení je to pravda
 }]
 },
 //Zadejte vlastní možnosti:
 možnosti:{
 legenda: {zobrazit: nepravda}, //Odstranit pole legend nastavením na hodnotu false. Ve výchozím nastavení je to pravda.
//Určete nastavení pro váhy. Aby osa Y začínala například od nuly:
 váhy:{
 yAxes: [{ticks: {min: 0}}] //Totéž můžete zopakovat pro osu X, pokud obsahuje celá čísla.
 }
 } 
});

Výstup:

Můžete také použít různé barvy pozadí pro každý bod. Změna barev pozadí tímto způsobem je však obvykle užitečnější u sloupcových grafů.

Vytváření sloupcových grafů pomocí Chart.js

Zde stačí změnit graf typ na bar. Nemusíte nastavovat vyplnit možnost, protože pruhy automaticky zdědí barvu pozadí:

// Vytvoří instanci objektu Chart:
nový graf (zákresy, {
 typ: 'bar', //Deklarujte typ grafu
 údaje: {
 štítky: měsíce, //Data osy X
 datové sady: [{
 údaje: provoz, //Data osy Y
 backgroundColor: '#3bf70c', //Barva pruhů
 }]
 },
 možnosti:{
 legenda: {zobrazit: nepravda}, //Odstranit pole legend nastavením na hodnotu false. Ve výchozím nastavení je to pravda.
 }
});

Výstup:

Nebojte se vynutit, aby osa Y začala od nuly nebo jakékoli hodnoty, jako jste to udělali u spojnicového grafu.

Příbuzný:Metody pole JavaScript, které byste měli ovládat

Chcete-li pro každý pruh použít různé barvy, předejte do pole pole barev, které odpovídá počtu položek ve vašich datech barva pozadí parametr:

// Vytvoří instanci objektu Chart:
nový graf (zákresy, {
 typ: 'bar', //Deklarujte typ grafu
 údaje: {
 štítky: měsíce, //Data osy X
 datové sady: [{
 údaje: provoz, //Data osy Y
//Barva každého pruhu:
 barva pozadí: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 možnosti:{
 legenda: {zobrazit: nepravda}, //Odstranit pole legend nastavením na hodnotu false. Ve výchozím nastavení je to pravda.
 }
});

Výstup:

Vytvoření výsečového grafu pomocí Chart.js

Chcete-li nakreslit výsečový graf, změňte typ grafu na koláč. Můžete také chtít nastavit zobrazení legendy na skutečný abyste viděli, co každý segment koláče představuje:

// Vytvořte instanci objektu Chart:
nový graf (zákresy, {
 zadejte: 'koláč', //Deklarujte typ grafu
 údaje: {
 labels: months, //Definuje každý segment
 datové sady: [{
 data: traffic, //Určuje velikost segmentu
 //Barva každého segmentu
 barva pozadí: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 možnosti:{
 legenda: {display: true}, //Toto je ve výchozím nastavení pravda.
}
});

Výstup:

Jak jste to udělali ve výše uvedených příkladech, můžete vyzkoušet další grafy změnou typ.

Nicméně zde je seznam podporovaných chart.js typy grafů, které můžete vyzkoušet pomocí výše uvedených konvencí kódování:

• bar
• čára
• rozptyl
• Kobliha
• koláč
• radar
• polární oblast
• bublina

Pohrajte si s Chart.js

Ačkoli jste v tomto tutoriálu získali pouze čárové, koláčové a sloupcové grafy, vzor kódu pro vykreslování dalších grafů pomocí chart.js se řídí stejnou konvencí. Takže si klidně hrajte i s ostatními.

Pokud tedy chcete více, než co nabízí chart.js, můžete se také podívat na některé další knihovny grafů JavaScript.

6 JavaScriptových rámců, které stojí za to se naučit

Existuje mnoho JavaScriptových frameworků, které pomáhají s vývojem. Zde jsou některé, které byste měli znát.

Přečtěte si další

O autorovi