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

autor:
Tweet
Share
Share
Pin

Vizualizace dat způsobem, kterému lidé rozumějí, je v době rozhodování založeného na datech velmi důležitá. Tabulky a grafy nám pomáhají snadno porozumět složitým datům, trendům a vzorcům.

Pojďme prozkoumat, jak vytvořit jednoduchý graf pomocí Chart.js, oblíbené JavaScriptové knihovny pro vizualizaci dat.

Co je Chart.js?

Chart.js je bezplatný nástroj, který pomáhá vývojářům vytvářet interaktivní grafy pro webové aplikace. Element canvas HTML5 vykresluje grafy, což jim umožňuje pracovat v moderních prohlížečích.

Vlastnosti Chart.js

Mezi funkce patří:

  • Chart.js vyniká svým uživatelsky přívětivým přístupem. S minimálním kódem mohou vývojáři vytvářet interaktivní a vizuálně přitažlivé grafy.
  • Knihovna je všestranná a podporuje různé typy grafů, jako jsou čáry, pruhy, koláče a radary. Může splňovat různé potřeby reprezentace dat.
  • Chart.js navrhuje grafy tak, aby dobře fungovaly na počítačích a mobilních zařízeních. Jsou citlivé a přizpůsobivé.
  • Grafy Chart.js můžete změnit použitím mnoha možností namísto výchozího nastavení. Vývojáři mohou doladit grafy tak, aby vyhovovaly konkrétním požadavkům.
  Co je nového v Apache HTTP Server 2.4?

Nastavení prostředí

Knihovnu můžete nastavit jedním ze dvou způsobů:

Základní struktura HTML

Chcete-li vložit graf, budete potřebovat prvek canvas v HTML. Zde je 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>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>

Chcete-li upravit styl stránky, vytvořte soubor style.css a přidejte do něj následující 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;
}

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

Pro tento příklad použijeme sloupcový graf, ideální pro porovnání jednotlivých datových bodů podle kategorií.

  • Ve značce skriptu ve spodní části kódu HTML začněte výběrem prvku canvas pomocí jeho vlastnosti id: 
     let canvas = document.getElementById('myChart');
  • Dále získejte kontext, jak vykreslit graf. V tomto případě se jedná o kontext 2D kreslení. 
     let ctx = canvas.getContext('2d');
  • Dále inicializujte nový graf na plátně pomocí funkce Chart(). Tato funkce bere v kontextu plátna jako první argument a poté objekt možností včetně dat k zobrazení v grafu. 
     let options = {};
    let myChart = new Chart(canvas, options);
  • Dále vyplňte objekt options a zadejte typ grafu, data a popisky, které chcete v grafu použít. 
     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],
        }],
      },
    };

    • V tuto chvíli váš graf vypadá takto:

      Co je topologie sítě v počítačových sítích

    Stylování a přizpůsobení grafu

    Chart.js nabízí mnoho možností přizpůsobení grafů, například:

    • Barvy: Pomocí Chart.js můžete přizpůsobit barvy grafu, od pozadí pruhů po okraje čar.
    • Legendy: Umístěte legendy nahoře, dole, vlevo nebo vpravo kvůli přehlednosti.
    • Popisky: Pomocí popisků získáte podrobné informace o datových bodech, které se zobrazí po najetí myší.
    • Animace: Nastavte styl a tempo animací grafu pro dynamické zobrazení.

    Jako jednoduchý příklad můžete nastavit některé základní styly pro svou datovou sadu změnou objektu options následovně:

     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,
        }],
      },
    };

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

      Jak zjistit, který CMS se na webu používá?

    Doporučené postupy a tipy na výkon

    Chcete-li zajistit optimální výkon při vykreslování grafů:

    • Omezte datové body používané v Chart.js pro rychlejší vykreslování a lepší uživatelský dojem.
    • Pokud graf často aktualizujete, použijte metodu zničit() k odstranění starého grafu před vykreslením nového.

    Tipy, jak se vyhnout běžným nástrahám

    Zde je několik úskalí, kterým je třeba se vyhnout:

    • Ujistěte se, že jsou vaše data vždy naformátována stejným způsobem, abyste předešli překvapením.
    • Pro zlepšení výkonu je nejlepší omezit animace. Ačkoli mohou pomoci zlepšit uživatelskou zkušenost, použití příliš velkého množství může způsobit problémy.

    Chart.js: Posílení vizualizace webových dat

    Chart.js je užitečný nástroj, když chcete atraktivním způsobem zobrazit interaktivní data. Můžete snadno vytvářet krásné vizualizace dat, které poskytují přehled a informují o rozhodnutích.

    Chart.js poskytuje silné řešení pro vizualizaci dat, ať už jste zkušení nebo nováčci ve vývoji.