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

Rysowanie wykresów schodkowych w HTML


Wykres schodkowy (ang. step chart) stosujemy w przypadku danych pojawiających się w nieregularnych odstępach czasu, np. do prezentacji zmian stóp procentowych (zobacz: aktualne wykresy podstawowych stóp procentowych NBP). Innym przykładem funkcji schodkowej może być np. dystrybuanta dyskretnego rozkładu prawdopodobieństwa.

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

Przygotowanie danych

W przypadku prezentowanego w niniejszym artykule skryptu dane źródłowe zostały zapisane w formacie JSON (JavaScript Object Notation) i umieszczone w osobnym pliku. Są przetwarzane asynchronicznie, zatem nie opóźniają ładowania pozostałych elementów strony www. Pobieranie danych z odrębnego pliku ułatwia ich ewentualną aktualizację/zmianę.

Poniżej znajduje się przykładowa zawartość pliku źródłowego:

{"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"}]}

Wykres przykładowych danych (od 2013-01-01 do dnia bieżącego):

Tworzenie wykresu krok po kroku

1. Dołącz bibliotekę jQuery do swojej strony. W tym celu pobierz ją ze strony jQuery.com. Następnie pobrany plik umieść w wybranym katalogu (wygodnie jest utworzyć osobny katalog, w którym będą umieszczane wszystkie skrypty). Na koniec dodaj w sekcji HEAD dokumentu HTML 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 stepchart.js i pliku z przykładowymi danymi źródłowymi stref.NBP-part.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, do którego skopiowałeś pobrane pliki).

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

4. W efekcie powinieneś uzyskać przykładowy wykres stopy referencyjnej NBP w latach 2002-2012:


Zobacz też:

Tworzenie wykresu liniowego w HTML

Tworzenie wykresu słupkowego w HTML

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