Diagramă circulară cu jQuery. Cum să creați un grafic interactiv folosind vizualizările grafice CSS3 și jQuery Jquery
Adesea, în aplicații web sau software, trebuie să oferim anumite informații utilizatorilor. Anterior, informații precum traficul sau statisticile clicurilor erau furnizate printr-un simplu test și numere. Această metodă este destul de simplă și deja depășită.
Odată cu îmbunătățirea internetului, mult mai multe date trebuie colectate și calculate. Deci, afișarea rezultatelor în text simplu este puțin probabil să fie o metodă atât de eficientă. Astăzi, textul a fost înlocuit cu grafice și diagrame, prin care informațiile sunt mai accesibile și mai ușor de înțeles pentru utilizatori. Literal, într-o clipă, privind diagrama, utilizatorul poate determina ce procent de creștere sau scădere a traficului a crescut de la ultima verificare. Acest lucru ajută la accelerarea procesului de determinare a datelor specifice din informațiile calculate.
Există multe moduri diferite de a afișa informații, dar scopul fiecărei componente grafice (diagramă, grafic cu bare etc.) este același - de a converti literele și numerele în procente și de a le afișa vizual.
Mai jos am furnizat o listă de biblioteci de diagrame care vă pot fi utile dacă decideți să afișați lecturile de text sub formă de grafic.
- Biblioteci de grafice și diagrame
Axiis este o platformă gratuită de vizualizare a datelor concepută pentru începători și dezvoltatori avansați. Poate genera atât componente preliminare de vizualizare, cât și modele abstracte și clase de imagini, oferindu-vă posibilitatea de a crea vizualizări unice.
Am Charts este o colecție de diagrame în Flash pentru site-urile dvs. web sau produsele bazate pe web. Am Charts vă permite să extrageți informații din fișiere simple CSV sau XML sau pot citi date dinamice și le pot transforma folosind PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion și multe alte limbaje de programare.
Deensoft este o nouă bibliotecă gratuită care utilizează Prototype și Canvas pentru a crea diagrame atractive. Motivatorii puternici pentru această bibliotecă au fost Flot, Flotr și PlotKit. Scopul bibliotecii este libertatea maximă în design și ușurința în utilizare.
Ejschart este cu adevărat ușor de proiectat. Emprise javascript Charts vă oferă toate instrumentele de care aveți nevoie pentru a publica rapid datele de care aveți nevoie într-o varietate de formate. Emprise javascript Charts va deveni cu siguranță instrumentul tău preferat datorită capabilităților sale largi și a sistemului ușor de utilizat.
Ezcomponents vă va permite să creați diagrame în diferite variante. Mecanismul de export vă va permite să creați imagini de diferite formate din diagrame, precum și opțiuni atât bidimensionale, cât și tridimensionale.
Filamentgroup folosește javascript pentru a extrage date din tabelele HTML și pentru a genera diagrame folosind un element canvas în HTML 5. Instrumentul are acum cod terță parte care este împachetat ca un nou plugin jQuery.
Flot este o bibliotecă javascript pentru un plot impecabil în jQuery. Cu acest instrument puteți realiza desene grafice. Accentul se pune pe ușurința în utilizare (puteți folosi multe opțiuni), aspectul atractiv și alte caracteristici utile.
În general, Fly Charts sunt un set de fișiere SWF care oferă capabilități de vizualizare a datelor. Cu Fly Charts puteți crea diagrame compacte, interactive și atractive în doar un minut. Instrumentul nu necesită niciun proces de instalare și poate funcționa cu orice limbaj de scripting.
Fusion Charts poate fi utilizat cu ușurință în aplicații web dinamice, site-uri web statice și pot fi combinate cu javascript pentru a genera aplicații AJAX. Demo-urile pot fi o modalitate excelentă de a vă arăta ce puteți face gratuit în Fusion Charts.
API-ul Google Chart este un instrument foarte simplu cu care puteți crea diagrame din date și le puteți încorpora într-o pagină web. Integrați informații și parametrii de format folosind solicitări HTTP, iar Google răspunde cu o imagine cu o diagramă în format PNG. Sunt acceptate multe formate diferite de diagrame și, trimițând o solicitare pentru etichete de imagine, puteți insera cu ușurință o diagramă într-o pagină web.
Style Chart este o tehnologie inovatoare care vă permite să generați diagrame dinamice pentru site-urile dvs. web. Această instrucțiune vă va informa despre toate caracteristicile Diagramei de stil.
Bluff este un port javascript al bibliotecii grafice Gruff pentru Ruby. Instrumentul este conceput pentru a susține toate caracteristicile Gruff, dar cu diferențe minime
JFreeChart este o bibliotecă completă de diagrame Java care permite dezvoltatorilor să creeze diagrame profesionale în aplicațiile lor. Instrumentul are un design flexibil care este ușor de schimbat sau îmbunătățit și este destinat aplicațiilor atât pentru dezvoltatori, cât și pentru clienți.
Calculul și desenarea liniilor, axelor, umbrelor și chiar a rețelei sunt toate controlate prin intermediul programelor de randare plug-in. Capacitatea de a edita nu numai elemente de desen, pluginul poate extinde complet funcționalitatea.
JS Charts este un generator de diagrame JavaScript care necesită puțin sau deloc cod! JS Charts vă permite să creați cu ușurință diagrame cu diferite șabloane (bară, plăcintă etc.).
Plotkit este o bibliotecă JS pentru trasarea graficelor și diagramelor. Există, de asemenea, suport pentru HTML și SVG prin Adobe SVG Viewer.
Abilitate excelentă de a crea diagrame și grafice atractive din date XML. XML oferă flexibilitatea de a genera date, iar Flash oferă cele mai bune opțiuni pentru diagrame și grafice.
18.
pChart este un cadru PHP orientat spre clasă, conceput pentru a crea diagrame netede. Informațiile pot fi solicitate din fișiere SQL, CSV sau introduse manual.
Scopul instrumentului graphael este de a crea diagrame atractive pentru site-ul dvs. Instrumentul se bazează pe biblioteca grafică Raphael. Urmăriți demonstrația pentru o privire detaliată asupra diagramelor statice și interactive în acțiune.
Visifire este un set de instrumente gratuite de vizualizare a datelor dezvoltate de Microsoft Silverlight și WPF. Visifire poate fi folosit atât cu aplicațiile WPF, cât și cu Silverlight. Folosind același API, diagramele din ambele medii (WPF și Silverlight) pot fi modificate în doar un minut!
- Incepe sa desenezi!
Deși unele biblioteci necesită încă cunoștințe minime de programare, iar unele pot fi chiar destul de complexe și confuze, toate sunt menite să ofere cel mai eficient proces de creare a vizualizărilor, diagramelor și graficelor. În esență, cu cât biblioteca este mai complicată, cu atât există mai multe oportunități de a crea un anumit proiect.
Dacă am uitat să menționăm această sau acea bibliotecă grozavă, vă rugăm să o faceți pentru noi în comentarii! Mulţumesc anticipat!
Bună ziua, dragul meu cititor, astăzi vreau să vă ofer o selecție minunată de plugin-uri și exemple pentru crearea diferitelor tipuri de diagrame și grafice. Cred că fiecare va găsi ceva interesant pentru ei înșiși.
1. jqPlot - Plugin JQuery universal și extensibil pentru plotare
jqPlot - Plugin JQuery pentru trasarea graficelor în Javascript.
jqPlot produce grafice frumoase cu linii, bare și piese cu o mulțime de caracteristici:
Numeroase stiluri de diagrame.
Datele axei cu formatare personalizată.
Până la 9 axe Y.
Rotiți textul axei.
Calcul automat al liniei de tendință.
Sfaturi instrumente.
Ușurință în utilizare.
Dygraphs este o bibliotecă open source care produce grafice interactive, scalabile în serii de timp. Este conceput pentru a afișa seturi dense de date și pentru a permite utilizatorilor să le exploreze și să le interpreteze.
Particularitati:
Afișați serii temporale fără a utiliza servere externe sau animație Flash
Funcționează în Internet Explorer (folosind excanvas)
Dimensiune mică (69 kb)
Afișează valorile la trecerea mouse-ului
Zoom interactiv
Perioada medie reglabilă
Compatibil cu Google Visualization API
http://dygraphs.com/
Highcharts este o bibliotecă de grafice scrisă în JavaScript pur, care oferă diagrame interactive pentru site-ul sau aplicația dvs. web. În prezent, Highcharts acceptă tipurile de diagrame linie, spline, zonă, arespline, coloană, bară, plăcintă, dispersie, unghiulare, arearange, aresplinerange, columnrange și diagrame polare.
4. JQuery cu efect de defilare cu rotița mouse-ului
Nu folosește sprite PNG sau JPG.
Se ocupă de evenimentele tactile, rotița mouse-ului și de la tastatură.
http://anthonyterrien.com/knob/
Indicatori stilați, animați folosind CSS3.
http://www.red-team-design.com
Highcharts este o bibliotecă de grafice compatibilă cu JQuery și Mootools. Este compatibil cu toate browserele web standard și utilizează date JSON pentru a construi graficul. Acceptă mai multe tipuri de grafice: linie, spline, zonă, arespline, coloană, bară, plăcintă și diagramă de dispersie.
Highcharts.com
O diagramă placă interactivă frumoasă, care utilizează cele mai recente tehnologii HTML5. Nu folosește Flash.
8. Grafic experimental în CSS3
Această metodă este un exemplu de construire a graficelor experimentale în CSS3, fără JavaScript sau imagini. Utilizarea selectoarelor CSS3 este cu adevărat impresionantă: transformări, gradienți și tranziții în uz. Din păcate, nu este acceptat în IE.
9. O altă diagramă în JQuery și HTML5
Pluginul Visualize analizează elementele cheie de conținut într-un tabel HTML structurat și folosește HTML5 pentru a le transforma într-o diagramă sau grafic. De exemplu, într-un tabel de date, rândurile pot servi ca diagramă cu bare, linii sau pene. De asemenea, Vizualizare verifică automat valorile maxime și minime din tabel și le folosește pentru a calcula valorile axei x pentru linie și histogramă. În cele din urmă, pluginul include două stiluri CSS diferite - light și dark - care pot fi folosite ca atare sau pot servi ca punct de plecare pentru personalizarea diagramelor și graficelor.
Dacă clienții sau clienții tăi trebuie să transmită orice fel de raportare, precum și unele comparații, cele mai comune grafice te vor ajuta foarte mult. În general, ele sunt create pentru asta. Pentru a vă ușura căutarea, ca întotdeauna, vă prezint o selecție de 9 biblioteci de diferite grafice în Javascript. Aceste grafice sunt destul de funcționale și au, de asemenea, o animație frumoasă, care va fi plăcută pentru orice utilizator.
2. Chartist.JSBibliotecă mare de diagrame cu suport pentru design adaptiv. SVG este folosit și în grafică.
Bibliotecă excelentă cu un număr mare de exemple. Practic, aceste grafice sunt simple atât ca aspect, cât și ca instalare, dar își îndeplinesc pe deplin sarcina principală.
Acesta este un plugin JQuery pentru crearea de grafică interactivă pentru un site web. În acest caz, puteți mări, adăuga și elimina diverse elemente, puteți deplasa și multe altele. Acest plugin vine cu multe tipuri de diagrame deja încorporate.
Aceasta este o bibliotecă uriașă și extinsă de grafice și diagrame create de chinezi. Suportă o cantitate imensă de informații.
O bibliotecă simplă cu care puteți adăuga foarte ușor și rapid un grafic obișnuit sau un fel de diagramă la o pagină web.
O altă bibliotecă grozavă care face ceea ce trebuie să facă. Există o animație frumoasă, funcționalitate și ușurință de instalare.
Dacă site-ul dvs. este bogat în date și va trebui să vizualizați cu ușurință acele date, utilizând de obicei o bibliotecă de diagrame JavaScript. Cu toate acestea, există câteva zeci de astfel de biblioteci și toate au capabilități ușor diferite.
În acest articol, vom arunca o privire asupra AnyChart prin 10 exemple elegante, dar ușor de utilizat. AnyChart este excelent pentru nevoile dvs. de vizualizare a datelor și pentru ușurința cu care poate gestiona datele în aproape orice format.
De ce AnyChartAnyChart este o bibliotecă comercială și este gratuită pentru orice utilizare necomercială. S-a dovedit foarte bine și este pe piață de mai bine de 10 ani. Inițial am folosit AnyChart bazat pe Flash, dar apoi am trecut la JavaScript pur cu randare SVG / VML.
API-ul AnyChart este foarte flexibil și vă permite să schimbați aproape orice aspect al diagramei din mers în timpul execuției.
AnyChart - familie de produse- AnyChart - conceput pentru a crea diagrame interactive de toate tipurile majore
- AnyStock - conceput pentru a vizualiza seturi mari de date bazate pe dată/ora
- AnyMap - pentru geografie și hărți de locuri
- AnyGantt - pentru soluții de management al proiectelor și al resurselor (Gantt, resurse, diagrame PERT)
Cu toate acestea, aceste biblioteci pot fi considerate ca o mare bibliotecă de diagrame JavaScript (HTML5). Toate au același API, toate diagramele sunt configurate aproape identic, au teme comune, setări și modalități de încărcare a datelor.
Începeți rapid cu AnyChartPentru a începe să utilizați AnyChart pe pagina dvs. HTML, trebuie să faceți doar trei lucruri simple. Primele două implică conectarea la fișierul JavaScript al bibliotecii și furnizarea unui element HTML la nivel de bloc.
Iată un exemplu de șablon HTML pe care îl puteți utiliza:
html, body, #container ( lățime: 100%; înălțime: 100%; ) AnyChart Basic Example // Cod AnyChart aici
Al treilea este să adăugați cod JavaScript care creează un diagramă interactiv interactiv cu o singură serie de coloane:
Anychart.onDocumentLoad(function() ( // creează o diagramă și setează datele var chart = anychart.column([ ["Iarna", 2], ["Primăvara", 7], ["Vara", 6], ["Toamna", " ", 10] ]); // setați titlul diagramei chart.title("AnyChart Basic Sample" // setați diagrama.container("container");
Și este tot! Aceasta este ceea ce avem.
Ușor, nu? Dar totul devine mai simplu și mai flexibil în AnyChart când vine vorba de setarea datelor. Să trecem la următoarea secțiune pentru a vedea acest lucru mai detaliat.
Obținerea datelor în AnyChartUnul dintre lucrurile pe care le face AnyChart este că poate lucra cu date într-o mare varietate de formate. Pe care o alegeți va depinde în cele din urmă de sarcina la îndemână (și într-o oarecare măsură de preferințele dvs. personale), dar abordarea flexibilă a AnyChart îl face foarte potrivit pentru aproape orice proiect.
Date din matriceDe fapt, ați văzut deja prima metodă în secțiunea „Pornire rapidă cu AnyChart” de mai sus. Folosind această metodă, vă declarați datele ca o matrice de matrice, iar AnyChart se ocupă de restul. Această metodă este concisă și, de asemenea, ușor de format și utilizat.
Anychart.onDocumentLoad(function() ( // creează diagramă și setează date // ca Array of Arrays var chart = anychart.pie([ ["Peter", 5], ["John", 7], ["James", 9], [„Jacob”, 12] ]); chart.title(„AnyChart: Array of Arrays”);
Matrice de obiecteA doua metodă este foarte asemănătoare cu prima - setarea datelor ca o matrice de obiecte. De fapt, este mai puțin compact, dar totuși foarte ușor de format, citit și înțeles. În plus, acest format vă permite să personalizați puncte individuale din datele dvs., care pot fi procesate și în alte moduri, dar numai cu mapări suplimentare.
Notă: Când utilizați date în obiecte într-o situație ca aceasta, utilizați nume adecvate pentru câmpurile de argument și valoare. Puteți găsi informații despre acest lucru în documentația AnyChart pentru fiecare tip de diagramă. În cele mai multe cazuri, argumentul este x și valoarea este de obicei plasată în câmpul de valoare.
Anychart.onDocumentLoad(function() ( // creează diagramă și setează date // ca și matrice de obiecte // cel mai mare punct este marcat cu un marker configurat individual var chart = anychart.line([ (x: "Winter", valoare: 5) ), (x: „Primăvară”, valoare: 9, marcator: (activat: adevărat, tip: „star5”, completare: „Aur”)), (x: „Vara”, valoare: 7), (x: „ Fall”, valoare: 1) ]); chart.title(„AnyChart: Array of Objects”); chart.container(„container”).draw(); ));
Creați diagrame cu mai multe seriiDiagramele cu mai multe serii sunt diagrame care vă permit să afișați valorile maxime și minime ale mai multor seturi de date și să le comparați. Când creați diagrame de mai multe serii cu AnyChart, puteți utiliza metodele introduse anterior, dar în plus specificați numele seriei dvs. Motorul AnyChart se va ocupa de restul.
Anychart.onDocumentLoad(function() ( // creează diagramă și setează date // ca Array of Arrays var chart = anychart.line() chart.data((header: ["#", "Euro (€)", "USD) ($)", "Lira (£)"], rânduri:[ ["Iarna", 5, 7, 4], ["Primăvara", 7, 9, 6], ["Vara", 9, 12, 8 ], [„Fall”, 12, 15, 9] ])); ();
Rânduri multiple: matrice de obiecteAcum să vedem cum puteți crea o diagramă cu mai multe serii folosind o serie de obiecte.
Notă: Când utilizați astfel de obiecte, puteți utiliza orice nume de câmp pentru valori.
Iată cum să o faci:
Anychart.onDocumentLoad(function() ( // creează diagramă și setează date // ca matrice de obiecte var chart = anychart.column(); chart.data((header: ["#", "Euro (€)", " USD ($)", „Liră (£)"], rânduri:[ (x: „Iarnă”, USD: 5, EUR: 4, Pound: 3), (x: „Primăvară”, USD: 3, EUR: 3, lire: 3), (x: „Vara”, dolari: 2, eur: 5, lire: 3), (x: „Toamnă”, usd: 4, eur: 2, lire: 3) ])); chart.title("Matrice de obiecte"); chart.legend(true.container("container").draw());
Afișarea datelor dintr-un tabel HTMLO altă modalitate de a încărca date în AnyChart este să utilizați un tabel care există deja pe pagină. Aceasta poate fi o modalitate extrem de eficientă de a vizualiza punctele cheie ale unei liste de numere altfel plictisitoare. Pentru ca acest lucru să funcționeze, va trebui să adăugați un script adaptor de date împreună cu o bibliotecă de diagrame.
Apoi există două opțiuni: puteți prelua date din tabelele create cu eticheta
Cu următorul JavaScript:
Anychart.onDocumentLoad(function() ( // creați diagramă și setați datele var chart = anychart.column(); // analizați tabelul var tableData = anychart.data.parseHtmlTable("#htmlTable"); chart.data(tableData); chart.legend(true); // setează containerul diagramei și desenează chart.container("container").draw());
Și iată cum arată în practică.
Afișați datele folosind marcaj obișnuitAcum să vedem cum funcționează acest lucru atunci când creați un tabel cu etichete și CSS:
... ...
Cu următorul JavaScript:
Anychart.onDocumentLoad(function() ( // creează o diagramă și setează datele var chart = anychart.column(); var tableData = anychart.data.parseHtmlTable(".table", ".row", ".cell p" , ".heading .cell p", ".title" chart.data(tableData) // set chart container and draw chart.container("container").draw();
Puteți vedea că puteți seta selectoare CSS pentru rânduri, anteturi și anteturi de tabel. Practic, nu trebuie să configurați tabelul în sine - puteți configura un script și puteți obține datele din marcaj.
Lucrul cu date JSONDiagramele AnyChart nu au nicio problemă în procesarea datelor în format JSON pur. De fapt, AnyChart funcționează atât de bine cu JSON încât oferă chiar propriile scheme JSON. JSON este un format de date grozav dacă, de exemplu, doriți să păstrați setările și datele împreună. AnyChart are, de asemenea, o serie de metode de serializare JSON care pot ajuta la export.
În acest fel, veți crea o diagramă de combinație de coloane și spline din datele JSON. Acest lucru (și următoarele exemple) necesită scriptul adaptorului de date menționat mai devreme.
Anychart.onDocumentReady(function() ( // JSON data var json = ( "chart": ( "type": "column", "title": "AnyChart: Data from JSON", "series": [( "seriesType" : "Spline", "date": [ ("x": "P1", "valoare": "128,14"), ("x": "P2", "valoare": "112,61"), ("x" : "P3", "valoare": "163,21"), ("x": "P4", "valoare": "229,98"), ("x": "P5", "valoare": "90,54") ] ), ( „serieType”: „Coloană”, „date”: [ („x”: „P1”, „valoare”: „90,54”), (“x”: „P2”, „valoare”: „104,19” ), ("x": "P3", "valoare": "150,67"), ("x": "P4", "valoare": "120,43"), ("x": "P5", "valoare" : "200.34") ] )], "container": "container" ) ); // setează diagrama de date JSON = anychart.fromJson(json);
Lucrul cu date XMLȘi dacă nu vă place JSON, puteți rămâne cu XML, deoarece diagramele AnyChart nu au nicio problemă cu datele formatate XML. La fel ca JSON, AnyChart oferă și propriile scheme XML. XML este, de asemenea, bun atunci când aveți de gând să stocați setări și date în general. Din nou, AnyChart are o serie de metode de serializare XML care pot fi utile la export.
Iată un exemplu de cod pentru o diagramă polară cu mai multe serii creată din setări XML:
Anychart.onDocumentReady(function() ( // Setări XML și date var xml = "" + "" + "" + ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""+ "" // Setați setările și datele ca diagramă XML = anychart.fromXml(xml); / draw chart chart.draw();
Lucrul cu date în format CSVUltimul lucru pe care aș dori să-l demonstrez este cum puteți lucra cu datele stocate în format CSV. AnyChart acceptă acest lucru imediat, cu câteva opțiuni de configurare suplimentare (cum ar fi ce să utilizați ca delimitator). CSV este un format cunoscut și folosit frecvent. Este bun pentru seturi mari de date și oferă economii de lățime de bandă. Puteți descărca date dintr-un CSV (după cum se arată mai jos), le puteți afișa și apoi le puteți încorpora în diagrame.
Cel mai simplu mod de a încărca un fișier CSV într-o diagramă JS AnyChart este dacă fișierul este de fapt separat prin virgulă, conține un argument în prima coloană și nu are titlu, adică arată cam așa:
Farduri de pleoape, 249980 Creion de ochi, 213210 Creion pentru sprâncene, 170670 Oja, 143760 Pomadă, 128000 Luciu de buze, 110430 Rimel, 102610 Fond de ten, 94190 Rouge, 80540, 5354 Pudra
Anychart.onDocumentReady(function () ( anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data)) ( // creează diagramă din diagrama cu date încărcate = anychart. bar(date); // set title chart.title("Orice diagramă din fișierul CSV" // desenați diagramă.container("container").draw());
Dacă câmpurile din fișierul dvs. CSV sunt ordonate diferit, datele pot fi încărcate în setul de date și reatribuite (voi explica cum funcționează acest lucru într-un articol viitor despre utilizări mai avansate ale bibliotecii AnyChart). De asemenea, puteți configura delimitatori în timp ce încărcați date în setul de date.
ConcluzieÎn acest articol, v-am prezentat biblioteca de diagrame JavaScript AnyChart. Mi-am expus punctele forte și am demonstrat cât de ușor este să-ți folosești puterea pentru a crea grafice complexe și atractive din punct de vedere vizual în doar câteva rânduri de cod. Am demonstrat, de asemenea, o serie de moduri de a introduce date în AnyChart, de la structuri de date hard-coded până la capacitatea de a descărca fișiere mai complexe prin rețea.
Toate materialele pot fi găsite în codul sursă
În acest articol vom crea o diagramă interactivă folosind CSS3 și jQuery. Vom folosi o bibliotecă jQuery populară - Flot. Flot este o bibliotecă javascript pură pentru desenarea graficelor utilizate în jQuery. Acest plugin este simplu, dar suficient de puternic pentru a crea grafică frumoasă și interactivă. Pentru mai multe informații despre bibliotecă, vă rugăm să consultați documentația oficială a flotului.
Mai întâi, să creăm marcajul HTML pentru grafic. Să creăm un bloc cu clasa graph-wrapper. În interiorul acestui bloc vom plasa două blocuri. Primul bloc, cu clasa graph-info, va conține o legendă pentru grafice și butoane pentru comutarea între aspectul graficelor. Al doilea bloc conține grafice (linie și bară).
Vizitatori HTML Vizitatori care revin jQuery și biblioteca FlotSă conectăm javascript. Mai întâi, să conectăm biblioteca jquery (de exemplu, de la google). Puteți utiliza același link sau puteți încărca fișierul bibliotecă jQuery pe serverul dvs. Apoi descărcați fișierele Flot și includeți jquery.flot.min.js.
HTML $(document).ready(funcție () ( // Scripturi grafice aici )); Date pentru graficDatele pentru grafic sunt o matrice de forma: . De asemenea, vom seta opțiuni personalizate pentru fiecare tip de date.
jQuery var graphData = [( // Date despre vizite: [ , , , , , , , , , ], culoare: "#71c73e" ), ( // Date privind vizitele returnate: [ , , , , , , , , ], culoare : "#77b7c5", puncte: ( raza: 4, fillColor: "#77b7c5" ) ) ]; Se încarcă diagrameAcum vom încărca două grafice, o linie, cealaltă bară. Ambele au mai multe opțiuni personalizate (culoare, umbră etc.). De asemenea, ambele folosesc date din variabila graphData.
jQuery // Linear $.plot($("#graph-lines"), graphData, ( serie: ( puncte: ( arată: adevărat, rază: 5 ), linii: ( arată: adevărat ), shadowSize: 0 ), grilă : ( culoare: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true ), xaxis: ( tickColor: "transparent", tickDecimals: 2 ), yaxis: ( tickSize: 1000 ) ); // Bare $.plot($("#graph-bars"), graphData, ( serie: ( bare: ( arată: adevărat, barWidth: .9, aliniere: "center" ), shadowSize: 0 ), grilă: ( culoare: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: adevărat), xaxis: ( tickColor: "transparent", tickDecimals: 2), yaxis: ( tickSize: 1000 )); Stiluri pentru blocul de ambalare și copiii săiÎn primul rând, să resetam stilurile implicite pentru toate elementele din blocul părinte al graficelor (este o practică bună să începeți aspectul site-ului web cu conexiuni de resetare a stilului).
CSS /* Resetează */ .graph-container, .graph-container div, .graph-container a, .graph-container span (marja: 0; padding: 0; ) Adăugați un gradient și colțuri rotunjite la wrapper, butoane și sfaturi cu instrumente. CSS /* Gradinet și Colțuri rotunjite */ .graph-container, #tooltip, .graph-info a ( fundal: #ffffff; fundal: -moz-linear-gradient(sus, #ffffff 0%, #f9f9f9 100%); fundal: -webkit-gradient(liniar, stânga sus, stânga jos, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); -webkit-linear-gradient(sus, #); ffffff 0%,#f9f9f9 100%): -o-linear-gradient(sus, #ffffff 0%,#f9f9f9 100%): -ms-linear-gradient (sus, #ffffff 0%; 100%): liniar-gradient (în jos, #ffffff 0%,#f9f9f9 100%) -webkit-border-radius: 3px;În sfârșit, în pasul următor vom adăuga poziționarea blocului părinte, precum și îi vom atribui lățime, înălțime și umplutură. Simțiți-vă liber să experimentați cu aceste valori în funcție de preferințele dvs. de design și de dimensiunile diagramelor.
CSS /* Graph Container */ .graph-container ( poziție: relativă; lățime: 550px; înălțime: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); absolut; lățime: moștenire: .graph-info (lățime: 590px; margine: 10px; 
Să începem prin a adăuga câteva stiluri de bază pentru link-uri. Pentru legendele graficului, să creăm un cerc mic cu aceeași culoare ca și graficele în sine (linie/bară). Pentru a crea un cerc vom folosi pseudo-selectorul:before . Acest selector ne va permite să inserăm conținut înainte de conținutul elementului la care este atașat.
CSS .graph-info a ( poziție: relativă; afișare: bloc inline; float: stânga; înălțime: 20px; umplutură: 7px 10px 5px 30px; margine-dreapta: 10px; text-decor: niciunul; cursor: implicit; ) CSS /* Cercuri de culoare */ .graph-info a:before ( poziție: absolut; afișare: bloc; conținut: ""; lățime: 8px; înălțime: 8px; sus: 13px; stânga: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; ) .graph-info .visitors:before ( fundal: #71c73e; ) .graph-info .returning:before ( fundal: #77b7c5; )În continuare, vom adăuga stiluri la cele două butoane care ne permit să comutăm între graficele cu linii și cu bare.
În cele din urmă, să împiedicăm blocurile să se prăbușească.
CSS /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after (conținut: ""; afișare: blocare; clear: ambele; ) Comutare graficeLa acest pas vom adăuga un eveniment de clic pentru butoanele „bară” și „liniar”. La încărcare vom ascunde graficul cu bare, apoi când facem clic pe butonul „bară” vom face graficul vizibil. Pentru a vedea un grafic cu linii, utilizatorul trebuie să facă clic pe butonul „linie”.
jQuery $("#graph-bars").hide(); $("#linii").on("click", funcția (e) ( $("#bars").removeClass("activ"); $("#graph-bars").fadeOut(); $( this).addClass("activ"); $("#linii-grafic").fadeIn(); $("#bare").on("clic", funcția (e) ( $("#linii").removeClass("activ"); $("#linii-graf").fadeOut(); $( this).addClass("activ"); $("#graph-bars").fadeIn().removeClass("hidden"); TextAdăugați un font și stiluri pentru text.
CSS #tooltip, .graph-info a ( familia de fonturi: „Helvetica Neue”, Helvetica, Arial, sans-serif; greutatea fontului: bold; dimensiunea fontului: 12px; înălțimea liniei: 20px; culoare: #646464; ) .tickLabel ( greutatea fontului: bold; dimensiunea fontului: 12px; culoare: #666; familia de fonturi: „Helvetica Neue”, Helvetica, Arial, sans-serif; )Să ascundem stilurile pentru prima și ultima valoare de-a lungul axei y:
CSS .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child (afișare: niciunul; ) TooltipSă adăugăm un tooltip în interiorul elementului body. Info-ul va fi un bloc cu id egal cu tooltip. Poziția pentru sfatul instrument va fi calculată pe baza poziției punctelor din grafic. Indicatorul va fi afișat numai când treceți cursorul peste punctele graficului.
Funcția jQuery showTooltip(x, y, conținut) ( $("" + conținut + "").css(( sus: y - 16, stânga: x + 20 )).appendTo("corp").fadeIn(); ) var previousPoint = null; $("#linii-grafice, #bare-grafic").bind("plothover", functie (eveniment, poz, articol) ( if (articol) ( if (previousPoint != item.dataIndex) ( previousPoint = item.dataIndex) ; $("#tooltip").remove(); var x = item.datapoint, y = item.datapoint(item.pageX, y + " vizitatori la " + x + ".00h"); ; ) ) else ( $("#tooltip").remove(); previousPoint = null; ) ));Apoi vom adăuga poziționare absolută, umplutură, chenare la sfatul cu instrumente și vom seta afișarea la none .
CSS #tooltip (poziție: absolut; afișare: niciunul; umplutură: 5px 10px; chenar: 1px solid #e1e1e1; ) 
Asta e tot. Am terminat să folosim CSS3 și pluginul flot pentru a personaliza diagramele. Noroc.