Jak zbudować prosty wykres za pomocą Chart.js

przez

Wizualizacja danych w sposób zrozumiały dla ludzi jest bardzo ważna w dobie podejmowania decyzji w oparciu o dane. Wykresy i wykresy pomagają nam łatwo zrozumieć złożone dane, trendy i wzorce.

Przyjrzyjmy się, jak utworzyć prosty wykres za pomocą Chart.js, popularnej biblioteki JavaScript do wizualizacji danych.

Co to jest Chart.js?

Wykres.js to bezpłatne narzędzie, które pomaga programistom tworzyć interaktywne wykresy dla aplikacji internetowych. Element canvas HTML5 renderuje wykresy, umożliwiając ich pracę w nowoczesnych przeglądarkach.

Funkcje Chart.js

Funkcje obejmują:

  • Chart.js wyróżnia się przyjaznym dla użytkownika podejściem. Przy minimalnym kodzie programiści mogą tworzyć interaktywne i atrakcyjne wizualnie wykresy.
  • Biblioteka jest wszechstronna i obsługuje różne typy wykresów, takie jak linie, słupki, wykresy i radary. Może zaspokoić różnorodne potrzeby w zakresie reprezentacji danych.
  • Chart.js projektuje wykresy tak, aby dobrze działały na komputerach stacjonarnych i urządzeniach mobilnych. Są responsywne i dostosowują się.
  • Możesz zmienić wykresy Chart.js, korzystając z wielu opcji zamiast ustawień domyślnych. Programiści mogą dostosować wykresy do konkretnych wymagań.

Konfigurowanie środowiska

Bibliotekę można skonfigurować na jeden z dwóch sposobów:

Podstawowa struktura HTML

Aby osadzić wykres, potrzebujesz elementu canvas w kodzie HTML. Oto podstawowa 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>

Aby nadać styl stronie utwórz plik style.css i dodaj do niego następujący 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;
}

Tworzenie pierwszego wykresu: przykład wykresu słupkowego

W tym przykładzie użyjemy wykresu słupkowego, idealnego do porównywania poszczególnych punktów danych według kategorii.

  • W tagu skryptu na dole kodu HTML zacznij od wybrania elementu canvas przy użyciu jego właściwości id: 
     let canvas = document.getElementById('myChart');
  • Następnie uzyskaj kontekst renderowania wykresu. W tym przypadku jest to kontekst rysunku 2D. 
     let ctx = canvas.getContext('2d');
  • Następnie zainicjuj nowy wykres na kanwie za pomocą funkcji Chart(). Funkcja ta jako pierwszy argument przyjmuje kontekst kanwy, a następnie obiekt opcji zawierający dane do wyświetlenia na wykresie. 
     let options = {};
    let myChart = new Chart(canvas, options);
  • Następnie wypełnij obiekt opcji, aby określić typ wykresu, dane i etykiety, które chcesz umieścić na wykresie. 
     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],
        }],
      },
    };

    • W tej chwili Twój wykres wygląda następująco:

    Stylizowanie i dostosowywanie wykresu

    Chart.js oferuje wiele opcji dostosowywania wykresów, takich jak:

    • Kolory: Dostosuj kolory wykresów, od tła słupków po obramowania linii, za pomocą Chart.js.
    • Legendy: dla przejrzystości umieść legendy u góry, u dołu, po lewej lub prawej stronie.
    • Etykietki narzędzi: użyj etykietek narzędzi, aby uzyskać szczegółowe informacje na temat punktów danych pojawiających się po najechaniu myszką.
    • Animacje: Ustaw styl i tempo animacji wykresów, aby wyświetlać je dynamicznie.

    Prosty przykład: możesz ustawić kilka podstawowych stylów dla swojego zbioru danych, zmieniając obiekt opcji w następujący sposób:

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

    Twój wykres powinien teraz wyglądać tak:

    Najlepsze praktyki i wskazówki dotyczące wydajności

    Aby zapewnić optymalną wydajność podczas renderowania wykresów:

    • Ogranicz punkty danych używane w Chart.js, aby przyspieszyć renderowanie i zapewnić lepszą wygodę użytkownika.
    • Jeśli często aktualizujesz wykres, użyj metodyzniszczenia(), aby usunąć stary wykres przed wyrenderowaniem nowego.

    Wskazówki, jak unikać typowych pułapek

    Oto kilka pułapek, których należy unikać:

    • Upewnij się, że Twoje dane są zawsze sformatowane w ten sam sposób, aby uniknąć niespodzianek.
    • Aby poprawić wydajność, najlepiej ograniczyć animacje. Chociaż mogą pomóc w poprawie komfortu użytkownika, użycie ich zbyt wielu może powodować problemy.

    Chart.js: usprawniająca wizualizacja danych internetowych

    Chart.js to przydatne narzędzie, gdy chcesz w atrakcyjny sposób wyświetlić interaktywne dane. Możesz łatwo tworzyć piękne wizualizacje danych, które dostarczają wglądu i ułatwiają podejmowanie decyzji.

    Chart.js zapewnia solidne rozwiązanie do wizualizacji danych, niezależnie od tego, czy masz doświadczenie, czy dopiero zaczynasz programować.