Jak stworzyć prosty wykres za pomocą Chart.js

Leonard Strauss included in Programming Web Development Javascript

2023-10-26 894 words 5 minutes

Contents

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

Zagłębmy się w proces konstruowania podstawowej reprezentacji graficznej przy użyciu Chart.js, cenionej biblioteki JavaScript szeroko stosowanej do wizualnego przedstawiania informacji.

Czym jest Chart.js?

Chart.js to darmowe narzędzie, które pomaga programistom tworzyć interaktywne wykresy dla aplikacji internetowych. Element HTML5 canvas renderuje wykresy, pozwalając im działać w nowoczesnych przeglądarkach.

Funkcje Chart.js

Funkcje obejmują:

Chart.js słynie z intuicyjnego projektu, który umożliwia programistom tworzenie wysoce interaktywnych i estetycznych wykresów przy minimalnym wysiłku związanym z kodowaniem.

Biblioteka wykazuje wysoki stopień adaptacji, obsługując różne typy wykresów, takie jak wykresy liniowe, słupkowe, kołowe i radarowe, spełniając tym samym szeroki zakres wymagań dotyczących wizualizacji danych.

Chart.js to wysoce wszechstronna biblioteka wykresów, która została specjalnie zaprojektowana, aby zapewnić optymalną wydajność na wielu urządzeniach, w tym zarówno na platformach stacjonarnych, jak i mobilnych. Wykresy te charakteryzują się imponującym poziomem responsywności i adaptacyjności, dzięki czemu mogą skutecznie zaspokajać potrzeby użytkowników niezależnie od preferowanego urządzenia lub rozmiaru ekranu.

Można modyfikować wygląd i funkcjonalność wykresu utworzonego za pomocą Chart.js, wykorzystując szereg konfigurowalnych parametrów, zamiast stosować się do standardowych ustawień konfiguracyjnych. Pozwala to programistom dostosować wizualizacje do unikalnych wymagań ich projektów.

Konfiguracja środowiska

Istnieją dwie metody konfiguracji biblioteki, z których każda jest odpowiednia dla Twoich potrzeb.

⭐ Korzystanie z CDN . Wystarczy umieścić następujący znacznik skryptu w nagłówku dokumentu HTML.

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

⭐ Korzystanie z menedżera pakietów. Jeśli wolisz menedżery pakietów, możesz zainstalować Chart.js za pomocą npm, menedżera pakietów Node:

 npm install chart.js

lub Yarn:

 yarn add chart.js

Podstawowa struktura HTML

Aby włączyć graficzną reprezentację do treści HTML, konieczne jest dołączenie elementu canvas z odpowiednimi znacznikami. Podstawowa konfiguracja do tego celu składa się z następujących elementów:

 <!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="./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ć stronie wyrafinowania, wygeneruj dokument zatytułowany “style.css”.Włączając następujące reguły CSS do tego pliku, można uzyskać pożądany wyglą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;
}

Tworzenie pierwszego wykresu: Przykład wykresu słupkowego

Aby zilustrować tę koncepcję, zastosujmy wykres słupkowy, który szczególnie dobrze nadaje się do kontrastowania dyskretnych informacji w różnych kategoriach.

⭐ W znaczniku script na dole kodu HTML zacznij od wybrania elementu canvas za pomocą jego właściwości id:

 let canvas = document.getElementById('myChart');

⭐ Następnie uzyskaj kontekst sposobu renderowania wykresu. W tym przypadku jest to kontekst rysowania 2D.

 let ctx = canvas.getContext('2d');

⭐ Następnie zainicjuj nowy wykres na kanwie za pomocą funkcji Chart(). Funkcja ta przyjmuje kontekst kanwy jako pierwszy argument, 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 mają być wyświetlane 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],
    }],
  },
};

Obecnie wykres wygląda następująco:

Stylizacja i dostosowywanie wykresu

Chart.js zapewnia szeroki zakres możliwości personalizacji wykresów, w tym między innymi:

Popraw swoje wrażenia wizualne, dostosowując kolory wykresów za pomocą Chart.js. Możesz spersonalizować nie tylko tła słupków, ale także obramowania linii, aby stworzyć unikalną i atrakcyjną wizualnie reprezentację danych.

Legendę można umieścić w różnych miejscach, aby zwiększyć czytelność i zrozumienie danych wykresu. Umieszczając ją na górze, na dole, po lewej lub po prawej stronie, użytkownicy mogą łatwo zidentyfikować wzorce i trendy w wizualnej reprezentacji.

Wykorzystaj podpowiedzi, aby zapewnić kompleksowe informacje o punktach danych po najechaniu myszą, oferując głębsze zrozumienie wyświetlanej zawartości.

Dostosowanie atrybutów animacji wykresów umożliwia użytkownikom dostosowanie wizualnej reprezentacji, zwiększając ogólną dynamikę i interaktywność prezentacji danych poprzez dostosowane przejścia i ustawienia czasu trwania.

Rozważ modyfikację konfiguracji zestawu danych poprzez dostosowanie obiektu opcji w sposób, który jest przykładem prostoty.Na przykład, jednym z możliwych podejść jest zmiana obiektu opcji, jak pokazano poniżej:

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

Wykres powinien teraz wyglądać następująco:

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

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

Aby zoptymalizować wydajność Chart.js, zaleca się ograniczenie liczby wykorzystywanych punktów danych w celu przyspieszenia renderowania i poprawy ogólnego wrażenia użytkownika.

Jeśli konieczna jest częsta aktualizacja wykresu, zaleca się użycie funkcji “destroy()”, aby wyeliminować wszelkie wcześniej wyrenderowane reprezentacje przed wygenerowaniem nowej wizualizacji. Takie podejście pomaga zapewnić, że na wykresie wyświetlane są tylko najnowsze i najdokładniejsze dane.

Wskazówki dotyczące unikania typowych pułapek

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

Upewnij się, że informacje konsekwentnie przestrzegają jednolitej struktury, aby uniknąć potencjalnych niespójności lub nieprzewidzianych komplikacji.

Aby zoptymalizować wydajność, zaleca się ograniczenie wykorzystania animacji, ponieważ ich nadmierne użycie może prowadzić do niepożądanych konsekwencji, pomimo ich potencjału do podniesienia satysfakcji użytkownika.

Chart.js: Wzmocnienie wizualizacji danych w sieci

Wykorzystanie Chart.js pozwala na tworzenie atrakcyjnych wizualnie i interaktywnych reprezentacji danych, ułatwiając wyjaśnienie istotnych spostrzeżeń i świadome formułowanie wniosków.

Chart.js oferuje skuteczny sposób wizualnego przedstawiania informacji, niezależnie od biegłości w programowaniu.