Jak zbudować prosty wykres za pomocą Chart.js

Spis treści:

Wizualne przedstawienie danych w sposób zrozumiały dla odbiorców to kluczowy element w erze podejmowania decyzji na podstawie analiz. Diagramy i wykresy stanowią nieocenioną pomoc w przyswajaniu złożonych informacji, rozpoznawaniu trendów i dostrzeganiu zależności.

Przyjrzyjmy się, jak stworzyć prosty wykres przy użyciu Chart.js, popularnej biblioteki JavaScript ułatwiającej wizualizację danych.

Czym jest Chart.js?

Chart.js to bezpłatna biblioteka, która wspiera programistów w tworzeniu interaktywnych wykresów na potrzeby aplikacji internetowych. Wykorzystuje element canvas HTML5 do renderowania wykresów, co zapewnia ich kompatybilność z nowoczesnymi przeglądarkami.

Funkcjonalności Chart.js

Do kluczowych cech biblioteki należą:

Chart.js cechuje się intuicyjnością obsługi. Minimalna ilość kodu wystarcza, by tworzyć atrakcyjne wizualnie i interaktywne diagramy.
Ta wszechstronna biblioteka oferuje wsparcie dla wielu typów wykresów, w tym liniowych, słupkowych, kołowych i radarowych, co pozwala sprostać zróżnicowanym wymaganiom w zakresie prezentacji danych.
Chart.js projektuje wykresy w taki sposób, aby działały poprawnie zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych, zapewniając responsywność i dostosowanie do rozmiaru ekranu.
Biblioteka oferuje szeroki wachlarz opcji konfiguracyjnych, które pozwalają odejść od domyślnych ustawień i dopasować wygląd wykresu do konkretnych potrzeb.

Konfiguracja środowiska

Bibliotekę można wdrożyć na dwa sposoby:

Podstawowa struktura HTML

Aby umieścić wykres na stronie, niezbędny jest element canvas w kodzie HTML. Poniżej przedstawiono przykład struktury:

 <!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>Witaj w Mojej Prezentacji Danych</h1>
    <canvas id="myChart" width="400" height="150"></canvas>
    <script></script>
  </body>
</html>

Aby nadać stronie pożądany styl, utwórz plik o nazwie style.css i dodaj do niego poniższy kod 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 wykorzystamy wykres słupkowy, który idealnie sprawdza się przy porównywaniu danych w obrębie różnych kategorii.

W sekcji skryptu na końcu kodu HTML, zacznij od wyselekcjonowania elementu canvas, odwołując się do jego właściwości id:
```
 let canvas = document.getElementById('myChart'); 
```
Następnie pobierz kontekst renderowania dla wykresu. W tym przypadku jest to kontekst rysunku 2D.
```
 let ctx = canvas.getContext('2d'); 
```
Kolejny krok to zainicjowanie nowego wykresu na kanwie za pomocą funkcji Chart(). Funkcja ta przyjmuje kontekst canvas jako pierwszy argument, a następnie obiekt z opcjami, które definiują, jakie dane mają być prezentowane na wykresie.
```
 let options = {};
let myChart = new Chart(canvas, options);
```

Teraz wypełnij obiekt opcji, aby zdefiniować typ wykresu, dane oraz etykiety, które chcesz umieścić.

 let options = {
   type: "bar",   data: {
     labels: ["Czerwony", "Niebieski", "Żółty", "Zielony", "Fioletowy", "Pomarańczowy"],
     datasets: [{
       label: "Liczba głosów na ulubiony kolor",
       data: [12, 19, 3, 5, 2, 3],
     }],
   },
};

Na tym etapie Twój wykres powinien wyglądać w następujący sposób:

Stylizowanie i dostosowywanie wykresu

Chart.js udostępnia wiele opcji personalizacji wyglądu wykresów, takich jak:

Kolory: Modifikuj kolorystykę wykresów, począwszy od tła słupków, aż po obramowania linii, wykorzystując dostępne opcje Chart.js.
Legenda: Umieść legendę na górze, na dole, po lewej lub po prawej stronie, aby zapewnić przejrzystość prezentowanych danych.
Etykiety narzędzi: Aktywuj etykiety narzędzi, które wyświetlają szczegółowe informacje na temat punktów danych po najechaniu kursorem.
Animacje: Zdefiniuj styl i tempo animacji wykresów, aby nadać prezentacji dynamiczny charakter.

Prosty przykład: możesz wprowadzić kilka podstawowych zmian w wyglądzie zbioru danych, modyfikując obiekt opcji w następujący sposób:

 let options = {
   type: "bar",   data: {
     labels: ["Czerwony", "Niebieski", "Żółty", "Zielony", "Fioletowy", "Pomarańczowy"],
     datasets: [{
       label: "Liczba głosów na ulubiony kolor",
       data: [12, 19, 3, 5, 2, 3],
       backgroundColor: "rgba(75, 192, 192, 0.2)",
       borderColor: "rgba(75, 192, 192, 1)",
       borderWidth: 1,
     }],
   },
};

Po tych zmianach wykres powinien wyglądać następująco:

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

Aby osiągnąć optymalną wydajność podczas renderowania wykresów, warto zastosować następujące wskazówki:

Ogranicz liczbę punktów danych używanych w Chart.js, aby przyspieszyć proces renderowania i poprawić komfort użytkownika.
Jeśli wykres jest często aktualizowany, użyj metody destroy(), aby usunąć poprzednią wersję przed wyrenderowaniem nowej.

Wskazówki, jak unikać typowych błędów

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

Upewnij się, że format danych jest zawsze jednolity, aby uniknąć nieoczekiwanych problemów.
Aby poprawić wydajność, warto ograniczyć stosowanie animacji. Chociaż mogą one wzbogacić interfejs, nadmierne użycie może prowadzić do problemów.

Chart.js: ułatwianie wizualizacji danych w sieci

Chart.js to wartościowe narzędzie, gdy zachodzi potrzeba atrakcyjnej prezentacji interaktywnych danych. Dzięki niemu można łatwo tworzyć estetyczne wizualizacje, które dostarczają cennych informacji i wspierają proces decyzyjny.

Niezależnie od poziomu doświadczenia, Chart.js stanowi solidne rozwiązanie do wizualizacji danych.