Środa, 12 grudnia 2018 • 346 dzień roku • Imieniny: Aleksandra, Adelajdy, Dagmary Kontakt

Rysowanie wykresów słupkowych w HTML


Najprostszym sposobem umieszczenia wykresu na stronie www jest przygotowanie go w arkuszu kalkulacyjnym, umieszczenie w pliku graficznym (chociażby robiąc zrzut ekranu), a następnie wyświetlenie go tak jak każdy inny plik graficzny, np. zdjęcie lub skan. Niestety, ten prosty sposób sprawdzi się wyłącznie w przypadku danych nieulegających częstym zmianom, gdyż każdorazowa ich aktualizacja wymagałaby pracochłonnego, ręcznego powtórzenia wszystkich czynności wykonanych wcześniej przy tworzeniu wykresu.

W przypadku danych zmieniających się dynamicznie należy wykorzystać inne narzędzia, np. opisywany tutaj skrypt służący do prezentacji danych w postaci wykresu słupkowego (ang. bar chart).

Uwaga: Do poprawnego działania skrypt wymaga biblioteki jQuery.

Przygotowanie danych

Wyświetlane na wykresie wartości zostały zapisane w formacie JSON (JavaScript Object Notation) i znajdują się w osobnym pliku. Dane są przetwarzane asynchronicznie, zatem nie opóźniają ładowania pozostałych elementów strony www. Umieszczenie w odrębnym pliku ułatwia ich aktualizacje lub zmiany.

Poniżej znajdują się przykładowe dane:

{"symbol":"","name":"",
"quotes":[{"date":"2013-01-01","value":"2"},
{"date":"2013-01-10","value":"3"},
{"date":"2013-01-15","value":"5"},
{"date":"2013-02-01","value":"7"},
{"date":"2013-02-15","value":"11"},
{"date":"2013-03-01","value":"13"},
{"date":"2013-04-01","value":"17"},
{"date":"2013-04-15","value":"13"},
{"date":"2013-05-01","value":"11"},
{"date":"2013-07-01","value":"7"},
{"date":"2013-08-15","value":"5"},
{"date":"2013-09-01","value":"3"},
{"date":"2013-12-01","value":"2"}]}

Tworzenie wykresu krok po kroku

1. Dołącz bibliotekę jQuery do swojej strony. W tym celu pobierz ją ze strony jQuery.com i umieść w wybranym katalogu (wygodnie jest utworzyć osobny katalog, w którym będą umieszczane wszystkie skrypty). Następnie dodaj w sekcji HEAD dokumentu HTML poniższy kod (może się różnić nazwą katalogu i wersją pobranej biblioteki):

<script src="/javascript/jquery-1.9.1.min.js"></script>

Uwaga: Biblioteka udostępniana jest w dwóch "wariantach" jQuery 1.x i jQuery 2.x. Różnica między nimi polega na tym, że jQuery 2.x nie obsługuje starszych wersji Internet Explorera, tj. 6, 7 i 8.

2. Pobierz paczkę, rozpakuj i umieść pliki w wybranym katalogu na swoim serwerze. Paczka składa się z dwóch plików: skryptu barchart.js i pliku z przykładowymi danymi sample.jsn. Możesz utworzyć własny plik z danymi (muszą być przygotowane w formacie JSON zgodnie z podanym wcześniej przykładem).

3. Umieść w wybranym miejscu na swojej stronie poniższy kod (pamiętaj o wpisaniu nazwy katalogu, w którym umieściłeś pobrane pliki).

<script src="/nazwa_katalogu/barchart.js"></script>

4. Uzyskany efekt:


Zobacz też:

Tworzenie wykresu liniowego w HTML

Tworzenie wykresu schodkowego w HTML

Obrót tekstu na płótnie (canvas)