Krátka recenzia javascriptové knižnice na sprisahanie

Highcharts

Highcharts je čistá knižnica grafov HTML5/JavaScript, ktorá ponúka intuitívne interaktívne grafy pre váš web alebo webovú aplikáciu. Highcharts v súčasnosti podporuje čiaru, spline, oblasť, areaspline, stĺpec, pruh, koláč, rozptyl, uhlové meradlá, arearange, areasplinerange, columnrange, bublina, rámček, chybové pruhy, lievik, vodopád a typy polárnych grafov.

Google Charts

Google Charts – ponúka množstvo grafov navrhnutých pre riešenia vizualizácie dát. Tieto grafy sú založené na čistej technológii HTML5/SVG (akceptuje VML pre staršie verzie IE), takže nie sú potrebné žiadne doplnky. Všetky sú interaktívne a mnohé z nich možno posúvať a škálovať. Pridanie týchto grafov na stránku je možné vykonať niekoľkými jednoduchými krokmi.

CanvasJS

CanvasJS – jednoducho použiteľná knižnica HTML5 a JavaScript Mapovanie, postavený na živle Plátno. Grafy je možné zobraziť na rôzne zariadenia, počítajúc do toho mobilné zariadenia, iPad, Android, Windows telefón, Microsoft Surface, na stolné počítače atď. To vám umožní vytvárať funkčnú grafiku, ktorá funguje na všetkých zariadeniach bez toho, aby bola ohrozená udržiavateľnosť alebo funkčnosť vašej webovej aplikácie. CanvasJS prichádza s krásnymi témami a načítava sa 10-krát rýchlejšie ako bežný flash a Graf SVG- výsledkom je grafika, ktorá je ľahká a krásna.

ChartJS

Chart JS – Ľahká, objektovo orientovaná knižnica grafov na strane klienta.

RGraph

RGraph je knižnica HTML5 canvas a JavaScript na vytváranie webových grafov s podporou pre viac ako dvadsať rôzne druhy vizualizácia. RGraph vytvára HTML5 grafy vo webovom prehliadači pomocou JavaScriptu a značky plátno.

Použitie grafy a tabuľky má veľmi široké uplatnenie. S ich pomocou môžete zobraziť veľa informácií pohodlným a zrozumiteľným spôsobom, a preto ich rýchlejšie pochopiť a pochopiť.

Existuje niekoľko spôsobov, ako pridať graf alebo tabuľku na webovú stránku. Prvým, ktorý vás už pravdepodobne napadol, je nakresliť ho do ľubovoľného grafický editor. Toto však nie je najpohodlnejšia a najrýchlejšia možnosť. Oveľa jednoduchšie a rýchlejšie sa dá urobiť graf v JavaScripte, kde stačí nastaviť potrebné parametre, zobraziť a umiestniť na stránku.

V tomto článku vám povieme o 10 služieb a nástrojov, ktorý vám pomôže pri vytváraní grafov a tabuliek v JavaScripte. Ďalšie spôsoby vytvárania nájdete v nadpise „“.

Bluff
Ak chcete pomocou tejto služby nakresliť čiarový graf, stačí skopírovať niekoľko riadkov kódu, nastaviť požadované parametre a pridať text. Kód je taký jednoduchý a jasný, že ho pochopíte za pár sekúnd.

Pomocou PlotKit môžete vytvárať tabuľky a grafy, ktoré sa budú správne zobrazovať vo všetkých prehliadačoch. Na stránke nájdete dokumentáciu, príklady typov grafov a stručný návod(s popisom všetkých parametrov a nastavení), aby ste mohli rýchlo začať.

Táto služba vám umožňuje vytvárať skvelé vizuálne prvky. Zadajte rovnicu, napríklad 2*sin(4*x)^(x+4), stlačte "Enter" a funkcia je pripravená. Potom stačí skopírovať adresu URL a vložiť ju na svoju stránku.

Najvýkonnejší nástroj na vytváranie tabuliek, grafov a grafov na jQuery. Na stránke nájdete príklady všetkých typov grafov, ako aj Detailný popis parametre a kroky nastavenia.

flotila
Knižnica grafov jQuery od spoločnosti Google. K tomu nemôžete napísať nič viac, všetko je už jasné (: Napriek tomu však upozorňujeme, že služba ponúka veľké množstvo krásne príklady s flexibilným a jednoduchým prispôsobením.

Umožňuje vytvárať grafy a tabuľky histogramov údajov. Ak chcete zostaviť, musíte zadať potrebné údaje a kliknúť na tlačidlo "Vypočítať". Potom skopírujte kód a stiahnite si malý skript. V prípade potreby je možné všetky údaje zadať do samotného kódu.

Služba poskytuje 6 typov grafov ( koláčový graf, čiarový graf, dynamický graf a 3 druhy histogramov). Je tam popis nastavení, parametrov a podrobné príklady všetky druhy diagramov.

Raphael
Raphaël je malá JavaScriptová knižnica, ktorá výrazne zjednodušuje prácu pri vytváraní grafov a tabuliek. Toto je najsilnejší nástroj zo všetkých prezentovaných v tejto recenzii. Bude pre vás jednoduchšie vidieť možnosti knižnice sami, ako čítať popis o jej možnostiach.

plotr
Knižnica na vytváranie máp na Mootools. Skvelý nástroj, ktorý prezentuje informácie krásnym a zrozumiteľným spôsobom. A na jeho konfiguráciu stačí zmeniť alebo pridať hodnoty.

Možnosti tejto služby vám umožňujú vytvárať 3D grafiku. Z funkčnosti stojí za to vyzdvihnúť jednoduché nastavenie, rýchla práca skript a schopnosť vytvárať kosínusové a sínusové grafy.

Pokiaľ ide o interoperabilitu, Fleet vám určite priblíži grafiku Flash k jQuery. Aj keď je výstup grafu celkom úhľadný a skvele vyzerajúci, môžete tiež interagovať s dátovými bodmi. Myslím tým, že môžete umiestniť kurzor myši na dátový bod a získať vizuál spätná väzba od hodnoty tohto bodu na grafe.

Flotila verzia kufra podporuje koláčové grafy.

Schopnosť škálovať flotilu.

Okrem toho máte tiež možnosť vybrať časť grafu na vrátenie údajov pre konkrétnu „zónu“. Ako pridanú funkciu pre toto "zónovanie" môžete tiež vybrať oblasť na grafe a priblížiť, aby ste videli dátové body trochu bližšie. Husté.

Sparklines

Obmedzenia: Koláč, Čiara, Bar, Kombinácia

Sparklines je môj obľúbený mini grafický nástroj. Naozaj skvelé pre grafy štýlu panela s nástrojmi (panel nástrojov). Google Analytics pri ďalšom prihlásení). Pretože sú také malé, môžu byť zahrnuté do reťazca (ako v príklade vyššie). Ďalším pekným nápadom, ktorý možno použiť vo všetkých grafických zásuvných moduloch, sú možnosti samoaktualizácie. Ich ukážka rýchlosti myši vám ukáže silu živého mapovania v celej svojej kráse.

Tabuľka dopytov 0,21

Obmedzenia: Plocha, Čiara, Pruh a ich kombinácie

jQuery Chart 0.21 nie je najkrajší doplnok grafov, mal by tam byť uvedený. Jeho funkčnosť je celkom základná, pokiaľ ide o grafy, ktoré dokáže zvládnuť, môže však byť flexibilná, ak tomu venujete trochu času a úsilia.

Pridávanie hodnôt do grafu je pomerne jednoduché:

ChartAdd(( "label" : "Potenciálni zákazníci", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44"," 123","23","99"]));

jQchart

Obmedzenia: Bar, Linka

jQchart je zvláštny, majú zabudované animačné tranzistory a funkcie drag and drop do grafu, avšak je to trochu neohrabané - a zdanlivo zbytočné. Ak máte správne nastavený CSS, generuje pekné grafy, ale je to lepšie.

TufteGraph

Obmedzenia: Pruh a skladaný pruh

Tuftegraph sa predáva ako „pekné stĺpcové grafy, ktoré ukážete svojej matke“. Blíži sa to, flotila je krajšia, ale Tufte sa veľmi odľahčuje. Aj keď tu sa obmedzenia končia – na výber je viacero možností, aby ste dostali to, čo ste zadali. Pozrite sa na kartu rýchleho víťazstva.

Grafy sú skvelým vizuálnym pomocníkom pri prezentácii údajov. Bez nich nie je možné vytvoriť kvalitný admin panel. Nie je ľahké ich inštalovať. Existuje však nová knižnica, ktorá túto úlohu uľahčuje – xCharts . Dnes použijeme tento nástroj spolu s paletou dátumov na Twitteri Bootstrap na vytvorenie krásneho grafu AJAX pre vašu webovú aplikáciu, ktorá získava údaje z tabuľky MySQL.

HTML

Demo štruktúra tohto jazyka je pomerne jednoduchá – na spustenie vykresľovania a na výber informácií musíme na stránku pridať prvky. Keďže aj tak umožňujeme načítanie na stránke, môžeme použiť jej štýlové formy a ikony, aby sme tejto štruktúre dodali pekný vzhľad.

index.php

Využíva množstvo externých zdrojov. V hlavnej časti máme kaskádové súbory štýlov pre xCharts , triedič čísel, sťahovanie (integrované zo super rýchleho CloudFlare CDN) a náš súbor style.css.

Pred zatvorením štítka tabuľky máme knižnicu JQuery, d3.js (vyžaduje program xcharts), xcharts , knižnicu s užívateľsky prívetivé rozhranie sugar.js (ktorý vyžaduje doplnok v rozsahu dátumov), doplnok v rozsahu dátumov a súbor script.js. Ďalej uvidíte, ako to všetko spolu funguje.

MySQL

Ako som spomenul v úvode, skript, ktorý píšeme, získa údaje z tabuľky MySQL a zobrazí ich v grafe. SQL kód, ktorý vytvorí tabuľku, nájdete v schema.sql v komprimovanom súbore, ktorý si môžete stiahnuť pomocou horných tlačidiel. Tabuľka bude vyzerať takto:

Má len tri stĺpce. Stĺpec „dátum“ má priradený jedinečný index, čo znamená, že v rovnaký deň nemôžu existovať duplicitné záznamy. Stĺpec „evidencia tržieb“ uvádza počet tržieb počas dňa. Vaša databáza bude určite iná, ale pokiaľ dostanete správnu odpoveď vo formáte na štruktúrovanie údajov do formátu obyčajného textu, ktorý sa používa na výmenu informácií JSON z PHP skriptu, nebudú už žiadne problémy (viac o tom v ďalšom sekcia).

Poznámka: Nezabudnite zadať podrobnosti o pripojení k MySQL v setup.php. Potom budete musieť vytvoriť novú základňu údaje MySQL a importujte schema.sql zo systému PHPMyAdmin alebo zo systému správy podľa vášho výberu.

PHP

V našom PHP skript z tabuľky vyberieme záznamy, ktoré zodpovedajú odovzdaným počiatočným a konečným informáciám, zhromaždíme všetky údaje do poľa a zobrazíme ich v textový formát výmena dát (JSON):

ajax.php

Hlavička("Typ obsahu: aplikácia/json"); // nastavenie knižnice require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // výber výsledkov $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // vytvorenie nového poľa s údajmi foreach ($výsledky ako $key => $hodnota) ($data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; ) echo json_encode($data); )

Tu používam svoju obľúbenú knižnicu - Idiorm. V minulosti som ho používal pri konzultáciách webových stránok (a mnohých osobných projektoch). Je to len jeden súbor (umiestnený v knižnici/priečinku) a značne uľahčuje prácu s databázami. Všetko, čo robím, je načítať všetky výsledky z databázy, ktoré majú časovú hodnotu medzi počiatočnou a koncovou časovou pečiatkou v súlade s požiadavkou na získanie.

Výsledná odpoveď JSON vyzerá asi takto:

[( "label": "2013-01-07", "value": "4" ), ( "label": "2013-01-06", "value": "65" ), ( "label": "2013-01-05", "value": "96")]

Vlastnosti štítkov obsahujú hodnoty čísel MySQL v príslušnom riadku a stĺpce obsahujú počet predajov za daný deň. Je na kóde JavaScript, aby tieto údaje správne spracoval a pretvoril do vhodného formátu zdieľanie pomocou doplnku xCharts.

JavaScript

Všetok kód JS je obsiahnutý v aktívach/js/script.js. Kód je trochu dlhý a pre uľahčenie sledovania vám ho predstavím po častiach.

Najprv nastavíme niekoľko premenných a inicializujeme doplnok na výber rozsahu dátumov. Upozorňujeme, že rozsah údajov, ktorý som použil, je odnožou pôvodného doplnku. Rozhodol som sa pracovať s touto verziou, pretože originál závisí od date.js, starej dátovej knižnice, ktorá je v konflikte s xCharts. Namiesto toho sa používa sugar.js – skvelá užitočná knižnica so spoľahlivými a aktuálnymi informáciami.

aktíva/js/skript.js

$(function() ( // nastavenie predvolených dátumov pomocou funkcií shugar var startDate = Date.create().addDays(-6), // pred 6 dňami endDate = Date.create(); // dnes var range = $ ( "#range"); // zobrazenie dátumov v poradí vstupu range.val(startDate.format("(MM)/(dd)/(yyyy)") + " - " + endDate.format("(MM)/ ( dd)/(yyyy)")); // načítanie grafu ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, rozsahy: ( "Dnes": ["dnes", "dnes" ] , "Včera": ["včera", "včera"], "Posledných 7 dní": , "Posledných 30 dní": // Môžeš tu pridajte ďalšie položky ) ),funkcia(začiatok, koniec)( ajaxLoadChart(začiatok, koniec); ));

Ako môžete vidieť, úspešne sme použili informácie a metódy sugar.js na definovanie počiatočného a koncový bod rozsah. Do skriptu som zadal výsledky za posledných 7 dní a aktualizoval som vstupné pole rozsahu.

Teraz vytvoríme graf:

// nápoveda pri umiestnení kurzora myši nad graf var tt = $("