Gotowy wykres HTML według punktów. Dane z tablicy
Wykresy stanowią doskonałą pomoc wizualną podczas prezentacji danych. Bez nich nie da się stworzyć wysokiej jakości panelu administracyjnego. Nie są takie proste w montażu. Dostępna jest jednak nowa biblioteka ułatwiająca to zadanie – xCharts. Dzisiaj użyjemy tego programu wraz z paletą Date Range programu Twitter Bootstrap, aby utworzyć piękny wykres AJAX dla Twojej aplikacji internetowej, która pobiera dane z Tabele MySQL.
HTMLStruktura demo tego języka jest dość prosta - musimy dodać elementy na stronie, aby rozpocząć kreślenie i selekcję informacji. Ponieważ i tak umożliwiamy ładowanie strony, możemy użyć stylów i ikon strony, aby nadać tej strukturze ładny wygląd.
indeks.php
Ładne wykresy z jQuery i AJAX | Demo poradnika
Wiele się tu wykorzystuje zasoby zewnętrzne. W głównej sekcji mamy kaskadowe pliki arkuszy stylów dla xCharts, sortownik liczb, ładowanie (zintegrowane z superszybkim CDN CloudFlare) i nasz plik style.css.
Przed zamknięciem skrótu do tabeli mamy biblioteka jQuery, d3.js (wymagany przez program xсharts), xcharts , biblioteka z Przyjazny dla użytkownika interfejs Sugar.js (który wymaga wtyczki „zakres dat”), wtyczki „zakres dat” i pliku script.js. Następnie zobaczysz, jak to wszystko razem działa.
MySQL'aJak wspomniałem we wstępie, skrypt, który piszemy, pobierze dane z tabeli MySQL i wyświetli je na wykresie. Kod SQL, który utworzy tabelę, możesz znaleźć w schema.sql w skompresowany plik, dostępny do pobrania za pomocą górne przyciski. Tabela będzie wyglądać następująco:
Ma tylko trzy kolumny. Kolumnie daty przypisany jest unikalny indeks, co oznacza, że w tym samym dniu nie mogą się powtarzać wpisy. Kolumna „Rekordy sprzedaży” rejestruje liczbę sprzedaży w ciągu dnia. Twoja baza danych na pewno będzie inna, ale dopóki uzyskasz poprawną odpowiedź w formacie służącym do ustrukturyzowania danych w prosty format tekstowy służący do wymiany informacji JSON ze skryptu PHP, nie będzie żadnych problemów (więcej o tym w następnym Sekcja).
Uwaga: nie zapomnij podać swoich danych Połączenia MySQL w setup.php. Następnie będziesz musiał stworzyć nowa baza Dane MySQL'a i zaimportuj schema.sql z systemu PHPMyAdmin lub z wybranego przez Ciebie systemu zarządzania.
PHPW naszym Skrypt PHP wybierzemy z tabeli rekordy odpowiadające przesłanej informacji początkowej i końcowej, zbierzemy wszystkie dane w tablicę i wyświetlimy je w formacie tekstowym wymiana danych (JSON):
ajax.php
Header("Typ zawartości: aplikacja/json"); // konfiguracja biblioteki require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // wybierz wyniki $results = ORM::for_table("chart_sales") ->where_gte("data", $start) ->where_lte("data", $end) ->order_by_desc("data" ) ->find_array(); // utwórz nową tablicę z danymi foreach ($results as $key => $value) ( $data[$key]["label"] = $value["data"]; $data[$ klucz]["wartość"] = $wartość["zamówienie_sprzedaży"]; ) echo json_encode($data); )
Tutaj korzystam z mojej ulubionej biblioteki - Idiorm. Używałem go w przeszłości do konsultacji internetowych (i wielu osobistych projektów). Jest to tylko jeden plik (znajdujący się w bibliotece/folderze) i bardzo ułatwia pracę z bazami danych. Jedyne, co robię, to pobieram z bazy danych wszystkie wyniki, które mają wartość czasową między znacznikami czasu rozpoczęcia i zakończenia, zgodną z żądaniem pobrania informacji.
Wynikowa odpowiedź JSON wygląda mniej więcej tak:
[( "etykieta": "2013-01-07", "wartość": "4" ), ( "etykieta": "2013-01-06", "wartość": "65" ), ( "etykieta": „2013-01-05”, „wartość”: „96”)]
Właściwości etykiety zawierają wartości liczbowe MySQL w odpowiednim wierszu, a kolumny zawierają liczbę sprzedaży w danym dniu. To po prostu zależy Kod JavaScript do prawidłowego przetwarzania tych danych i przekształcenia ich do odpowiedniego formatu dzielenie się z wtyczką xCharts.
Cały kod JS znajduje się w pliku Assets/js/script.js. Kod jest trochę długi i aby ułatwić jego śledzenie, przedstawię go w częściach.
Najpierw ustawimy kilka zmiennych i zainicjujemy wtyczkę selektora zakresu dat. Pamiętaj, że zakres danych, którego użyłem, to fork z oryginalnej wtyczki. Zdecydowałem się pracować z tą wersją, ponieważ oryginał zależy od date.js, starszej biblioteki danych, która koliduje z xCharts. Zamiast tego używany jest Sugar.js - doskonała, przydatna biblioteka z rzetelnymi i aktualnymi informacjami.
zasoby/js/skrypt. js
$(function() ( // ustawianie standardowych dat za pomocą funkcji Shugar var startDate = Date.create().addDays(-6), // 6 dni temu endDate = Date.create(); // dzisiaj var range = $ ( "#range"); // pokaż daty w kolejności wpisu range.val(startDate.format("(MM)/(dd)/(rrrr)") + " - " + endDate.format("(MM)/ (dd)/(yyyy)")); // załaduj wykres ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Today": ["dzisiaj", "dzisiaj " ], "Wczoraj": ["wczoraj", "wczoraj"], "Ostatnie 7 dni": , "Ostatnie 30 dni": // Możesz tutaj dodać więcej wpisów ) ),function(start, end)( ajaxLoadChart( początek, koniec); ));
Jak widać, z powodzeniem wykorzystaliśmy informacje i metody Sugar.js do określenia wartości początkowej i punkt końcowy zakres. Wpisałem wyniki z ostatnich 7 dni do skryptu i zaktualizowałem pole wprowadzania zakresu.
Stwórzmy teraz wykres:
// wskazówka dotycząca wskazywania wykresu var tt = $("").appendTo("body"), topOffset = -32; var dane = ( "xScale": "czas", "yScale": "linear", "main": [( nazwa klasy: ".stats", "dane" : )] ); var opts = ( paddingLeft: 50, paddingTop: 20, paddingRight: 10, ośPaddingLeft: 25, tickHintX: 9, // Ile znaczników wyświetlić w poziomie dataFormatX: funkcja(x) ( // tutaj znacznik czasu dostarczony z // ajax jest konwertowany .php na odpowiedni obiekt JavaScript Date return Date.create(x); ), tickFormatX:function(x) ( // ustawia format etykiety dla zwrotu osi x x.format("(MM)/(dd )"); ), "mouseover": funkcja (d, i) ( var pos = $(this).offset(); tt.text(d.x.format("(Miesiąc) (ord)") + ": " + d.y).css(( góra: topOffset + pos.top, lewa: poz.left )).show(); ), "mouseout": funkcja (x) ( tt.hide(); ) ); // Utwórz nową instancję xChart, przekazując // typ grafiki, zestaw dat i dodatkowe funkcje var wykres = nowy xChart("linia kropkowana", dane, "#wykres" , opcje);
Najpierw definiuję obiekt konfiguracyjny xCharts z jego właściwościami i funkcje odwrotne. We właściwości dataFormatX przekształcam ciągi yyyy-mm-dd zwrócone z żądania AJAX na właściwe Obiekty JavaScriptu Date, aby wtyczka mogła je poprawnie wyświetlić i wykonać obliczenia.
Używam także modułu obsługi informacji dla wtyczki przesuwania myszą/mouseout i używam go do wyświetlania podpowiedzi (wtyczka nie jest dostarczana z jednym z modułów).
Na koniec, oto funkcja JavaScript do ładowania danych poprzez AJAX:
// funkcja do ładowania danych poprzez AJAX i wyświetlania ich na wykresie funkcja ajaxLoadChart(startDate,endDate) ( // w przypadku braku danych wykres będzie pusty if(!startDate || !endDate)( chart.setData(( "xScale": "time", "yScale": "linear", "main": [(className: ".stats", data: )] )); return; ) // w przeciwnym razie formularz żądanie ajaksu$.getJSON("ajax.php", ( początek: startDate.format("(rrrr)-(MM)-(dd)"), koniec: endDate.format("(rrrr)-(MM)-(dd) ") ), funkcja(dane) ( var set = ; $.each(data, funkcja() ( set.push(( x: this.label, y: parseInt(this.value, 10) )); )); wykres.setData(( "xScale": "czas", "yScale": "liniowy", "main": [( nazwaklasy: ".stats", dane: zestaw )] )); )); ) ));
xCharts udostępnia metodę setData, dzięki której można łatwo przenosić lub zastępować wyświetlane dane. Atrybut className jest ważny, ponieważ to właśnie jego wtyczka używa do definiowania wykresu. Jeśli to zignorujesz, mogą wystąpić różne dziwne błędy (zaufaj mi, wiem).
To kończy nasz piękny diagram!
Koniec!Możesz użyć tego przykładu, aby ulepszyć swoje obszary kontroli i wizualizować dane statystyczne w pięknym interfejsie.
- Tłumaczenie
Prawie nie da się tego sobie wyobrazić panel informacyjnyżadnych wykresów ani wykresów. Szybko i skutecznie wyświetlają złożone statystyki. Co więcej, dobry diagram również się poprawia Ogólny projekt Twoja strona.
W tym artykule pokażę Ci jedne z najlepszych bibliotek JavaScript do tworzenia wykresów/diagramów (i tabel przestawnych). Biblioteki te pomogą Ci w tworzeniu pięknych i dostosowywalnych grafik do przyszłych projektów.
Chociaż większość bibliotek jest bezpłatna i nadaje się do redystrybucji, niektóre z nich mają płatne wersje z dodatkowymi funkcjami.
D3.js - dokumenty data-centric. Kiedy myślimy dziś o wykresach, pierwszą rzeczą, która przychodzi na myśl, jest D3.js. otwarte źródło projekt D3.js bez wątpienia daje dużo przydatne funkcje, których brakuje większości istniejących bibliotek. Funkcje takie jak „Enter i Exit”, potężne przejścia i składnia podobna do jQuery lub Prototype sprawiają, że jest to jedna z najlepszych bibliotek JavaScript do tworzenia wykresów i wykresów. W D3.js są one generowane przy użyciu HTML, SVG i CSS.W przeciwieństwie do wielu innych bibliotek JavaScript, D3.js nie jest dostarczany z gotowymi wykresami od razu po wyjęciu z pudełka. Możesz jednak rzucić okiem na listę wykresów utworzonych za pomocą D3.js, aby uzyskać ogólny pogląd.
D3.js nie działa poprawnie ze starszymi przeglądarkami, takimi jak IE8. Ale zawsze możesz użyć wtyczek, takich jak wtyczka aight, aby zapewnić kompatybilność z różnymi przeglądarkami.
D3.js był wcześniej szeroko stosowany w witrynach internetowych takich jak NYTimes, Uber i Weather.com
Wykresy Google
Google Charts to biblioteka JavaScript, której regularnie używam do prostego i łatwego tworzenia wykresów. Udostępnia wiele gotowych wykresów, takich jak histogramy kombi, wykresy słupkowe, wykresy kalendarza, wykresy kołowe, diagramy geograficzne itp.
Wykresy Google również mają wiele ustawienia konfiguracji które pomagają się zmienić wygląd sztuki graficzne. Grafika jest generowana przy użyciu HTML5/SVG, aby zapewnić kompatybilność między przeglądarkami i przenośność między platformami na iPhone'a, iPada i Androida. Zawiera również VML do obsługi starszych wersji IE.
Highcharts JS
Highcharts JS to kolejna bardzo popularna biblioteka do tworzenia wykresów. Zakończony duża ilość animacje różnego typu, które mogą przyciągnąć wiele uwagi do Twojej witryny. Podobnie jak inne biblioteki, HighchartsJS zawiera wiele wstępnie utworzonych wykresów: splajn, kształt, kombinacja, kolumna, histogram, kołowy, punktowy itp.
Jedną z największych zalet korzystania z HighchartsJS jest jego kompatybilność ze starszymi przeglądarkami, takimi jak Internet Explorer 6. Standardowe przeglądarki używają SVG do renderowania wykresów. W starszym IE wykresy są budowane za pomocą VML.
Chociaż HighchartsJS jest darmowy dla użytek własny, musisz kupić licencję do użytku komercyjnego.
Wykresy Fusion
Fusioncharts to jedna z najstarszych bibliotek JavaScript, wydana po raz pierwszy w 2002 roku. Wykresy są generowane przy użyciu formatów HTML5/SVG i VML, co zapewnia lepszą przenośność i kompatybilność.
W przeciwieństwie do wielu bibliotek, Fusioncharts zapewnia możliwość analizowania zarówno danych JSON, jak i XML. Możesz także wyeksportować te wykresy do formatu 3 różne formaty: PNG, JPG i PDF.
Fusioncharts jest wysoce kompatybilny ze starszymi przeglądarkami, takimi jak IE6. Z tego powodu stała się jedną z najbardziej preferowanych bibliotek w wielu organizacjach branżowych.
Możesz używać wersji Fusioncharts ze znakiem wodnym bezpłatnie zarówno w projektach osobistych, jak i komercyjnych. Aby pozbyć się znaku wodnego, musisz jednak kupić licencję.
Flota
Flot to biblioteka JavaScript dla JQuery, która umożliwia tworzenie wykresów/wykresów. Jedna z najstarszych i najpopularniejszych bibliotek diagramów.
Flot obsługuje wykresy słupkowe, wykresy punktowe, wykresy słupkowe, wykresy kolumnowe i dowolną kombinację tych typów wykresów. Kompatybilny również ze starszymi przeglądarkami, takimi jak IE 6 i Firefox 2.
Flot jest całkowicie darmowy, wsparcie komercyjne zapewniane jest na specjalne życzenie dewelopera. Oto lista przykładów z wykresami utworzonymi w Flocie.
amWykresy
amCharts jest niewątpliwie jednym z najbardziej piękne diagramy biblioteki nalne. Jest w pełni podzielony na 3 niezależne typy: wykresy JavaScript, wykresy map (amMaps) i wykresy giełdowe.
AmMaps to mój ulubiony z trzech powyższych. Zapewnia funkcje takie jak mapy cieplne, rysowanie linii, dodawanie tekstu do mapy, przesyłanie ikon lub zdjęć Górna część mapę, zmianę skali itp.
amCharts używa SVG do renderowania wykresów, co działa tylko w nowoczesnych przeglądarkach. Wykresy mogą nie wyświetlać się poprawnie w IE w wersji poniżej 9.
Wykres EJS jest udostępniany bezpłatnie i wersje płatne. Darmowa wersja posiada ograniczenie, które nie pozwala na użycie więcej niż 1 wykresu na stronę i więcej niż dwóch (numerycznych) sekwencji na wykres. Sprawdź szczegóły cennika.
uvCharts
uvCharts – biblioteka JavaScript z otwartym kodem źródłowym kod źródłowy, twierdzi, że ma ponad 100 opcji konfiguracyjnych. Zawiera wykresy dla 12 różnych standardów od razu po wyjęciu z pudełka.
UvCharts jest zbudowany na bibliotece D3.js. Projekt ten obiecuje wyeliminować wszystkie złożone niuanse kodowania D3.js i zapewnić łatwą implementację wykresów standardowy widok. uvCharts jest generowany przy użyciu SVG, HTML i CSS.
Wniosek Teraz wybór najlepszej biblioteki diagramów dla Twoich przyszłych projektów należy do Ciebie. Programiści, którzy chcą mieć pełną kontrolę nad swoimi wykresami, z pewnością wybiorą D3.js. Prawie wszystkie powyższe biblioteki mają dobre wsparcie na forach Stackoverflow.Mam nadzieję, że podobał Ci się ten artykuł. Miłego dnia.
Tagi: Dodaj tagi
Jeśli Twoi klienci muszą przekazywać jakiekolwiek raporty, a także porównania, najpopularniejsze wykresy będą Ci bardzo pomocne. Generalnie są do tego stworzone. Aby ułatwić wyszukiwanie, jak zawsze przedstawiam wybór 9 bibliotek różnych grafik w języku Javascript. Te grafiki są dość funkcjonalne, a także mają piękną animację, która będzie przyjemna dla każdego użytkownika.
2. Chartist.JSDuża biblioteka wykresów z obsługą projekt adaptacyjny. SVG jest również używany w grafice.
Doskonała biblioteka z ogromną liczbą przykładów. Zasadniczo te grafiki są proste zarówno pod względem wyglądu, jak i instalacji, ale w pełni spełniają swoje główne zadanie.
Jest to wtyczka JQuery służąca do tworzenia interaktywnej grafiki na stronę internetową. W w tym przypadku tutaj możesz skalować, dodawać i usuwać różne elementy, patelnia i wiele więcej. Ta wtyczka zawiera wiele wbudowanych typów wykresów.
To ogromna i obszerna biblioteka wykresów i diagramów stworzonych przez Chińczyków. Ona wspiera wielka ilość Informacja.
Prosta biblioteka, za pomocą której można bardzo łatwo i szybko dodać do strony internetowej zwykły wykres lub jakiś diagram.
Kolejna świetna biblioteka, która robi to, co powinna. Obecny piękna animacja, funkcjonalność i łatwość montażu.
Możesz tworzyć interaktywne wykresy za pomocą API Google. Istnieją również galerie z już utworzonymi diagramami, aby zobaczyć, co potrafi ta biblioteka.
Łatwa w instalacji i konfiguracji biblioteka wykresów i diagramów. Po prostu go podnieś i zainstaluj.
Jeśli pracowałeś z jakimkolwiek rodzajem danych, wiesz, jak bolesne mogą być liczby. Nie jest łatwo przebrnąć przez te wszystkie liczby i zrozumieć, co one oznaczają. Tutaj na ratunek przychodzi wizualizacja. Wizualizacja wyjaśnia dane i pomaga decydentom wydobyć z nich przydatne spostrzeżenia.
„Dataviz” to skrót od „wizualizacji danych”, którego głównym celem jest jasne i skuteczne przekazywanie użytkownikom informacji za pomocą wykresów statystycznych, wykresów, grafik informacyjnych i tabel.
Jako programiści musimy używać odpowiednich narzędzi, aby tworzyć znaczące wykresy na podstawie danych, zapewniając odpowiednią ilość szczegółów bez odwracania uwagi od ogólnego obrazu.
Dostępnych jest wiele wtyczek jQuery, które mogą pomóc w utworzeniu interaktywnego widoku danych dla Twojej strony internetowej. Ale które z nich są naprawdę przydatne? W tym artykule wymieniłem moje ulubione i podkreśliłem ich znaczenie w określonych sytuacjach. W ten sposób nie będziesz tracić czasu i wysiłku na wyszukiwanie, a będziesz miał przegląd swoich aktualnych wyborów.
1. Wykresy Fusion
Oprócz wykresów JavaScript, FusionCharts oferuje również wtyczka jQuery, który zawiera wszystkie zalety FusionCharts – inteligentny projekt, animację i bogate interaktywne wrażenia. Grafika działa płynnie na wszystkich typach urządzeń, w tym PC, Mac, Urządzenia z Androidem a także iPady i iPhone'y. Jest także kompatybilny wstecz z przeglądarkami do IE6.
Ta wtyczka jQuery ma kilka naprawdę potężnych funkcji. Wykresy mogą być reprezentowane przez dane JSON, Dane XML Lub Tabele HTML. Przedstawiając wiele typowych zdarzeń występujących na grafice (tutaj jest pełna lista), będziesz mieć większą szansę na nakłonienie słuchaczy do podjęcia określonych działań.
Oto przydatny przewodnik użytkowania, który pomoże Ci rozpocząć pracę z wtyczką i rzeczywistymi fragmentami kodu, których możesz użyć. Próbki wtyczek i kodu są również dostępne na Githubie.
W języku duńskim flot (rymuje się z „fabułą”) oznacza elegancki, atrakcyjny, imponujący i właśnie do tego dąży biblioteka Flot. Koncentrują się na tworzeniu łatwych w użyciu, atrakcyjnych i interaktywne wykresy i harmonogramy. Funkcje interaktywne obejmują włączanie i wyłączanie pętli, przesuwanie i powiększanie, interakcję z danymi i automatyczna zmiana rozmiar. Inne funkcje obejmują obsługę wielu osi, wykresy wielopoziomowe i renderowanie tekstu za pomocą Canvas zamiast HTML. Wiele innych funkcji jest dostępnych w postaci wtyczek.
Istnieje wiele filmów pokazujących, jak korzystać z Flota, a także wiele ilustrujących przykładów, do których możesz się odwołać.
Licencja: Open Source. Bezpłatnie do dowolnego użytku.
3. Najlepsze wykresy
Highcharts to kolejna popularna biblioteka wykresów JavaScript. Został wydany w 2009 roku i jego wykorzystanie wciąż nabiera tempa. Ona oferuje schematy ogólne, mapy i wykresy giełdowe.
Możesz pobrać adapter jQuery ze strony strona główna do pobrania wraz z samą biblioteką Highcharts. Dzięki temu możesz nauczyć się wszystkich zaawansowanych funkcji bez konieczności radzenia sobie z waniliowym JavaScriptem.
Podobnie jak FusionCharts, obsługuje także wszystkie przeglądarki (w tym IE6), urządzenia i platformy. Społeczność bardzo wspiera Highcharts i na tej stronie znajdziesz wszystkie wtyczki opracowane przez społeczność. Kolejną fajną funkcją Highcharts jest sekcja demonstracyjna, która pozwala bardzo szybko rozpocząć grę.
Licencja: bezpłatna do celów niekomercyjnych, płatna do celów komercyjnych.
4. Morris.js
Morris.js to potężna biblioteka zawierająca czysty interfejs. Opiera się na jQuery i bibliotece JavaScript Raphaël. Głównym celem jest zapewnienie pięknych diagramów, które są łatwe w użyciu. Domyślne typy wykresów obejmują liniowy, słupkowy, obszarowy i pierścieniowy. W bibliotece znajduje się kilka przykładów, które możesz obejrzeć za pomocą kodu, który pokaże Ci, jak rozpocząć i stworzyć atrakcyjne wykresy w ciągu kilku minut.
Licencja: Uproszczona licencja BSD.
5. CanvasJS jQuery
CanvasJS jQuery to wtyczka graficzna jQuery dostarczana z CanvasJS. Korzystając z tej wtyczki jQuery, możesz korzystać ze wszystkich standardowych funkcji CanvasJS wraz z rozszerzonym zestawem funkcji obejmującym dynamiczne aktualizacje, przesuwanie i powiększanie, zdarzenia i eksport obrazów. Wykresy są wystarczająco dobre dla dużych zbiorów danych i pakiet podstawowy obejmuje 24 różne rodzaje wykresy i wszystkie są responsywne.
Oto kilka dobre przykłady z kodem źródłowym, który wyraźnie demonstruje funkcje wykresów, a także integrację z interfejsem użytkownika jQuery.
Licencja: bezpłatna do celów niekomercyjnych, płatna do celów komercyjnych...
6. Cytoscape.js
Cytoscape.js nie wygląda jak przeciętna biblioteka graficzna, ale jest na tyle imponująca, że zasługuje na umieszczenie na tej liście. W przeciwieństwie do innych wtyczek, które omówiliśmy do tej pory, Cytoscape jest tak naprawdę biblioteką wykresy jQuery(tj. pomaga wizualizować wykresy lub sieci). Jest zoptymalizowany pod kątem konwersji surowych danych sieciowych na wykresy i może również obsługiwać duże ilości danych. Kompatybilny ze wszystkimi nowoczesnymi przeglądarkami, CommonJS/NodeJS, jQuery i Meteor/Atmphere. Obsługuje także zdarzenia dotykowe i standardowe gesty. Aby uzyskać więcej pełna lista funkcji, proszę zapoznać się ze stroną Cytoscape.js.
Dokumentacja Cytoscape.js zawiera rzeczywiste przykłady kodu, nawet w przypadku przypadków interaktywnych, oraz pełny zestaw testów jednostkowych.
Licencja: Open Source. Bezpłatnie dla wszystkich użytkowników. (LGPL3+)
7. Pobożność
Czasami potrzebujesz po prostu małych wykresów przedstawiających Twoją treść i Peity właśnie to robi idealne rozwiązanie dla takich sytuacji. Pozwala łatwo konwertować niewielkie ilości danych na wykresy liniowe, słupkowe i pierścieniowe za pomocą jednego wiersza kodu. Są w formie svg i dlatego są kompatybilne z każdą obsługującą przeglądarką element svg, w tym Chrome, Opera, Firefox, IE9+ i Safari. Możesz także dostosować elementy wizualne wykresy i ustawiaj dynamiczne kolory. Wykresy mogą być aktualizowane w celu odzwierciedlenia zmian w danych. Obsługiwane są również wydarzenia. W załączeniu wiele przykładów z rzeczywistym kodem na stronie Github.
8. Łatwy wykres kołowy
Mówiąc o prostocie i wydajności, muszę wspomnieć o Easy Pie Chart. To wtyczka jQuery, która robi tylko jedną rzecz — tworzy proste wykresy kołowe dla poszczególnych wartości. Do tworzenia tych wykresów wykorzystuje element canvas. Wykresy są łatwe w konfiguracji i wymagają jedynie kilku linijek kodu. Są także responsywne i skalują się w zależności od rozdzielczości ekranu, dzięki czemu zapewniają wyraźną grafikę nawet na wyświetlaczach Retina.
Wtyczka jest kompatybilna ze wszystkimi nowoczesnymi przeglądarkami obsługującymi element canvas. W IE 8 i starszych możesz tworzyć wykresy za pomocą excanvas. Możesz sprawdzić kilka interesujących wersji demonstracyjnych na Githubie.
Licencja: Open source na licencji MIT.
9. jqPlot
jqPlot to wtyczka jQuery, która umożliwia wstawianie czystych wykresów po stronie klienta na strony internetowe. jqPlot charakteryzuje się dużą możliwością podłączania, ponieważ wszystkie obliczenia i rysunki – linie, osie, cienie, siatki itd. – są wykonywane przy użyciu wtykowych wizualizatorów. Możesz rozszerzyć funkcjonalność, aby obsługiwać zdarzenia niestandardowe, dodawać nowe typy wykresów i inne zaawansowane funkcje.
Szczegółowe lekcje dotyczące korzystania z jqPlot są dostępne tutaj. Dostępne są również przykładowe wykresy i niektóre testy jednostkowe.
Licencja: Projekt open source. Licencja podwójna - MIT i GPL wersja 2.
10. Wykresy przebiegu w jQuery
1436351687jLinie przebiegu zapytania w czasie
jQuery Sparklines (podobny do Peity) umożliwia tworzenie małych, wbudowanych wykresów z danymi dostarczanymi bezpośrednio w formacie HTML lub poprzez wbudowany JavaScript. Utworzenie każdego przykładu na powyższym obrazku zajmuje tylko jedną linię kodu. Nie musisz nawet samodzielnie pisać kodu. Istnieje generator kodu (pod nagłówkiem „Wypróbuj”), w którym możesz wprowadzić dane i ustawić parametry, a następnie otrzymać wygenerowany dla Ciebie kod. Pamiętaj, że do wykresów przebiegu w czasie nie można dodawać tekstu ani etykiet. Zostały zaprojektowane tak, aby pokazywać dopasowania do Twojego tekstu. Jeśli potrzebujesz adnotacji lub innych funkcji, lepiej skorzystaj z jednej z wtyczek, o których mówiliśmy powyżej.
Jeśli chcesz użyć tej wtyczki, dostępna jest szczegółowa dokumentacja opcji, składni i użycia.
Licencja: Open Source. Bezpłatnie do wszystkich zastosowań.
11. jQuery.Gantt
Do tej pory mówiliśmy o wtyczkach, które tworzą znane wykresy i wykresy, wtyczkach, które Ci w tym pomogą schematy sieci, a także niektóre do wbudowanych miniwykresów i wykresów. Jeśli jednak potrzebujesz pulpitu nawigacyjnego z funkcjami zarządzania projektami, potrzebujesz wykresów Gantta. Wtyczka jQuery.Gantt umożliwia wizualizację wykresów Gantta przy użyciu technologii Ajax w celu pobrania danych formacie JSON. Funkcje obejmują przesuwanie, powiększanie, wyszukiwanie, wiele zadań, różne kolory dla każdego zadania, etykietowanie świąt i wiele innych. Aby dowiedzieć się więcej o tej wtyczce, możesz zapoznać się z jej szczegółową dokumentacją, która poinformuje Cię o jej parametrach i sposobie korzystania z niej.
Jeśli lubisz wykresy Gantta, sugeruję przeczytanie artykułu „Tworzenie własnego wykresu Gantta za pomocą Webix” autorstwa Sergeya Lapticka na temat tworzenia aplikacji wykresów Gantta przy użyciu frameworka Webix w połączeniu z kodem wykresu Gantta JavaScript o otwartym kodzie źródłowym o nazwie dhtmlxGantt. Warto przeczytać.
Licencja: Projekt open source. Podwójna licencja - MIT i GPL.
wnioski
Lista moich ulubionych bibliotek wykresów jQuery - przynajmniej tych, z których korzystałem - dobiegła końca. Obejmują prawie każdy typ wykresu, funkcjonalność i ustawienia, których możesz potrzebować.
Wysokie konwersje!
Wykorzystanie wykresów i wykresów ma bardzo szerokie zastosowanie. Za ich pomocą można pokazać wiele informacji w wygodnej i zrozumiałej formie, a co za tym idzie, szybko je zrozumieć i zrozumieć.
Istnieje kilka sposobów dodania wykresu lub wykresu do strony internetowej. Pierwszym z nich, o którym prawdopodobnie już myślałeś, jest narysowanie go w dowolnym miejscu edytor graficzny. Ale to nie jest najwygodniejsze i szybka opcja. O wiele łatwiej i szybciej jest zrobić wykres w JavaScript, gdzie wystarczy ustawić niezbędne parametry, wygląd i umieścić go na stronie.
W tym artykule opowiemy Ci o 10 usługach i narzędziach, które pomogą Ci tworzyć wykresy i wykresy w JavaScript. Inne metody tworzenia znajdziesz w sekcji „”.
Urwisko
Rysować wykres liniowy Dzięki tej usłudze wystarczy skopiować kilka linii kodu, ustawić niezbędne parametry i dodać tekst. Kod jest tak prosty i przejrzysty, że można go rozgryźć w ciągu kilku sekund.
Dzięki PlotKit możesz tworzyć wykresy i diagramy, które będą poprawnie wyświetlane we wszystkich przeglądarkach. Na stronie znajdziesz dokumentację, przykłady typów wykresów i Szybka porada(z opisem wszystkich parametrów i ustawień), aby szybko rozpocząć pracę.
Usługa ta pozwala na wykonanie świetnych funkcji wizualnych. Wprowadź równanie, np. 2*sin(4*x)^(x+4), naciśnij „Enter” i funkcja gotowa. Następnie wystarczy skopiować adres URL i wkleić go na swoją stronę.
Najpotężniejsze narzędzie do budowania tabel, wykresów i wykresów przy użyciu jQuery. Na stronie znajdziesz przykłady wszelkiego rodzaju wykresów, a także szczegółowy opis parametry i kroki konfiguracji.
Flota
Biblioteka wykresów jQuery od Google. Nie ma co pisać nic więcej na ten temat, wszystko jest już jasne (: Ale nadal zauważamy, że usługa oferuje ogromną liczbę piękne przykłady z elastyczną i łatwą konfiguracją.
Umożliwia tworzenie wykresów i tabel histogramów danych. Aby zbudować, musisz wprowadzić niezbędne dane i kliknąć przycisk „Oblicz”. Następnie skopiuj kod i pobierz mały skrypt. W razie potrzeby wszystkie dane można wprowadzić w samym kodzie.
Usługa udostępnia 6 rodzajów wykresów (wykres kołowy, wykres liniowy, wykres dynamiczny i 3 rodzaje histogramów). Znajduje się tam opis ustawień, parametrów i szczegółowe przykłady wszelkiego rodzaju diagramy.
Rafał
Raphaël to mała biblioteka JavaScript, która znacznie ułatwia tworzenie wykresów i wykresów. To jest najbardziej potężne narzędzie ze wszystkich przedstawionych w tej recenzji. Łatwiej będzie Ci samemu zobaczyć możliwości biblioteki, niż przeczytać opis jej możliwości.
Plotr
Biblioteka do tworzenia diagramów w Mootools. Świetne narzędzie, który przekazuje informacje w piękny i zrozumiały sposób. Aby go skonfigurować, wystarczy zmienić lub dodać wartości.
Możliwości tej usługi pozwalają na budowanie grafiki 3D. Wśród funkcjonalności warto wyróżnić prostą konfigurację, szybka praca skrypt oraz umiejętność budowania wykresów cosinus i sinus.