Tworzenie pierwszej interaktywnej tabeli JavaScript
Dane są wszędzie wokół nas, a ich wizualizacja stała się już istotną częścią naszego życia. Wykresy, infografiki, mapy i kokpity są dziś bardzo potrzebne, ponieważ przekazują nam informacje w sposób, który można łatwo zinterpretować.
Dobrą rzeczą jest to, że tworzenie wykresów nie wymaga dużych umiejętności ani specjalnej wiedzy od twórców stron internetowych, projektantów ani nikogo innego. W tym artykule pokażemy podstawy i wyjaśnimy, jak z łatwością radzić sobie z interaktywną wizualizacją danych za pomocą JavaScript i HTML5.
Zaczniemy od utworzenia wykresu słupkowego z jedną serią, abyś mógł zrozumieć podstawy. Następnie pokażemy szybki sposób tworzenia wykresów słupkowych z wieloma seriami i stosami. Wykresy słupkowe są obecnie popularnym sposobem prezentowania danych, a logika programowania może być łatwo przetłumaczona na inne rodzaje wykresów.
Ostateczny wykres będzie ten 100-procentowy wykres słupkowy:
Zobacz pióro Finał (tytuł). Dostosowany wykres słupkowy 100% autor: Ruslan ( @ruslankorsar ) na CodePen .
Dzisiaj są wiele bibliotek wykresów JavaScript ; niektóre z nich są całkowicie bezpłatne, takie jak D3 i Wykresy Google podczas gdy inne wymagają płatności na użytek komercyjny. Moim zdaniem, najbardziej wszechstronny i solidny z nich jest amCharts , AnyChart , i Highcharts .
Do tego samouczka zdecydowałem się użyć AnyChart . Jednak proces ten jest bardzo podobny dla każdej biblioteki, szczególnie jeśli robisz coś prostego. AnyChart ma rozległy dokumentacja i Referencje API a także ogromna różnorodność obsługiwane typy wykresów i dema na plac zabaw dla kodu , więc jest dobrym wyborem dla początkujących.
Dla Twojej wygody wszystkie przykłady przedstawione w samouczku są dostępne w ta kolekcja na CodePen i można go tam zbadać lub wyeksportować do ZIP za pomocą plików demonstracyjnych CSS / HTML / JavaScript.
JS Charting w 3 łatwych krokach
Proces tworzenia podstawowego wykresu JavaScript dla Twojej witryny lub aplikacji składa się z trzech następujących kroków:
- Przygotuj swoje dane;
- Podłącz bibliotekę;
- Napisz prosty kod.
1. Przygotowanie danych
Tak jak wielki statek chce głębokich wód, prosty wykres potrzebuje prostych danych. Oczywiście, jeśli masz duże ilości danych lub ich struktura nie jest oczywista, musisz je najpierw przygotować.
Podczas budowania większości popularnych typów wykresów potrzebujemy tylko pól X i Y. Jednak wykresy słupkowe mogą być jeszcze prostsze, ponieważ często zdarza się, że używane jest tylko pole Y, a indeks lub numer pozycji jest traktowany jako X. Tak jest w przypadku korzystania z tablicy danych JavaScript, na przykład:
// 5 data points = 5 categories for a single seriesvar data = [19, 24, 30, 34, 42];// Y is these values; X is item numbers [0,1,2,3,4,5]Jeśli używasz JSON / XML do przesyłania danych, twoje dane mogą wyglądać następująco.
[{'x': 'Product A','value': 19},{'x': 'Product B','value': 24}...]Ogólnie mówiąc, istnieje wiele sposobów pracy z danymi, a twórcy oprogramowania do wizualizacji zazwyczaj opisują wszystkie lub wiele z nich w dokumentach. Mając to na uwadze, polecam sprawdzenie odpowiednia sekcja dokumentacji twojej biblioteki wykresów.
2. Pobieranie biblioteki wykresów
Biblioteka, której używasz, jest oczywiście ważnym składnikiem tutaj. Jeśli zamierzasz używać wykresów lokalnie, powinno to być uzasadnione pobieranie pakiet binarny i trzymaj go w pobliżu.
Jeśli jednak potrzebujesz wykresów dla aplikacji internetowej lub strony na stronie internetowej, a CDN może być lepszą opcją. Załaduje pliki z najbliższego serwera do klienta, co zapewnia szybsze ładowanie strony i lepszą wydajność.
3. Pisanie prostego kodu HTML / JavaScript
Kiedy nasze dane i biblioteka są gotowe, możemy zacząć pisać kod, aby rzeczywiście narysować nasz wykres.
a) Najpierw musimy utworzyć kontener wykresu na stronie. Najlepszym sposobem jest użycie a
b) Następnie dołączmy nasze dane:
var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];c) Następnie określamy, jaki typ wykresu chcemy wywołać, wywołując odpowiednią funkcję konstruktora:
var chart = anychart.bar();d) Aby uzyskać wyraźniejsze dane dla widzów, chcę nadać karcie tytuł:
chart.title('Product Sales');e) Teraz stwórzmy serię:
chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);f) Nasz wykres musi zostać umieszczony w kontenerze, dlatego właśnie podajemy ten, który właśnie utworzyliśmy:
chart.container('container');g) Wszystko wydaje się w porządku, więc możemy teraz narysować nasz wykres:
chart.draw();Oto jak wygląda wynik:
Poniżej znajduje się cały kod dla Twojej wygody:
Wygląda całkiem prosto, prawda? Teraz możemy wygodnie porównać całkowitą sprzedaż według kategorii.
Tworzenie wielosegmentowych i ułożonych wykresów słupkowych
Teraz, gdy nauczyliśmy się podstaw tworzenia wykresów za pomocą JavaScript, możemy przystąpić do tworzenia nieco bardziej złożonego wykresu, który wyświetla więcej informacji. Jak już wcześniej wspomniałem, pokażę Wam prosty sposób tworzenia wykresu słupkowego wielopoziomowego, a następnie złożonego.
Zasadniczo procedury są dość podobne. Jak zwykle wszystko zaczyna się od danych.
Dane z tabeli
W kontekście powyższego wykresu słupkowego dysponowaliśmy jedną zmienną (serią danych o sprzedaży produktów) i kilkoma kategoriami (rodzaj produktu). Aby dodatkowo wyświetlić kompozycję każdej wartości, która jest istotą stosu wykresów słupkowych, potrzebujemy bardziej szczegółowych danych.
W tym celu możemy użyć danych, które są już wyświetlane na stronie. Na przykład, jeśli masz już tabelę HTML, możesz łatwo utworzyć na jej podstawie wykres. Jeśli używasz AnyChart's Moduł adaptera danych wszystko, czego potrzebujesz, to określenie tej tabeli jako źródła danych.
1) Pobierz adapter danych:
2) Przygotuj dane z tabeli:
var tableData = anychart.data.parseHtmlTable('#tableWithData');3) Utwórz wykres i podaj źródło danych:
var chart = anychart.bar();chart.data(tableData);Bezpośrednim rezultatem jest wykres słupkowy z wieloma seriami, który pozwala nam na przykład szybko porównać wydajność każdego produktu w każdej kategorii.
Zmiana typu serii
Wszystkie niezbędne szczegóły, w tym dane, są już określone. Teraz możemy zmienić typ serii i wyciągnąć zestawiony wykres słupkowy z tego konwencjonalnego multipleksu. Nie jest to wcale trudne, ponieważ potrzebujesz jednej linii kodu, aby wartości były ułożone w stos:
chart.yScale().stackMode('values');Voila!
Właśnie utworzyliśmy stos słupkowy w locie, bez zmiany konfiguracji tego wielozadaniowego. W rezultacie, nie tylko jesteśmy gotowi, aby porównać całkowitą sprzedaż według kategorii, podobnie jak w przypadku wykresu słupkowego pojedynczej serii od samego początku artykułu, ale możemy również określić, który produkt odpowiada za uczynienie jednej kategorii razem mniejszej lub większej niż inne. .
Ponieważ wcześniej zgodziliśmy się, że naszym ostatecznym celem jest 100-procentowy wykres słupkowy, po prostu zmień tryb, aby go uzyskać:
chart.yScale().stackMode('percent');
Jest to w 100% ułożony wykres słupkowy, który pozwala wyróżnić relacje między częściami i ocenić udział każdego produktu w kategorii ogółem.
Dostosowanie projektu
Projektowanie jest bardzo ważne w wizualizacji danych, w celu przyciągnięcia uwagi, zwiększenia przejrzystości i zachowania integralności wizualnej w projekcie internetowym. Pomocna w tej bibliotece tworzenia wykresów personalizacja jest dość prosta.
Dodawanie tekstu
Dla większej jasności możesz przedstawić swoją wizualizację dodatkowymi tekstami. Na przykład nadam osi pionowej tytuł i tymczasowo dodaję etykietę wykresu:
chart.xAxis().title('Products');chart.label({text: 'Classified!'});
Ustawienia kolorów
Możesz dodać kolor za pomocą palety ( chart.palette () ) i zmieniać ustawienia tła ( chart.background () ). Lub możesz użyć motywu:
Następnie musimy określić to w ustawieniach wykresu:
anychart.theme(anychart.themes.wines);
Interakcja wykresów
Sporządzenie wykresu JavaScript przynajmniej trochę interaktywnego nie jest wielkim problemem.
Prawdopodobnie najbardziej podstawowe podejście polega na włączeniu stanu wskaźnika myszy w punktach danych, zmianie ich koloru oraz dodaniu lub zmodyfikowaniu znaczników. Stan zaznaczenia określa sposób, w jaki każdy punkt wygląda po kliknięciu.
Niektóre proste operacje na hover i select są domyślnie włączone, więc teraz nic nie dodamy do powyższego przykładu. Wróć do niego, aby poznać podstawową interaktywność, jeśli chcesz.
Warto porozmawiać o elemencie podpowiedzi, który może unosić się w powietrzu po dotarciu do punktu. Zawsze staram się dobrze wykorzystywać podpowiedzi, wyświetlając pomocne informacje o tym, do jakiej serii należy dany punkt, jaką wartość reprezentuje i tak dalej. Możesz łatwo dostroić swoje podpowiedzi, aby pokazać cokolwiek. Wprowadzamy podpowiedź i podajemy, co w niej pokazać:
var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');Oto wynik:
To tylko krótki rzut oka na opcje dostosowywania, aby przejść do szczegółów byłby cały artykuł sam w sobie. Na razie sugeruję, żebyś przeczytał sekcja interaktywności dokumentacji, aby uzyskać więcej informacji.
Wniosek
Jak widać, tworzenie interaktywnych wykresów z JavaScriptem nie jest trudne. Co więcej, możesz znaleźć wszystkie przykłady z samouczka w moim kolekcja na CodePen i łatwo z nich korzystać w swojej pracy. Po prostu skopiuj kod, zmień moje dane na swoje i szybko uruchom swój projekt.
Zawsze pamiętaj o sprawdzeniu dokumentacji i / lub odwołania do interfejsu API, a także zwróć uwagę na dema biblioteki, której używasz, na przykład w tej galerii AnyChart . Zwykle nie jest skomplikowane, aby zobaczyć, czy jest coś zbliżonego do tego, czego potrzebujesz, znaleźć przykład, który pasuje najlepiej, wprowadzić kilka prostych poprawek, a następnie użyć go tak, jak potrzebujesz.