Samouczek dotyczący drążenia wykresów FusionCharts w jQuery

Opublikowany: 2022-03-11

Wizualizacja danych ułatwia odczytanie

Większość firm zajmujących się analizą danych opiera się na MS Excel lub Google Sheets. Chociaż są to potężne narzędzia, trudno jest zauważyć trendy, a tym bardziej nie mają sensu używać dużych wierszy danych w arkuszu kalkulacyjnym. Postępowanie z danymi przedstawionymi w ten sposób nie jest zbyt interesujące, ale gdy dodasz wizualizację do tych danych, zarządzanie staje się łatwiejsze i to jest temat dzisiejszego samouczka - tworzenie interaktywnych wykresów za pomocą jQuery.

Radzenie sobie z danymi arkusza kalkulacyjnego jest nudne.

Trendy w wierszach danych arkusza kalkulacyjnego są trudne do zauważenia, ale po dodaniu wizualizacji...

Ćwierkać

W tym projekcie użyję biblioteki wykresów JavaScript FusionCharts, ponieważ oferuje ona dużą bibliotekę ponad 90 wykresów, jest kompatybilna z każdą przeglądarką i jest dość łatwa w obsłudze. Oferuje również dedykowaną wtyczkę do jQuery, która ułatwi nam pracę.

Zacznę od stworzenia podstawowego wykresu przy użyciu podstawowej biblioteki JavaScript FusionCharts i jej wtyczki wykresów jQuery, a następnie dodam do niego możliwość drążenia. Drążenie w dół umożliwia przechodzenie od jednego wykresu do drugiego, klikając wykres danych.

Termin „wykres danych” jest kontekstowy; odnosi się do kolumny na wykresie kolumnowym, linii na wykresie liniowym, wycinków kołowych na wykresie kołowym. Kliknięcie wykresu danych z wykresu nadrzędnego powoduje wyświetlenie wykresu podrzędnego, przedstawiającego dane względne o jeden poziom głębiej.

Kliknięcie wykresu danych na wykresie nadrzędnym spowoduje wyświetlenie wykresu podrzędnego.

Zrozumienie wykresów Fusion

Zanim zaczniemy samouczek, omówmy podstawową anatomię FusionCharts. Każdy wykres składa się z następujących kluczowych elementów:

Podpis: Tytuł na wykresie. Wyjaśnia, co jest na wykresach.
Podtytuł: Tekst pod podpisem określający dodatkowe informacje na wykresie, często określa ramy czasowe, z których zebrano dane.
Legenda: Wyświetla symbol dla każdego wykresu danych na wykresie. Konkretny wykres można włączyć lub wyłączyć, klikając odpowiednią ikonę legendy.
Wykres danych: są to reprezentacje danych na wykresie. Wykresem danych może być kolumna na wykresie kolumnowym, linie na wykresie liniowym lub wycinki kołowe na wykresie kołowym.
Wskazówka: tekst, który pojawia się po najechaniu kursorem na wykres danych, używany do przekazywania dodatkowych informacji o tym konkretnym wykresie danych.

Tworzenie wykresu szczegółowego

Zanim zaczniemy, oto zrzut ekranu wykresu, który będziemy tworzyć w tym samouczku. Możesz zobaczyć JSFiddle tutaj lub uzyskać dostęp do pełnego kodu źródłowego projektu w moim repozytorium GitHub.

Podgląd końcowego projektu jquery tego samouczka.

Proces tworzenia wykresu szczegółowego podzieliłem na pięć kroków, więc zacznijmy.

Krok 1: Dołączanie plików JavaScript i tworzenie kontenera wykresów

Najpierw musimy uwzględnić wszystkie pliki JS, od których nasz projekt jest zależny, używając tagu <script> . Jeśli strona jeszcze nie istnieje, utwórz pusty dokument HTML i dołącz poniższe pliki w sekcji <head> . Teraz potrzebujemy następujących czterech plików:

Zminimalizowane jQuery
Główna biblioteka JS FusionCharts (zawiera zarówno fusioncharts.js , jak i fusioncharts.charts.js )
Wtyczka jQuery FusionCharts

Nasza sekcja <head> będzie teraz wyglądać tak:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Teraz, gdy mamy już wszystkie zależności, nadszedł czas, aby utworzyć kontener <div> dla wykresu i osadzić go na naszej stronie za pomocą następującego kodu HTML:

 <div>drill-down chart will load here</div>

Teraz możemy go wybrać za pomocą selektora $ jQuery w kodzie:

 $("#drill-down-chart")

Uwaga: jeśli masz więcej niż jeden wykres na swojej stronie, będziesz potrzebować osobnego kontenera dla każdego wykresu z unikalnym id .

Krok 2: Pozyskiwanie i porządkowanie danych

FusionCharts akceptuje dane zarówno w formacie JSON, jak i XML, ale wybrałem JSON, ponieważ stał się on standardowym formatem wymiany danych między aplikacjami internetowymi. Tablica danych JSON dla wykresu podstawowego zawiera obiekt dla każdego wykresu danych, a wewnątrz każdego obiektu wykresu danych definiujemy jego odpowiednią etykietę i wartość. Taka struktura wygląda następująco:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Gdy kreślimy nasz wykres drążenia, jego JSON staje się bardziej złożony. Połączenie między wykresami nadrzędnymi i podrzędnymi wymaga jeszcze jednej pary key - value wewnątrz każdego obiektu tablicy danych. Nowy klucz (co nie dziwi, nazywany link ) będzie zawierał identyfikator wykresu podrzędnego, który otrzymasz po kliknięciu jego nadrzędnego wykresu danych. Format definiowania id wykresu podrzędnego to newchart-dataFormat-childId . Ponieważ używamy JSON, wiemy, że wszystko, co łączymy, będzie wyglądać jak newchart-json-childId . Oto jak definiujemy to dla naszego wykresu:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Krok 3: Wstawianie danych wykresu

Gdy masz już gotowe dane, czas wstawić wykres na swoją stronę za pomocą metody insertFusionCharts dostarczonej przez wtyczkę jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Podzielmy powyższy fragment kodu:

type określa typ wykresu nadrzędnego, który wykreślamy. W tym przypadku column2d . Każdy wykres w bibliotece FusionCharts ma unikalny alias. Możesz znaleźć alias wykresu, który chcesz wykreślić na stronie z listą wykresów FusionCharts.
id ustawia unikalny identyfikator wykresu, którego nie należy mylić z identyfikatorem elementu <div> zawierającego nasz wykres. id wykresu służy do wyboru wykresu do zastosowania obsługi zdarzeń i wywoływania metod. Skorzystamy z tego w kroku 5.
width i height określają wymiar wykresu w pikselach lub procentach. Szerokość 100% mówi wykresowi, aby zajmował całą szerokość kontenera.
Format danych definiujemy za pomocą atrybutu dataFormat . W naszym przykładzie używamy JSON, ale istnieją również inne dopuszczalne formaty danych, takie jak adres URL XML. Aby dowiedzieć się więcej o formatach danych, zapoznaj się z oficjalną stroną dokumentacji FusionCharts.
dataSource zawiera rzeczywistą zawartość wykresu, a znajdujący się w nim obiekt chart zawiera opcje konfiguracji wykresu, takie jak podpis i podtytuł. Tablica data powinna wyglądać znajomo, ponieważ zrobiliśmy ją w kroku 2 (zawiera dane do wykreślenia), a linkedData zawiera zawartość wykresu podrzędnego (wykres, który otrzymujesz po kliknięciu wykresu danych na wykresie nadrzędnym).

Powiązane: Zatrudnij najlepszych 3% niezależnych architektów Big Data.

Krok 4: Tworzenie połączonej tablicy danych dla wykresów podrzędnych

Teraz, gdy mamy zdefiniowany wykres nadrzędny, nadszedł czas, aby utworzyć wykres podrzędny dla każdego wykresu danych, proces bardzo podobny do tworzenia wykresu nadrzędnego. Tablica linkedData , utworzona w metodzie „insertFusionCharts”, zdefiniuje osobny obiekt dla każdego wykresu podrzędnego. Oto jak wyglądają dane dla pierwszego wykresu podrzędnego:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id to identyfikator pojedynczego wykresu podrzędnego, który zdefiniowaliśmy w kroku 2. linkedChart jest podobny do dataSource danych z kroku 3, ponieważ zawiera rzeczywistą zawartość tego wykresu. Istnieje wiele innych atrybutów, które znajdują się wewnątrz obiektu wykresu, które szczegółowo omówię w dalszej części, „Ulepszanie projektu za pomocą atrybutów wykresu”.

Krok 5: Niestandardowa konfiguracja drążenia

Różne typy wykresów

Jak dotąd nasz przykładowy kod zawiera zarówno wykres nadrzędny, jak i podrzędny, które mają ten sam typ wykresu. Jeśli chcesz przejść do innego typu wykresu (na przykład od kolumny do koła), robisz to, wiążąc zdarzenie fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

W powyższym kodzie zdarzenie fusionchartsrendered wywoła metodę configureLink , która definiuje typ wszystkich wykresów podrzędnych oraz wszelkie opcje przycisków nakładki. Możesz również określić oddzielne typy wykresów dla każdego wykresu podrzędnego. W metodzie configureLink dostępnych jest wiele opcji, więc warto zapoznać się z dokumentacją referencyjną interfejsu API w FusionCharts.

Renderowanie wykresów w różnych divach

Inną fajną rzeczą, jaką możesz zrobić, jest renderowanie wykresu podrzędnego w innym kontenerze, a nie w tym samym, co jego rodzic. W tym celu zdefiniuj oddzielny kontener HTML <div> za kontenerem nadrzędnego wykresu i przekaż jego identyfikator do atrybutu renderAt , jak pokazano poniżej:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Wartość podana atrybutowi renderAt określa identyfikator <div> , w którym będzie renderowany wykres podrzędny ( chart-container2 ).

Ulepszanie projektu za pomocą atrybutów wykresu

Po tym samouczku otrzymasz funkcjonalny wykres, ale będzie to trochę brzydkie, jeśli na tym zostawisz. Aby prezentacja była bardziej atrakcyjna, musisz skorzystać z kosmetycznych „atrybutów wykresu”. Atrybuty wykresu są definiowane wewnątrz obiektu chart i używane do dostosowywania opcji renderowania. Podczas przeglądania tych kluczowych konfigurowalnych atrybutów przydatne może być odwołanie się do grafiki objaśniającej FusionCharts:

paletteColors definiuje kolor wykresów danych. Jeśli podasz tutaj jeden kolor, wszystkie kolumny będą miały ten kolor. Jeśli podasz wiele kolorów, pierwsza kolumna przyjmie pierwszą wartość, druga kolumna przyjmie drugą wartość i tak dalej.
plotSpacePercent kontroluje przestrzeń między kolumnami. Domyślna wartość to 20 (wartość to int, ale jednostka to procent), a dopuszczalny zakres to 0-80. Wartość zero sprawi, że kolumny zbiją się i skleją ze sobą.
baseFont definiuje rodzinę czcionek wykresu. Możesz użyć dowolnej czcionki; Użyłem Open Sans Google na moim wykresie. Po prostu umieść zewnętrzny plik czcionki na swojej stronie HTML, aby użyć go na wykresie.
plotToolText pozwala dostosować podpowiedzi. Używając makr, takich jak $label i * $dataValue , możesz wyświetlić określone informacje na konkretnym wykresie danych z wnętrza <div> , a następnie nadać im styl <div> za pomocą wbudowanego CSS. Oto, co zrobiłem w naszym przykładzie:

 "plotToolText": "<div>$label: $dataValue</div>"

theme umożliwia zdefiniowanie atrybutów wykresu w innym pliku i zastosowanie ich raz tutaj, zamiast zaśmiecania obiektu wykresu licznymi atrybutami wykresu. Plik motywu dla tego samouczka — toptal.js — można znaleźć w folderze JS repozytorium GitHub projektu.

To wszystko, co zamierzam omówić, ale wykres zawiera ponad sto atrybutów, więc jeśli chcesz zbadać dalej, odwiedź stronę atrybutów wykresu FusionCharts i wyszukaj swój konkretny typ wykresu.

Więcej FusionCharts i zasobów jQuery

Chociaż omówiłem już najważniejsze elementy tworzenia wykresu drążonego za pomocą jQuery, istnieje duża szansa, że będziesz potrzebować pomocy, gdy spróbujesz zrobić to samodzielnie. Oto kilka dodatkowych zasobów na ten moment:

Wtyczka wykresów jQuery: Aby uzyskać inspirację, odwiedź oficjalną stronę wtyczki wykresów jQuery, aby zobaczyć przykłady na żywo.
Dokumentacja: Jeśli nie możesz czegoś rozgryźć, dokumentacja jest pierwszym miejscem, do którego powinieneś zajrzeć. Oto przydatne linki do wtyczki jQuery i wykresu szczegółowego (znanego również jako wykresy połączone).
Prezentacje : Każda biblioteka wykresów oferuje próbki na żywo, aby zaprezentować jej możliwości, a FusionCharts nie jest wyjątkiem. Udaj się do galerii demonstracyjnej ponad 800 próbek na żywo, z pełnym kodem źródłowym, jeśli potrzebujesz pomysłów. Istnieje duża szansa, że wszystko, co próbujesz zrobić, jest już dostępne. Nie trzeba zaczynać od zera; po prostu rozwiń skrzypce i kontynuuj!
Więcej rozszerzeń: Jeśli nie używasz waniliowego JavaScript lub jQuery, możesz odkryć więcej wtyczek i opakowań oferowanych przez FusionCharts na tej stronie. Posiadają dedykowane wtyczki do różnych bibliotek i frameworków, takich jak Angular, React, Java, ASP.NET itp.

PS: Będę spędzać czas w sekcji komentarzy poniżej, więc możesz śmiało zadawać pytania dotyczące mojego artykułu. Chętnie pomogę!

Powiązane: Eksploracja danych do predykcyjnej analizy sieci społecznościowych