Wykres temperatur w jquery. Tworzenie wykresów wieloseryjnych
Jeśli Twoja witryna wymaga dużej ilości danych i potrzebujesz łatwej wizualizacji tych danych, zazwyczaj przy użyciu biblioteki wykresów JavaScript. Takich bibliotek jest jednak kilkadziesiąt i każda ma nieco inne możliwości.
W tym artykule przyjrzymy się AnyChart poprzez 10 stylowych, ale łatwych w użyciu przykładów. AnyChart doskonale nadaje się do potrzeb wizualizacji danych i łatwości obsługi danych w niemal każdym formacie.
Dlaczego AnyChartAnyChart jest biblioteką komercyjną i jest bezpłatna do użytku niekomercyjnego. Sprawdził się bardzo dobrze i istnieje na rynku od ponad 10 lat. Początkowo korzystałem z AnyChart opartego na Flashu, ale potem przerzuciłem się na czysty JavaScript z renderowaniem SVG/VML.
Interfejs API AnyChart jest bardzo elastyczny i umożliwia zmianę niemal dowolnego aspektu wykresu na bieżąco w czasie wykonywania.
AnyChart - rodzina produktów- AnyChart - przeznaczony do tworzenia interaktywnych wykresów wszystkich głównych typów
- AnyStock - przeznaczony do wizualizacji dużych zbiorów danych na podstawie daty/godziny
- AnyMap - dla geografii i map miejsc
- AnyGantt - dla rozwiązań do zarządzania projektami i zasobami (wykresy Gantta, zasoby, PERT)
Biblioteki te można jednak traktować jako jedną dużą bibliotekę wykresów JavaScript (HTML5). Wszystkie mają to samo API, wszystkie wykresy są skonfigurowane niemal identycznie wspólne tematy, ustawienia i sposoby pobierania danych.
Zacznij szybko z AnyChartAby rozpocząć korzystanie z AnyChart na swojej stronie HTML, wystarczy wykonać trzy proste rzeczy. Pierwsze dwa zawierają link do Plik JavaScript bibliotek i udostępnienie elementu HTML na poziomie bloku.
Oto przykładowy szablon HTML, którego możesz użyć:
html, body, #container ( szerokość: 100%; wysokość: 100%; ) Podstawowy przykład AnyChart // Kod AnyChart tutaj
Trzecim jest dodanie kodu JavaScript, który tworzy prosty, interaktywny wykres kolumnowy z pojedynczą serią:
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane var chart = anychart.column([ ["Zima", 2], ["Wiosna", 7], ["Lato", 6], ["Jesień " ", 10] ]); // ustaw tytuł wykresu chart.title("AnyChart Basic Sample"); // ustaw kontener wykresu i narysuj chart.container("container").draw( ));
I to wszystko! Oto co otrzymaliśmy.
Łatwe, prawda? Ale w AnyChart wszystko staje się prostsze i bardziej elastyczne, jeśli chodzi o ustawianie danych. Przejdźmy do następnej sekcji, aby przyjrzeć się temu bardziej szczegółowo.
Pobieranie danych do AnyChartJedną z rzeczy, które robi AnyChart, jest to, że może pracować z danymi w wielu różnych formatach. To, który z nich wybierzesz, będzie ostatecznie zależeć od wykonywanego zadania (i do pewnego stopnia od Twoich osobistych preferencji), ale elastyczne podejście AnyChart sprawia, że doskonale nadaje się do prawie każdego projektu.
Dane z tablicyTak naprawdę pierwszą metodę widziałeś już w sekcji „Szybki start z AnyChart” powyżej. Korzystając z tej metody, deklarujesz swoje dane jako tablicę tablic, a AnyChart zajmuje się resztą. Ta metoda jest zwięzła, a także łatwa w formatowaniu i użyciu.
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane // jako tablicę tablic var chart = anychart.pie([ ["Piotr", 5], ["Jan", 7], ["James", 9], ["Jacob", 12] ]); wykres.tytuł("AnyChart: Tablica tablic"); chart.container("kontener").draw());
Tablica obiektówDruga metoda jest bardzo podobna do pierwszej - ustawienie danych jako tablicy obiektów. W rzeczywistości jest mniej kompaktowy, ale nadal bardzo łatwy do sformatowania, odczytania i zrozumienia. Dodatkowo format ten pozwala na personalizację poszczególnych punktów z Twoich danych, które można przetwarzać również w inny sposób, ale tylko za pomocą dodatkowych mapowań.
Uwaga: Kiedy w takiej sytuacji używasz danych w obiektach, użyj odpowiednich nazw pól argumentów i wartości. Informacje na ten temat znajdziesz w dokumentacji AnyChart każdego typu wykresu. W większości przypadków argumentem jest x, a wartość jest zwykle umieszczana w polu wartości.
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane // jako tablicę obiektów // największy punkt zostanie oznaczony indywidualnie skonfigurowanym znacznikiem var chart = anychart.line([ (x: „Zima”, wartość: 5 ), (x: „Wiosna”, wartość: 9, znacznik: (włączone: prawda, wpisz: „gwiazda5”, wypełnienie: „Złoto”)), (x: „Lato”, wartość: 7), (x: „ Fall”, wartość: 1) ]); chart.title("AnyChart: Array of Objects"); chart.container("container").draw(); ));
Utwórz wykresy z wieloma seriamiWykresy wieloserialne to wykresy umożliwiające wyświetlenie najwyższych i najniższych wartości wielu zestawów danych oraz ich porównanie. Tworząc wykresy z wieloma seriami za pomocą AnyChart, możesz skorzystać z wprowadzonych wcześniej metod, ale dodatkowo określić nazwy swoich serii. Resztą zajmie się silnik AnyChart.
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane // jako tablicę tablic var chart = anychart.line() chart.data((header: ["#", "Euro (€)", "USD ($)", "Funt (£)"], wiersze: [ ["Zima", 5, 7, 4], ["Wiosna", 7, 9, 6], ["Lato", 9, 12, 8 ], ["Upadek", 12, 15, 9] ])); wykres.tytuł("AnyChart: Tablica wielu serii"); wykres.legend(true); wykres.kontener("kontener").draw ();
Wiele wierszy: tablica obiektówZobaczmy teraz, jak utworzyć wykres składający się z wielu serii, korzystając z tablicy obiektów.
Notatka: Używając takich obiektów, możesz użyć dowolnych nazw pól dla wartości.
Oto jak to zrobić:
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane // jako tablicę obiektów var chart = anychart.column(); chart.data((header: ["#", "Euro (€)", " USD ($)”, „Funt (£)”], wiersze: [ (x: „Zima”, usd: 5, eur: 4, funt: 3), (x: „Wiosna”, usd: 3, eur: 3, funt: 3), (x: „Lato”, USD: 2, eur: 5, funt: 3), (x: „Jesień”, USD: 4, eur: 2, funt: 3) ])); wykres.tytuł("Tablica obiektów"); wykres.legend(true); chart.container("kontener").draw());
Wyświetlanie danych z tabeli HTMLInnym sposobem załadowania danych do AnyChart jest użycie tabeli, która już istnieje na stronie. Może to być niezwykle skuteczny sposób na wizualizację kluczowych punktów nudnej listy liczb. Aby to zadziałało, należy dodać skrypt adaptera danych wraz z biblioteką wykresów.
Wtedy są dwie możliwości: możesz pobrać dane z tabel utworzonych za pomocą tagu
Z następującym JavaScriptem:
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane var wykres = anychart.column(); // przeanalizuj tabelę var tableData = anychart.data.parseHtmlTable("#htmlTable"); chart.data(tableData); chart.legend(true); // ustawia kontener wykresu i rysuje chart.container("container").draw());
A oto jak to wygląda w praktyce.
Wyświetlaj dane przy użyciu zwykłych znacznikówZobaczmy teraz, jak to działa podczas tworzenia tabeli ze znacznikami i CSS:
... ...
Z następującym JavaScriptem:
Anychart.onDocumentLoad(function() ( // utwórz wykres i ustaw dane var chart = anychart.column(); var tableData = anychart.data.parseHtmlTable(.table", ".row", ".cell p" , ".heading .cell p", ".title"); wykres.data(tableData); // ustawianie kontenera wykresu i rysowanie chart.container("container").draw();
Możesz zobaczyć, że możesz ustawić selektory CSS dla wierszy, nagłówków i nagłówków tabel. Zasadniczo nie musisz konfigurować samej tabeli - możesz skonfigurować skrypt i uzyskać dane ze znaczników.
Praca z danymi JSONWykresy AnyChart nie mają problemów z przetwarzaniem danych w czystej postaci formacie JSON. W rzeczywistości AnyChart działa tak dobrze z JSON, że udostępnia nawet własne schematy JSON. JSON to świetny format danych, jeśli na przykład chcesz zachować ustawienia i dane razem. AnyChart ma również wiele metod serializacji JSON, które mogą pomóc w eksporcie.
W ten sposób utworzysz wykres kombinacji kolumn i splajnów na podstawie danych JSON. To (i poniższe przykłady) wymaga wspomnianego wcześniej skryptu adaptera danych.
Anychart.onDocumentReady(function() ( // Dane JSON var json = ( "wykres": ( "typ": "kolumna", "tytuł": "AnyChart: dane z JSON", "seria": [( "typ serii" : „Splajn”, „dane”: [ („x”: „P1”, „wartość”: „128,14”), („x”: „P2”, „wartość”: „112,61”), („x” : „P3”, „wartość”: „163,21”), („x”: „P4”, „wartość”: „229,98”), („x”: „P5”, „wartość”: „90,54”)] ), („seriesType”: „Kolumna”, „dane”: [ („x”: „P1”, „wartość”: „90,54”), („x”: „P2”, „wartość”: „104,19” ), („x”: „P3”, „wartość”: „150,67”), („x”: „P4”, „wartość”: „120,43”), („x”: „P5”, „wartość” : "200.34") ] )], "kontener": "kontener" ) ); // ustaw wykres danych JSON = anychart.fromJson(json); // narysuj wykres chart.draw();
Praca z danymi XMLA jeśli nie lubisz JSON, możesz pozostać przy XML, ponieważ wykresy AnyChart również nie mają problemu z danymi w formacie XML. Podobnie jak JSON, AnyChart udostępnia również własne schematy XML. XML jest również dobry, gdy zamierzasz przechowywać ustawienia i dane w ogóle. Ponownie AnyChart ma wiele metod serializacji XML, które mogą być przydatne podczas eksportowania.
Oto przykładowy kod wielosegmentowej mapy biegunowej utworzonej na podstawie ustawień XML:
Anychart.onDocumentReady(function() ( // Ustawienia XML i dane var xml = "" + "" + "" + ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""+ "" // Ustaw ustawienia i dane jako wykres XML = anychart.fromXml(xml); / rysuj wykres chart.draw();
Praca z danymi w formacie CSVOstatnią rzeczą, którą chciałbym zademonstrować, jest sposób pracy z danymi przechowywanymi w formacie CSV. AnyChart obsługuje to od razu po wyjęciu z pudełka, z kilkoma dodatkowymi opcjami konfiguracji (takimi jak użycie jako ogranicznika). CSV jest powszechnie znanym i często używanym formatem. Jest to dobre rozwiązanie w przypadku dużych zbiorów danych i zapewnia oszczędność przepustowości. Możesz pobrać dane z pliku CSV (jak pokazano poniżej), wyświetlić je, a następnie osadzić na swoich wykresach.
Najłatwiejszy sposób załadowania pliku CSV do wykresu JS AnyChart polega na tym, że plik jest rzeczywiście oddzielony przecinkami, zawiera argument w pierwszej kolumnie i nie ma tytułu, tj. wygląda mniej więcej tak:
Cienie do powiek, 249980 Eyeliner, 213210 Ołówek do brwi, 170670 Lakier do paznokci, 143760 Pomada, 128000 Błyszczyk, 110430 Tusz do rzęs, 102610 Podkład, 94190 Rouge, 80540 Puder, 53540
Anychart.onDocumentReady(function () ( onychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", funkcja (data) ( // utwórz wykres z załadowanych danych chart = anychart. bar(data); // ustaw tytuł chart.title("AnyChart z pliku CSV"); // narysuj wykres chart.container("container").draw());
Jeśli pola w pliku CSV są ułożone inaczej, dane można załadować do zbioru danych i ponownie przypisać (wyjaśnię, jak to działa w przyszłym artykule na temat bardziej zaawansowanych zastosowań biblioteki AnyChart). Możesz także skonfigurować ograniczniki podczas ładowania danych do zestawu danych.
WniosekW tym artykule przedstawiłem bibliotekę wykresów AnyChart JavaScript. Przedstawiłem moje mocne strony i pokazałem, jak łatwo można je wykorzystać do tworzenia złożonych i atrakcyjnych wizualnie wykresów w zaledwie kilku linijkach kodu. Pokazałem także wiele sposobów pobierania danych do AnyChart, począwszy od zakodowanych na stałe struktur danych po możliwość załadowania większej liczby złożone pliki przez sieć.
Wszystkie materiały można znaleźć w kodzie źródłowym
Dowiedziałeś się, jak zainstalować i używać Chart.js. Poznałeś także kilka opcji globalnych, które pozwalają zmieniać czcionkę i podpowiedzi dla różnych wykresów. W tym samouczku dowiesz się, jak tworzyć wykresy liniowe i kolumnowe za pomocą Chart.js.
Tworzenie wykresów liniowychWykresy liniowe są przydatne, gdy chcesz pokazać zmianę wartości danej zmiennej w stosunku do zmian innej zmiennej. Druga zmienna ma zwykle charakter tymczasowy. Na przykład wykresy liniowe mogą służyć do pokazania prędkości pojazdu w określonych przedziałach czasu.
Chart.js umożliwia tworzenie wykresów liniowych poprzez ustawienie typu na line . Oto przykład:
Var lineChart = new Chart(speedCanvas, ( typ: „line”, dane: speedData, opcje: chartOptions ));
Podamy teraz dane oraz parametry konfiguracyjne potrzebne do zbudowania wykresu liniowego.
Var speedData = ( etykiety: [„0 s”, „10 s”, „20 s”, „30 s”, „40 s”, „50 s”, „60 s”], zbiory danych: [( etykieta: „Prędkość samochodu”, dane: , )] ); var chartOptions = ( legenda: (wyświetlanie: prawda, pozycja: „góra”, etykiety: ( boxWidth: 80, kolor czcionki: „czarny” ) ) );
W tej części skupimy się na różnych opcjach zaprojektowanych specjalnie do modyfikowania wykresów liniowych. Wszystkie parametry i dane, które podaliśmy powyżej tworzą poniższy wykres.
Kolor obszaru pod krzywą określany jest za pomocą klawisza tłaKolor. Wszystkie wykresy liniowe utworzone tą metodą zostaną wypełnione tym kolorem. Możesz ustawić klucz wypełnienia na wartość false, jeśli chcesz po prostu narysować linię, bez wypełniania obszaru dziennego jakimkolwiek kolorem.
Kolejną rzeczą, którą mogłeś zauważyć, jest to, że do wykreślenia wykresu używamy indywidualnych wskaźników danych (punktów). Biblioteka automatycznie interpoluje wartości wszystkich pozostałych punktów za pomocą wbudowanych algorytmów.
Domyślnie punkty są wykreślane przy użyciu niestandardowej ważonej interpolacji sześciennej. Można jednak ustawić klucz sześciennyInterpolationMode na monotoniczny, aby uzyskać dokładniejsze wykreślanie punktów, jeśli tworzony wykres jest zdefiniowany przez równanie y = f (x) . Elastyczność krzywej Beziera jest określana za pomocą klucza lineTension. Możesz ustawić jego wartość równy zeru rysować linie proste. Należy pamiętać, że ten klucz jest ignorowany, jeśli określono już Cubase InterpolationMode.
Kolor i szerokość obramowania można także ustawić za pomocą klawiszy borderColor i borderWidth. Jeśli chcesz narysować wykres za pomocą linii przerywanej zamiast linii ciągłej, możesz użyć klawisza borderDash. Przyjmuje tablicę jako wartości, których elementy definiują odpowiednio długość i odstępy pociągnięć.
Wyglądem kreślonych punktów można sterować za pomocą właściwości pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius i pointHoverRadius. Dostępny jest także klawisz pointHitRadius, który określa odległość, od której punkty na wykresie zaczną wchodzić w interakcję z myszką.
Var speedData = ( etykiety: [„0 s”, „10 s”, „20 s”, „30 s”, „40 s”, „50 s”, „60 s”], zbiory danych: [( etykieta: „Prędkość samochodu”, dane: , lineTension: 0, fill: false, borderColor: „pomarańczowy”, backColor: „transparent”, borderDash: , pointBorderColor: „pomarańczowy”, pointBackgroundColor: „rgba(255,150,0,0.5)”, pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "rectRounded" )] );
Powyższy obiekt speedData wyświetla te same punkty danych, co poprzedni wykres, ale z różnymi wartościami ustawionymi dla wszystkich właściwości.
Możesz także narysować wiele linii na tym samym wykresie i ustawić różne parametry, aby narysować każdą z nich w następujący sposób:
Var dataFirst = ( etykieta: „Samochód A – prędkość (mph)”, dane: , lineTension: 0,3, // Ustaw więcej opcji ); var dataSecond = ( etykieta: „Samochód B – prędkość (mph)”, dane: , // Ustaw więcej opcji ); var speedData = ( etykiety: ["0 s", "10 s", "20 s", "30 s", "40 s", "50 s", "60 s"], zbiory danych: ); var lineChart = new Chart(speedCanvas, ( wpisz: „line”, dane: speedData ));
kreacja wykresy słupkoweWykresy kolumnowe (lub histogramy) są przydatne, gdy chcesz porównać jeden pomiar dla różnych obiektów - na przykład liczby samochodów sprzedanych przez różne firmy lub liczby osób w określonej grupie wiekowej w mieście. Wykresy słupkowe można tworzyć w Chart.js, ustawiając klucz typu na bar . Domyślnie spowoduje to utworzenie wykresów z pionowymi słupkami. Jeśli chcesz tworzyć wykresy z poziomymi słupkami, musisz ustawić typ na HorizonBar .
Var barChart = new Chart(densityCanvas, ( typ: „bar”, dane: gęstośćData, opcje: chartOptions ));
Stwórzmy histogram pokazujący gęstość wszystkich planet w naszym Układ Słoneczny. Dane dotyczące gęstości zostały pobrane z Listy Informacji o Planetach dostarczonej przez NASA.
Var gęstośćData = ( etykieta: „Gęstość planet (kg/m3)”, dane: ); var barChart = new Chart(densityCanvas, ( wpisz: "bar", dane: ( etykiety: ["Merkury", "Wenus", "Ziemia", "Mars", "Jowisz", "Saturn", "Uran", " Neptun"], zbiory danych: ) );
Powyższe opcje spowodują utworzenie następującego wykresu:
Podobnie jak na wykresach liniowych, słupki są wypełnione kolorem jasnoszarym. Kolor pasków można zmienić za pomocą klawisza tłaKolor. Podobnie kolor i szerokość obramowania różne paski można ustawić za pomocą klawiszy borderColor i borderWidth.
Jeśli chcesz, aby biblioteka nie rysowała obramowań dla określonej strony, możesz określić stronę jako wartość klucza borderSkipped. Możesz ustawić następujące wartości: góra, lewo, dół lub prawo. Możesz także zmienić obramowanie i kolor tła różnych pasków wyświetlanych po najechaniu na nie myszką, używając funkcji hoverBorderColor i hoverBackgroundColor .
Rozmiar kolumn na powyższym wykresie słupkowym został obliczony automatycznie. Można jednak kontrolować szerokość poszczególnych kolumn za pomocą właściwości barThickness i barPercentage. Klawisz barThickness służy do ustawiania grubości kolumn w pikselach, a barPercentage służy do ustawiania grubości jako procentu dostępnej szerokości grupy.
Uczyńmy wykres gęstości (planety) bardziej interesującym, zastępując domyślne wartości histogramów za pomocą poniższego kodu.
Var gęstośćDane = (etykieta: „Gęstość planet (kg/m3)”, dane: , kolor tła: [ „rgba(0, 99, 132, 0,6)”, „rgba(30, 99, 132, 0,6)”, „ rgba(60, 99, 132, 0,6)”, „rgba(90, 99, 132, 0,6)”, „rgba(120, 99, 132, 0,6)”, „rgba(150, 99, 132, 0,6)” , "rgba(180, 99, 132, 0,6)", "rgba(210, 99, 132, 0,6)", "rgba(240, 99, 132, 0,6)" ], kolor obramowania: [ "rgba(0, 99) , 132, 1)”, „rgba(30, 99, 132, 1)”, „rgba(60, 99, 132, 1)”, „rgba(90, 99, 132, 1)”, „rgba(120 , 99, 132, 1), "rgba(150, 99, 132, 1)", "rgba(180, 99, 132, 1)", "rgba(210, 99, 132, 1)", "rgba ( 240, 99, 132, 1)" ], borderWidth: 2, hoverBorderWidth: 0 ); var chartOptions = ( skale: ( yAxes: [( barPercentage: 0,5 )] ), elementy: ( prostokąt: ( borderSkipped: „left”, ) ) ); var barChart = new Chart(densityCanvas, ( wpisz: "horizontalBar", dane: ( etykiety: ["Merkury", "Wenus", "Ziemia", "Mars", "Jowisz", "Saturn", "Uran", " Neptun"], zbiory danych: , ), opcje: chartOptions ));
Obiekt gęstościData służy do ustawiania obramowania i koloru tła kolumn. W powyższym kodzie należy zwrócić uwagę na dwie rzeczy. Po pierwsze, wartości właściwości barPercentage i borderSkipped zostały ustawione wewnątrz obiektu chartOptions zamiast obiektu dataDensity.
Po drugie, tym razem typ wykresu jest ustawiony na HorizonBar . Oznacza to również, że będziesz musiał zmienić wartość barThickness i barPercentage dla osi Y zamiast osi X, aby te wartości miały jakikolwiek wpływ na kolumny.
Powyższe opcje spowodują utworzenie następującego histogramu.
Można także wykreślić wiele zestawów danych na tym samym wykresie, przypisując określony identyfikator osi do określonego zestawu danych. Klucz xAxisID służy do przypisania identyfikatora do dowolnej osi X w zestawie danych. Podobnie klucz yAxisID służy do przypisania identyfikatora do dowolnej osi w zestawie danych. Obie osie posiadają również klucz identyfikacyjny, za pomocą którego można przypisać im unikalne identyfikatory.
Jeśli ostatni akapit był nieco zagmatwany, poniższy przykład pomoże to wyjaśnić.
Var gęstośćDane = (etykieta: „Gęstość planety (kg/m3)”, dane: , kolor tła: „rgba(0, 99, 132, 0.6)”, kolor obramowania: „rgba(0, 99, 132, 1)”, yAxisID: "gęstość osi Y" ); var grawitacjaData = (etykieta: "Grawitacja planety (m/s2)", dane: , kolor tła: "rgba(99, 132, 0, 0.6)", borderColor: "rgba(99, 132, 0, 1)", yAxisID: "grawitacja osi Y" ); var planetData = ( etykiety: ["Merkury", "Wenus", "Ziemia", "Mars", "Jowisz", "Saturn", "Uran", "Neptun"], zbiory danych: ); var chartOptions = ( skale: ( xAxes: [(procent słupka: 1, procent kategorii: 0,6 )], yAxes: [( id: "gęstość osi y" ), ( id: "grawitacja osi y" )] ) ) ; var barChart = new Chart(densityCanvas, ( typ: „bar”, dane: planetData, opcje: chartOptions ));
Tutaj utworzyliśmy dwie osie Y z unikalnymi identyfikatorami i przypisano je do oddzielnych zbiorów danych za pomocą klucza yAxisID. Klawisze barPercentage i CategoryPercentage służą do grupowania kolumn dla poszczególnych planet. Ustaw mniejszą wartość kategoriiProcent, aby zwiększyć odległość między kolumnami różnych planet. Podobnie, ustawiając barPercentage na wyższą wartość, zmniejszymy odległość między słupkami tej samej planety.
W końcuW tym samouczku omówiliśmy wszystkie aspekty wykresów liniowych i kolumnowych w Chart.js. Teraz powinieneś móc tworzyć podstawowe diagramy, zmienić je wygląd i wyświetlaj wiele zestawów danych na jednym wykresie bez żadnych problemów. W kolejnej części serii dowiesz się o wykresach radialnych i biegunowych w Chart.js.
Mam nadzieję, że podobał Ci się ten samouczek. Jeśli masz jakieś pytania, zadaj je w komentarzach.
Często w aplikacjach lub oprogramowaniu internetowym musimy udostępnić użytkownikom pewne informacje. Wcześniej informacje takie jak statystyki ruchu czy kliknięć były dostarczane za pomocą prostego testu i liczb. Ta metoda jest dość prosta i już przestarzała.
Wraz z rozwojem Internetu konieczne jest gromadzenie i obliczanie znacznie większej ilości danych. Dlatego wyświetlanie wyników w postaci zwykłego tekstu raczej nie będzie tak skuteczną metodą. Dziś tekst został zastąpiony wykresami i diagramami, dzięki którym informacje są bardziej dostępne i zrozumiałe dla użytkowników. Dosłownie w jednej chwili, patrząc na diagram, użytkownik może określić, jaki procentowy wzrost lub spadek ruchu wzrósł od ostatniego sprawdzenia. Pomaga to przyspieszyć proces ustalania konkretnych danych z obliczonych informacji.
Istnieje wiele różnych sposobów wyświetlania informacji, ale cel każdego elementu graficznego (wykres kołowy, wykres słupkowy itp.) jest taki sam – przeliczenie liter i cyfr na wartości procentowe i przedstawienie ich wizualnie.
Poniżej przedstawiamy listę bibliotek wykresów, które mogą być przydatne, jeśli zdecydujesz się wyświetlić odczyty tekstowe w formie wykresu.
- Biblioteki wykresów i diagramów
Oś reprezentuje darmowa platforma do wizualizacji danych, przeznaczony dla początkujących i zaawansowanych programistów. Potrafi generować zarówno wstępne elementy wizualizacji, jak i abstrakcyjne modele i klasy obrazów, dając możliwość tworzenia unikalnych wizualizacji.
Am Charts to zbiór wykresów we Flashu dla Twoich witryn internetowych lub produktów internetowych. Am Charts umożliwia wyodrębnianie informacji z prostych plików CSV lub XML, lub może odczytywać dane dynamiczne i przekształcać je za pomocą PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion i wielu innych języków programowania.
Deensoft jest nowy bezpłatna biblioteka, który wykorzystuje Prototype i Canvas do tworzenia atrakcyjnych diagramów. Silnymi motywatorami dla tej biblioteki były Flot, Flotr i PlotKit. Celem biblioteki jest maksymalna swoboda w projektowaniu i łatwość użytkowania.
Ejschart jest naprawdę łatwy w projektowaniu. Emprise javascript Charts pomoże Ci odpowiednie narzędzia aby szybko opublikować potrzebne dane w różnych formatach. Emprise javascript Charts z pewnością stanie się Twoim ulubionym narzędziem ze względu na szerokie możliwości i łatwość obsługi systemu.
Ezcomponents pozwoli Ci tworzyć diagramy w różnych odmianach. Mechanizm eksportu umożliwi tworzenie obrazów w różnych formatach ze schematów, a także opcji dwuwymiarowych i trójwymiarowych.
Grupa włókien z za pomocą JavaScriptu wyodrębnia dane z tabel HTML i generuje wykresy przy użyciu elementu canvas w HTML 5. Narzędzie to teraz ma kod strony trzeciej, który jest spakowany jako nowa wtyczka jQuery.
Flot to biblioteka JavaScript do bezbłędnego kreślenia w jQuery. Za pomocą tego narzędzia możesz tworzyć rysunki graficzne. Nacisk położony jest na łatwość obsługi (można skorzystać z wielu opcji), atrakcyjny wygląd i inne przydatne funkcje.
Ogólnie rzecz biorąc, Fly Charts to zestaw plików SWF zapewniających możliwości wizualizacji danych. Dzięki Fly Charts możesz w ciągu minuty stworzyć kompaktowe, interaktywne i atrakcyjne wykresy. Narzędzie nie wymaga żadnego procesu instalacji i może współpracować z dowolnym językiem skryptowym.
Fusion Charts można z łatwością używać w dynamicznych aplikacjach internetowych, statycznych witrynach internetowych i można je łączyć z JavaScriptem w celu generowania aplikacji AJAX. Prezentacje mogą być świetnym sposobem na pokazanie, co możesz zrobić za darmo w Fusion Charts.
Google Chart API to bardzo proste narzędzie, za pomocą którego możesz tworzyć wykresy na podstawie danych i osadzać je na stronie internetowej. Integrujesz informacje i parametry formatu za pomocą żądań HTTP, a Google odpowiada obrazem z diagramem w formacie PNG. Obsługiwanych jest wiele różnych formatów wykresów, a wysyłając żądanie znaczników graficznych, można łatwo wstawić wykres na stronę internetową.
Style Chart to innowacyjna technologia pozwalająca na generowanie dynamicznych wykresów dla Twoich stron internetowych. Niniejsza instrukcja poinformuje Cię o wszystkich funkcjach Style Chart.
Bluff to port JavaScript biblioteki graficznej Gruff dla Ruby. Narzędzie zostało zaprojektowane tak, aby obsługiwać wszystkie funkcje Gruffa, ale z minimalnymi różnicami
JFreeChart to kompletna biblioteka wykresów Java, która umożliwia programistom tworzenie profesjonalnych wykresów w swoich aplikacjach. Narzędzie ma elastyczną konstrukcję, którą można łatwo zmienić lub ulepszyć i jest przeznaczone do zastosowań zarówno dla programistów, jak i klientów.
Obliczenia i rysowanie linii, osi, cieni, a nawet siatki są kontrolowane za pomocą modułów renderujących wtyczek. Możliwość edycji nie tylko elementów rysunkowych, wtyczka może całkowicie rozszerzyć funkcjonalność.
JS Charts to generator wykresów JavaScript, który wymaga niewielkiej ilości kodu lub w ogóle go nie wymaga! JS Charts umożliwia łatwe tworzenie wykresów o różnych szablonach (słupkowy, kołowy itp.).
Plotkit to biblioteka JS do tworzenia wykresów i diagramów. Przeglądarka Adobe SVG Viewer obsługuje także HTML i SVG.
Doskonała umiejętność tworzenia atrakcyjnych wykresów i wykresów Dane XML. XML zapewnia elastyczne generowanie danych, podczas gdy Flash zapewnia najlepsze opcje wykresy i wykresy.
18.
pChart to zorientowany na klasy framework PHP przeznaczony do tworzenia płynnych wykresów. Informacje można uzyskać z plików SQL, CSV lub wprowadzić ręcznie.
Celem narzędzia gRaphael jest stworzenie atrakcyjnych diagramów dla Twojej witryny. Narzędzie bazuje na bibliotece graficznej Raphael. Obejrzyj demonstrację, aby uzyskać szczegółowe informacje na temat statyki i interaktywne wykresy W akcji.
Visifire to zestaw bezpłatnych narzędzi do wizualizacji danych opracowanych przez Microsoft Silverlight i WPF. Visifire może być używany zarówno z aplikacjami WPF, jak i Silverlight. Korzystając z tego samego API, wykresy w obu środowiskach (WPF i Silverlight) można modyfikować w ciągu minuty!
- Zacznij rysować!
Chociaż niektóre biblioteki nadal wymagają minimalna wiedza programowania, a niektóre mogą być nawet całkowicie skomplikowane i zagmatwane, wszystkie mają na celu zapewnienie jak najwięcej wydajny proces tworzenie wizualizacji, wykresów i wykresów. Zasadniczo im bardziej skomplikowana biblioteka, tym więcej możliwości stworzenia konkretnego projektu.
Jeśli zapomnieliśmy wspomnieć o tej czy innej wspaniałej bibliotece, zrób to za nas w komentarzach! Z góry dziękuję!
Przed akceptacją ważne decyzje każdy biznesmen najpierw analizuje dane. Na każdym obszarze rynku istnieje ogromna ilość danych, z których można wyodrębnić cenne informacje. Z przyjściem Duże dane Stare, dobre arkusze kalkulacyjne Excel nie były już istotne i konieczne było znalezienie równie prostej alternatywy.
Biznesmeni poszukiwali nowych możliwości wizualizacji danych, najlepiej ze wsparciem interaktywności i dowolnej dostępnej perspektywy. W końcu dane są tak dobre, jak ilość informacji, które można z nich wydobyć.
Biblioteki graficzne w JavaScript szybko zajęły niszę potężnych i przystępnych narzędzi do wizualizacji danych. Za ich pomocą możesz wydobyć wszystko przydatna informacja z dowolnej ilości danych, spójrz na nie z wygodnej perspektywy i zobacz wzorce, które są niewidoczne na wykresach na poziomie Excela.
1. Chartist.js
Chartist jest prosty i łatwy do nauczenia, niezbędny dla każdego, kto jest do tego przyzwyczajony Tabele Excela. Grafika jest adaptacyjna i niezależna od DPI ekranu, co czyni bibliotekę doskonałym rozwiązaniem dla witryn przeznaczonych dla szerokiej gamy urządzeń, od telefonów komórkowych po komputery stacjonarne. Rysunek oparty jest na technologii SVG, co gwarantuje kompatybilność ze wszystkimi nowoczesnymi przeglądarkami.
Tym, co czyni Chartist wyjątkową biblioteką wykresów, jest jej społeczność. Nad projektem pracuje wielu programistów, którzy są niezadowoleni z jakichkolwiek ograniczeń alternatywnych skryptów. Jeśli podczas pracy z inną biblioteką napotkałeś ograniczenia, możesz mieć pewność, że zostały one tutaj wyeliminowane.
2. Wykresy Fusion
Jedna z największych bibliotek, FusionCharts, oferuje ponad 90 opcji wykresów i 900 typów map dostępnych od razu po wyjęciu z pudełka. Autorzy chwalą się, że ich produkt jest najlepszy w swojej dziedzinie pod względem wizualizacji danych. Swoje słowa potwierdzają szczegółowymi przykładami wykorzystania biblioteki w rzeczywistych procesach biznesowych.
FusionCharts obsługuje szeroką gamę urządzeń i technologii, w tym Mac, iPhone, Android, a nawet potrafi rysować rzadkości, takie jak IE6!
Twórcy pomyśleli także o formatach - obsługiwane są JSON i XML, renderowanie poprzez HTML5/SVG i VML. Gotowe wykresy można eksportować jako obrazy w formacie PNG, JPG lub jako plik PDF. Rozszerzenia FusionCharts umożliwiają osadzenie biblioteki w dowolnym stosie technologii, w tym jQuery, AngularJS, czystym PHP lub Rails.
Ogólnie rzecz biorąc, FusionCharts zapewnia praktycznie wszystkie funkcje potrzebne do tworzenia pięknych, łatwych w użyciu wykresów odpowiednich do poważnych analiz biznesowych.
Licencja: bezpłatna dla projektów niekomercyjnych, w innym przypadku płatna.
3. Dygrafy
Dygraphs to biblioteka graficzna typu open source, idealna do obsługi wyjątkowo dużych zbiorów danych. „Od razu po wyjęciu z pudełka” w pełni wspiera interaktywność, możliwość udoskonalania i powiększania wykresów nawet na urządzeniach mobilnych.
Biblioteka jest obsługiwana przez wszystkie nowoczesne przeglądarki i Kompatybilność wsteczna rozciąga się do IE8. Obsługiwanych jest wiele opcji i wywołań zwrotnych.
Licencja: open source, bezpłatna do dowolnego użytku.
4. Wykres.js
Chart.js jest idealny do małych projektów, gdy potrzebujesz płaskiego, czystego, eleganckiego wykresu i szybszego. Biblioteka zajmuje tylko 11 KB w postaci skompresowanej, zapewniając jednocześnie 6 opcji wykresów - liniową, histogram, kołową, płatkową, biegunową i pierścieniową. Każdy z nich znajduje się w module, co pozwala załadować dokładnie taki blok, jaki chcesz wykorzystać w projekcie.
Renderowanie odbywa się przy użyciu HTML5 Canvas, a w przeglądarkach, które go nie posiadają, poprzez wypełnienie. Wszystkie grafiki są interaktywne.
Licencja: open source, bezpłatna do dowolnego użytku.
5. Wykresy Google
Google Charts udostępnia szeroką gamę wykresów, które zaspokoją niemal każdy gust. Renderowanie odbywa się przy użyciu HTML5/SVG lub VML w starszym IE. Wszystkie wykresy są interaktywne, a niektóre można powiększać i rozciągać w razie potrzeby. Tutaj możesz zapoznać się z istniejącymi typami wykresów.
Licencja: bezpłatna, ale nie typu open source. Licencja zabrania umieszczania pliku JS w celu renderowania na serwerze serwisu. Jeśli pracujesz nad stroną internetową dla przedsiębiorstwa i umieszczasz poufne dane na grafice, lepiej się przyjrzeć alternatywa dla Google’a Wykresy.
6. Najlepsze wykresy
Highcharts to kolejna popularna interaktywna biblioteka wykresów, podobnie jak większość innych, oparta na HTML5/SVG/VML. Obsługiwany szeroki zakres różne rodzaje wykresy, a specjalny interfejs o tej samej nazwie umożliwia tworzenie interaktywnych wykresów w dowolnym miejscu.
Licencja: bezpłatna do użytku niekomercyjnego, w przeciwnym razie płatna.
7. Flot
Flot to jedna z najstarszych bibliotek, której główną cechą jest prostota i interaktywność. Działa na jQuery i aby być w pełni funkcjonalnym, potrzebujesz doświadczenia z nim. Kiedy opanujesz składnię, będziesz mieć pełną kontrolę nad prezentacją, jej animacją i częściami interaktywnymi.
Flot obsługuje większość nowoczesnych przeglądarek i może nawet rysować w IE6. W repozytorium wtyczek do Flota można znaleźć wiele opracowań autorstwa zewnętrznych autorów, które rozszerzają funkcjonalność biblioteki. Możesz zobaczyć przykłady użycia Flota.
Licencja: open source, bezpłatna do dowolnego użytku.
8. D3.js
Dla niektórych D3 jest pierwszą rzeczą, która przychodzi na myśl, jeśli chodzi o wizualizację danych. To naprawdę potężne otwarte źródło projekt pozwalający na stworzenie niesamowitych efektów wizualnych poprzez zmianę DOM. Wykresy są rysowane przy użyciu HTML5, SVG i CSS.
Biblioteka jest zgodna ze standardami W3C i jest obsługiwana przez wszystkie aktualne przeglądarki. Programiści uwielbiają go za szeroką gamę funkcji i potężne API. Dostępna jest wersja demonstracyjna możliwości D3.
Bądź ostrożny – D3 nie ma wbudowanej grafiki i aby móc rysować, będziesz musiał najpierw zainstalować odpowiednie pakiety rozszerzeń. Można jednak znaleźć wiele złożeń opartych na D3 z gotowymi zestawami wykresów.
Licencja: open source, bezpłatna do dowolnego użytku.
9. Wykresy n3
Jeśli potrzebujesz technologii umożliwiającej rysowanie prostych, interaktywnych wykresów liniowych w oparciu o Twoją aplikację AngularJS, to jest to Twój wybór. N3 opiera się na D3 i jest przeznaczony tylko dla jednego segmentu programistów — tych, którzy używają AngularJS. Ci, którzy szukają różnorodności, mogą chcieć przyjrzeć się innym opcjom. Dostępne są przykłady użycia N3.
Licencja: open source, bezpłatna do dowolnego użytku.
10.NVD3
NVD3 to projekt oparty na d3.js, którego celem jest stworzenie wygodnego i kompletnego zestawu funkcji do rysowania wykresów, ale uproszczenie procesu w porównaniu z czystym d3. Za jego pomocą możesz operować ogromną ilością danych i cieszyć się szczególnie pięknym obrazem.
Licencja: open source, bezpłatna do dowolnego użytku.
11. Wykresy Żaru
Ember Charts został opracowany przez Addepar w celu poszerzenia zakresu funkcji Ember. Oprócz wykresów zespół ten obejmuje także tabele Ember i widżety Ember. Biblioteka zbudowana jest w oparciu o D3 z integracją z frameworkiem Ember.js.
Mocna, szczegółowo dopracowana biblioteka jest idealna do pracy z danymi o dowolnej złożoności. Wbudowana obsługa błędów zapobiega awariom prezentacji w przypadku napotkania nieprawidłowych danych. Możesz samodzielnie rozszerzyć funkcjonalność zestawu.
Licencja: open source, bezpłatna do dowolnego użytku.
12. Wykresy przebiegu w jQuery
Wcześniej rozmawialiśmy głównie o zawodnikach wagi ciężkiej – „wszechstronnych zawodnikach, którzy potrafią dosłownie wszystko. Ale czasami trzeba zrobić coś prostego podstawowe wykresy. jQuery Sparklines jest dokładnie rozwiązaniem, które wypełnia tę niszę. Można go używać do generowania przebiegów w czasie – małych wykresów liniowych, które dają wyobrażenie o ogólnych trendach i zajmują minimalną ilość miejsca na stronie. Biblioteka jest obsługiwana przez większość przeglądarek, w tym IE6.
Licencja: open source, bezpłatna do dowolnego użytku.
13. Sigma.js
Mówiąc o zespołach specjalistycznych, nie można pominąć Sigmy. Jest to potężna biblioteka zajmująca się głównie interaktywnymi wykresami i interakcją sieciową.
Wewnątrz Sigmy znajdziesz niesamowitą ilość ustawień interaktywności. To właśnie z nią przychodzi zrozumienie wykres liniowy może być ekscytujące i niezwykłe. Wystarczy spojrzeć na demo, a zobaczysz, o czym mówimy.
Licencja: open source, bezpłatna do dowolnego użytku.
14. Morris.js
Jak powiedział Morris, dobry harmonogram nie musi być skomplikowane. Morris to miniaturowa biblioteka oparta na jQuery i Raphael, która zapewnia prostą i przejrzystą grafikę. Lista obsługiwanych wizualizacji jest niewielka, ale warto wypróbować Morrisa, jeśli chcesz czegoś szybkiego, prostego i znajomego.
Licencja: open source, bezpłatna do dowolnego użytku.
15. Cytoscape.js
Cytoscape to piękna biblioteka open source w czystym JavaScript na licencji LGPL3 +. Maksymalna optymalizacja i żadnych zewnętrznych zależności. Cytoscape umożliwia tworzenie wykresów, których można następnie używać oddzielnie, osadzając kod na innych stronach.
Biblioteka służy każdemu nowoczesne przeglądarki i obsługuje popularne frameworki, w tym Node.js, jQuery, Meteor i wiele innych. Należy pamiętać, że istnieje aplikacja o nazwie Cytoscape, która pomimo swojej nazwy nie jest w żaden sposób powiązana z biblioteką.
Licencja: open source, bezpłatna do dowolnego użytku.
16. C3.js
C3.js to kolejny fork D3. Liczba oddziałów z D3 pokazuje, jak duże są możliwości biblioteki i jak trudno jest programistom sobie z tym poradzić.
C3.js omija straszliwą krzywą uczenia się D3 poprzez własne procedury obsługi kodu do prezentacji wykresów. C3 umożliwia tworzenie własnych klas, na podstawie których można generować unikalne wykresy. Posiada już API oraz wywołania zwrotne niezbędne do pracy z wykresem po wyrenderowaniu.
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 aplikacji internetowej, która pobiera dane z tabeli 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
Wykorzystuje się tu wiele zasobów zewnętrznych. W głównej sekcji mamy pliki kaskadowych arkuszy stylów dla xCharts, sortownik liczb, funkcję przesyłania (zintegrowaną z superszybką siecią 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ę w schema.sql, można znaleźć w skompresowanym pliku dostępnym 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 wpisać szczegółów 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"]; $ dane[$ klucz]["wartość"] = $wartość["zamówienie_sprzedaży"]; echo json_encode($dane);
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. Zadaniem kodu JavaScript jest odpowiednie przetworzenie tych danych i przekształcenie ich w format odpowiedni do udostępnienia za pomocą wtyczki 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"); // wyświetl 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 punktu początkowego i końcowego zakresu. Wpisałem do skryptu wyniki z ostatnich 7 dni 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 osi x return 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: przesunięcie górne + pozycja.góra, lewa: pozycja.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 rrrr-mm-dd zwrócone z żądania AJAX na odpowiednie obiekty JavaScript 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": [( nazwa klasy: ".stats", dane: )] )); żądanie ajaxu$.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": "linear", "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.