Vlad Merjevici

Pe site-uri web, uneori este necesară utilizarea diferitelor diagrame, care fac posibilă transmiterea clară și ușoară a datelor către utilizator. Anterior, grafice similare erau realizate în Excel și apoi inserate pe site-ul web sub formă de imagine. Dar trăim în era tehnologiei informației, așa că vrem să inserăm o diagramă rapid, simplu și chiar astfel încât să fie interactivă și frumoasă. Și apoi Google a venit și ne-a oferit un astfel de serviciu.

O selecție de programe posibile este disponibilă pe această pagină. Fiecare grafic are multe opțiuni care vă permit să personalizați totul după bunul plac: culori, poziție, titluri, animații și multe altele. Te poți descurca cu un set minim dacă nu vrei să intri în aceste subtilități sau dacă ești complet mulțumit de aspectul standard al diagramei.

Voi lua în considerare doar două tipuri de grafice - diagrame circulare și grafice cu linii. Tipurile rămase sunt conectate prin analogie și, odată ce vă dați seama cum să adăugați o diagramă, este mai ușor să lucrați cu alții.

Graficul proporțiilor

Această diagramă seamănă cu un tort tăiat în bucăți de diferite dimensiuni. Suma totală a tuturor părților este de 100%, părțile împart cercul proporțional cu valorile lor.

Exemplul 1 arată codul pentru afișarea compoziției aerului sub formă de diagramă circulară.

Exemplul 1: Diagramă circulară

Diagramă circulară google.load("vizualizare", "1", (pachete:["corechart"])); google.setOnLoadCallback(drawChart); function drawChart() ( var data = google.visualization.arrayToDataTable([ ["Gas", "Volum"], ["Azot", 78,09], ["Oxigen", 20,95], ["Argon", 0,93], [ „Dioxid de carbon”, 0,03] ]; var opțiuni = (titlu: „Compoziția aerului”, is3D: true, pieResidueSliceLabel: „Rest” ); ; chart.draw(date, opțiuni)

Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Vizualizare diagramă circulară

În locul din document în care adăugăm diagrama, introduceți următorul cod.

Setăm lățimea și înălțimea diagramei folosind stiluri și adăugăm un identificator pentru ca scriptul să funcționeze. Același ID trebuie specificat în document.getElementById .

Parametrii diagramei constau din două blocuri: datele efective care trebuie afișate (variabilă de date) și setări (variabila opțiuni). Prima linie din date specifică numele coloanelor ulterioare și, deși nu este afișată în niciun fel, fără ea afișarea nu are loc corect. În opțiuni este scris titlul diagramei, puteți specifica și tridimensionalitatea și alte setări, toate sunt opționale și dacă nu sunt specificate, sunt luate implicit.

Diagrama se dovedește a fi interactivă, părțile sale sunt evidențiate dacă treceți cursorul peste ele sau peste legendă.

Exemple, o listă de parametri și o descriere a diagramei circulare sunt disponibile la această adresă: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

O histogramă este o diagramă cu bare care este utilă pentru a compara diferite valori între ele. Ca exemplu, să luăm producția de petrol din secolul al XIX-lea în Rusia și SUA (Fig. 2). Anii sunt reprezentați pe axa absciselor (axa orizontală), iar producția de petrol în mii de tone este reprezentată pe axa ordonatelor (axa verticală). Înălțimea dreptunghiurilor corespunde valorii specificate.

Orez. 2. Histograma

Principiul creării acestui tip de diagramă este similar cu cel precedent - adăugăm o etichetă, o asociem cu un script care stochează datele pentru diagramă și afișăm parametrii (exemplul 2).

Exemplul 2: Histogramă

Histograma google.load("vizualizare", "1", (pachete:["corechart"])); google.setOnLoadCallback(drawChart); funcția drawChart() ( var data = google.visualization.arrayToDataTable([ ["An", "Rusia", "SUA"], ["1860", 1.3, 70], ["1885", 2000, 3120], [ „1901”, 12170, 9920] ] var opțiuni = ( titlu: „Producție de petrol”, hAxis: (titlu: „An”), vAxis: (titlu: „Mii de tone”) .visualization.ColumnChart(document .getElementById("ulei"); chart.draw(date, options)

Mai întâi, adăugați o etichetă și specificați lățimea și înălțimea dorite folosind stiluri. De asemenea, important este identificatorul prin care scriptul va insera diagrama selectată în element. Scriptul în sine, în comparație cu exemplul anterior, își păstrează structura și constă din două părți editabile - datele reale care urmează să fie afișate pe diagramă și diferitele sale setări. Folosind parametrii hAxis și vAxis, vom adăuga titluri de axe pentru claritate.

rezumat

Este convenabil ca serviciul să se adreseze utilizatorilor cu diferite niveluri de calificare. Puteți copia exemplele atașate și puteți obține imediat un grafic standard gata făcut. Acei utilizatori care încep să înțeleagă bine numeroșii parametri vor fi răsplătiți cu grafică făcută pe gustul lor și similară cu designul site-ului.

Graficele în sine sunt afișate destul de rapid, iar fișierele apelate sunt stocate în cache în timpul primei descărcări, astfel încât afișarea ulterioară a graficelor pe site este mai rapidă. Toate browserele sunt acceptate, inclusiv versiunile mai vechi de Internet Explorer.

Documentația de service nu a fost tradusă în rusă și este disponibilă doar în engleză, ceea ce poate speria unii utilizatori. Există o singură mantră pentru asta - învață limbi străine.

Graficele sunt un ajutor vizual excelent la prezentarea datelor. Fără ele, este imposibil să creați un panou de administrare de înaltă calitate. Nu sunt atât de ușor de instalat. Cu toate acestea, există o nouă bibliotecă care face această sarcină mai ușoară - xCharts. Astăzi vom folosi acest program împreună cu paleta Interval de date a Twitter Bootstrap pentru a crea un grafic AJAX frumos pentru aplicația dvs. web care extrage date dintr-un tabel MySQL.

HTML

Structura demonstrativă a acestui limbaj este destul de simplă - trebuie să adăugăm elemente pe pagină pentru a începe să tragem și să selectăm informații. Deoarece activăm oricum încărcarea pe pagină, putem folosi stiluri de pagină și pictograme pentru a oferi acestei structuri un aspect frumos.

index.php

Grafice frumoase cu jQuery și AJAX | Tutorialzine Demo

Aici sunt folosite o mulțime de resurse externe. În secțiunea principală avem fișierele foaie de stil în cascadă pentru xCharts, sortatorul de numere, încărcarea (integrată din CDN-ul super rapid al CloudFlare) și fișierul nostru style.css.

Înainte de a închide comanda rapidă pentru tabel, avem biblioteca JQuery, d3.js (solicitat de programul xcharts), xcharts, biblioteca sugar.js ușor de utilizat (care necesită pluginul pentru intervalul de date), pluginul pentru intervalul de date și script.js fişier. În continuare, veți vedea cum funcționează totul împreună.

MySQL

După cum am menționat în introducere, scriptul pe care îl scriem va prelua date dintr-un tabel MySQL și le va afișa într-o diagramă. Puteți găsi codul SQL care va crea tabelul în schema.sql într-un fișier comprimat disponibil pentru descărcare folosind butoanele de sus. Tabelul va arăta astfel:

Are doar trei coloane. Coloanei datei i se atribuie un index unic, ceea ce înseamnă că nu pot exista intrări duplicat în aceeași zi. Coloana „înregistrări vânzări” înregistrează numărul de vânzări din timpul zilei. Baza de date va fi cu siguranță diferită, dar atâta timp cât obțineți răspunsul corect în formatul de structurare a datelor într-un format text simplu folosit pentru a schimba informații JSON dintr-un script PHP, nu vor fi probleme (mai multe despre asta în următorul secțiune).

Notă: Nu uitați să introduceți detaliile conexiunii MySQL în setup.php. Va trebui apoi să creați o nouă bază de date MySQL și să importați schema.sql din sistemul PHPMyAdmin sau sistemul de management ales.

PHP

În scriptul nostru PHP, vom selecta înregistrările din tabel care corespund informațiilor de început și de sfârșit transmise, vom colecta toate datele într-o matrice și le vom scoate într-un format de schimb de date text (JSON):

ajax.php

Antet ("Content-Type: application/json"); // configurarea bibliotecii require_once("setup.php"); if (isset($_GET[„start”]) AND isset($_GET[”sfârșit”])) ( $start = $_GET[”start”]; $end = $_GET[”sfârșit”]; $date = array(); // selectează rezultatele $rezultate = ORM::for_table("chart_sales") ->where_gte("data", $start) ->where_lte("data", $end) ->order_by_desc("data") ->find_array(); // creează o nouă matrice cu date foreach ($rezultate ca $key => $value) ( ​​​​$data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; echo json_encode($data);

Aici folosesc biblioteca mea preferată - Idiorm. L-am folosit în trecut pentru consultații de site-uri web (și multe proiecte personale). Acesta este un singur fișier (situat în bibliotecă/dosar) și face lucrul cu bazele de date foarte ușor. Tot ceea ce fac este să preiau toate rezultatele din baza de date care au o valoare temporală între marcajele de timp de început și de sfârșit, în concordanță cu solicitarea de a prelua informațiile.

Răspunsul JSON rezultat arată cam așa:

[( „etichetă”: „07-01-2013”, „valoare”: „4” ), ( „etichetă”: „06-01-2013”, „valoare”: „65” ), ( „etichetă”: „2013-01-05”, „valoare”: „96”)]

Proprietățile etichetei conțin valorile numerelor MySQL în rândul corespunzător, iar coloanele conțin numărul de vânzări pentru ziua respectivă. Depinde de codul JavaScript să proceseze corect aceste date și să le transforme într-un format potrivit pentru partajare cu pluginul xCharts.

JavaScript

Tot codul JS este în assets/js/script.js. Codul este puțin lung și, pentru a fi mai ușor de urmărit, vi-l voi prezenta pe părți.

Mai întâi vom seta câteva variabile și vom inițializa pluginul de selectare a intervalului de date. Vă rugăm să rețineți că intervalul de date pe care l-am folosit este o furcă din pluginul original. Am decis să lucrez cu această versiune deoarece originalul depinde de date.js, o bibliotecă de date moștenită care intră în conflict cu xCharts. În schimb, se folosește sugar.js - o bibliotecă excelentă utilă cu informații fiabile și actualizate.

assets/js/script. js

$(function() ( // setați datele standard folosind funcțiile shugar var startDate = Date.create().addDays(-6), // cu 6 zile în urmă endDate = Date.create(); // astăzi var interval = $ ( "#interval"); // afișează datele în ordinea intrării range.val(startDate.format ("(MM)/(dd)/(aaaa)") + " - " + endDate.format ("(MM)/ (dd)/(aaaa)")); // se încarcă graficul ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, intervale: ( „Astăzi”: [„azi”, „azi” " ], "Ieri": ["ieri", "ieri"], "Ultimele 7 zile": , "Ultimele 30 de zile": // Puteți adăuga mai multe intrări aici ) ),function(start, end)( ajaxLoadChart( început, sfârșit));

După cum puteți vedea, am folosit cu succes informațiile și metodele sugar.js pentru a determina punctul de început și de sfârșit al intervalului. Am introdus rezultatele ultimelor 7 zile în script și am actualizat câmpul de intrare.

Acum să creăm un grafic:

// indiciu când se îndreaptă spre diagramă var tt = $("").appendTo("body"), topOffset = -32; var data = ( "xScale" : "time", "yScale" : "liniar", "principal" : [( className: ".stats", "data" : )] ); var opts = ( paddingLeft: 50, paddingTop: 20, paddingRight: 10, axisPaddingLeft: 25, tickHintX: 9, // Câte bifări de afișat pe orizontală dataFormatX: function(x) ( // aici marca temporală care a venit cu // ajax este convertit .php în obiectul JavaScript Date return Date.create(x ), tickFormatX: function(x) ( // setează formatul etichetei pentru axa x return x.format("(MM)/(dd)); "); ), "mouseover": funcția (d, i) ( var pos = $(this).offset(); tt.text(d.x.format("(Luna) (ord)") + ": " + d.y ).css(( sus: topOffset + pos.top, stânga: pos.left )).show(), "mouseout": function (x) ( tt.hide(); ) ); // Creați o nouă instanță xChart, trecând tipul de diagramă //, un set de date și funcții suplimentare var chart = new xChart("line-dotted", data, "#chart" , opts);

Mai întâi definesc un obiect de configurare xCharts cu proprietățile și apelurile inverse. În proprietatea dataFormatX, transform șirurile aaaa-mm-zz returnate de la cererea AJAX în obiecte JavaScript Date adecvate, astfel încât pluginul să le poată afișa corect și să-și facă calculele.

De asemenea, folosesc un handler de informații pentru pluginul mouseover/mouseout și îl folosesc pentru a afișa un tooltip (plugin-ul nu vine cu unul dintre module).

În cele din urmă, iată o funcție JavaScript pentru a încărca date prin AJAX:

// funcția de încărcare a datelor prin AJAX și afișarea lor pe funcția de diagramă ajaxLoadChart(startDate,endDate) ( // dacă nu există date, diagrama va fi goală if(!startDate || !endDate)( chart.setData(() "xScale" : "time ", "yScale" : "linear", "main" : [( className: ".stats", data: )] )) // în caz contrar, creați o cerere ajax $.getJSON; ("ajax.php ", ( start: startDate.format ("(aaaa)-(MM)-(zz)"), final: endDate.format ("(aaaa)-(LL)-(zz)") ) , function(data) ( var set = ; $.each(data, function() (set.push(( x: this.label, y: parseInt(this.value, 10) )); )); chart.setData (( "xScale" : "time", "yScale" : "liniar", "principal": [( className: ".stats", date: set )] ));

xCharts oferă o metodă setData, astfel încât să puteți muta sau înlocui cu ușurință datele afișate. Atributul className este important deoarece este ceea ce folosește pluginul pentru a vă defini graficul. Dacă îl ignori, se pot întâmpla tot felul de bug-uri ciudate (crede-mă, știu).

Aceasta completează frumoasa noastră diagramă!

Sfârşit!

Puteți folosi acest exemplu pentru a vă îmbunătăți zonele de control și pentru a vizualiza datele statistice într-o interfață frumoasă.

• Traducere

Este aproape imposibil să ne imaginăm un tablou de bord fără diagrame și grafice. Ele afișează rapid și eficient statistici complexe. În plus, o diagramă bună îmbunătățește și designul general al site-ului dvs.

În acest articol, vă voi arăta unele dintre cele mai bune biblioteci JavaScript pentru crearea de diagrame/diagrame (și tabele pivot). Aceste biblioteci vă vor ajuta să creați grafice frumoase și personalizabile pentru proiectele dvs. viitoare.

Deși majoritatea bibliotecilor sunt gratuite și redistribuibile, unele dintre ele au versiuni plătite cu funcționalități suplimentare.

D3.js - Documente centrate pe date Astăzi, când ne gândim la grafice, primul lucru care ne vine în minte este D3.js. Fiind un proiect open source, D3.js oferă, fără îndoială, multe caracteristici utile cărora le lipsesc majoritatea bibliotecilor existente. Caracteristici precum „Enter and Exit”, tranziții puternice și o sintaxă similară cu jQuery sau Prototype o fac una dintre cele mai bune biblioteci JavaScript pentru crearea de grafice și diagrame. În D3.js, acestea sunt generate folosind HTML, SVG și CSS.

Spre deosebire de multe alte biblioteci JavaScript, D3.js nu vine cu grafice prefabricate imediat din cutie. Cu toate acestea, puteți arunca o privire la lista de grafice create cu D3.js pentru a vă face o idee generală.

D3.js nu funcționează corect cu browsere mai vechi, cum ar fi IE8. Dar puteți utiliza oricând plugin-uri precum pluginul aight pentru compatibilitate între browsere.

D3.js a fost folosit anterior pe scară largă pe site-uri web precum NYTimes, Uber și Weather.com

Google Charts

Google Charts este o bibliotecă JavaScript pe care o folosesc în mod regulat pentru a crea diagrame simplu și ușor. Oferă o varietate de diagrame pre-construite, cum ar fi diagrame cu bare combinate, diagrame cu bare, diagrame calendaristice, diagrame circulare, diagrame geografice etc.

Google Charts are, de asemenea, o varietate de setări de configurare care vă pot ajuta să schimbați aspectul diagramei. Grafica este generată folosind HTML5/SVG pentru a asigura compatibilitatea între browsere și portabilitatea pe mai multe platforme pe iPhone, iPad și Android. De asemenea, conține VML pentru a suporta versiuni mai vechi de IE.

Highcharts JS

Highcharts JS este o altă bibliotecă de grafice foarte populară. Vine cu un număr mare de animații de diferite tipuri care pot atrage multă atenție asupra site-ului tău. Ca și alte biblioteci, HighchartsJS conține multe diagrame pre-create: spline, formă, combinație, coloană, histogramă, plăcintă, scatter etc.

Unul dintre cele mai mari avantaje ale utilizării HighchartsJS este compatibilitatea sa cu browsere mai vechi, cum ar fi Internet Explorer 6. Browserele standard folosesc SVG pentru a reda diagramele. În IE vechi, graficele sunt construite prin VML.

Deși HighchartsJS este gratuit pentru uz personal, trebuie să achiziționați o licență pentru uz comercial.

Fusioncharts

Fusioncharts este una dintre cele mai vechi biblioteci JavaScript, lansată pentru prima dată în 2002. Graficele sunt generate folosind HTML5/SVG și VML pentru o mai bună portabilitate și compatibilitate.

Spre deosebire de multe biblioteci, Fusioncharts oferă capacitatea de a analiza atât datele JSON, cât și XML. De asemenea, puteți exporta aceste grafice în 3 formate diferite: PNG, JPG și PDF.

Fusioncharts este foarte compatibil cu browserele mai vechi, cum ar fi IE6. Și din acest motiv, a devenit una dintre bibliotecile cele mai preferate în multe organizații comerciale.

Puteți utiliza versiunea cu filigran a Fusioncharts gratuit atât în ​​proiecte personale, cât și în cele comerciale. Cu toate acestea, trebuie să achiziționați o licență pentru a scăpa de filigran.

Flot

Flot este o bibliotecă JavaScript pentru JQuery care vă permite să creați grafice/diagrame. Una dintre cele mai vechi și mai populare biblioteci de diagrame.

Flot acceptă diagrame cu bare, diagrame cu dispersie, diagrame cu bare, diagrame cu coloane și orice combinație a acestor tipuri de diagrame. De asemenea, compatibil cu browsere mai vechi, cum ar fi IE 6 și Firefox 2.

Flot este complet gratuit, asistența comercială este oferită la cererea specială a dezvoltatorului. Iată o listă de exemple cu diagrame create în Flot.

amCharts

amCharts este, fără îndoială, una dintre cele mai bune biblioteci de diagrame de acolo. Este complet împărțit în 3 tipuri independente: Diagrame JavaScript, Diagrame Hărți (amMaps) și Diagrame bursiere.

AmMaps este preferatul meu dintre cele trei de mai sus. Oferă funcții precum hărți termice, trasarea liniilor, adăugarea de text pe hartă, încărcarea pictogramelor sau fotografiilor în partea de sus a hărții, schimbarea scarii etc.
amCharts folosește SVG pentru a reda diagrame care funcționează numai în browserele moderne. Este posibil ca graficele să nu se afișeze corect în IE sub versiunea 9.

EJS Chart este disponibil în versiuni gratuite și plătite. Versiunea gratuită are o limitare care nu vă permite să utilizați mai mult de 1 diagramă pe pagină și mai mult de două secvențe (numerice) pe diagramă. Consultați detaliile prețurilor.

uvCharts

uvCharts este o bibliotecă JavaScript open source care pretinde că are peste 100 de opțiuni de configurare. Are diagrame pentru 12 standarde diferite chiar din cutie.

UvCharts este construit pe biblioteca D3.js. Acest proiect promite să elimine toate nuanțele complexe ale codificării D3.js și să ofere o implementare ușoară a graficelor cu aspect standard. uvCharts este generat folosind SVG, HTML și CSS.

Concluzie Acum alegerea celei mai bune biblioteci de diagrame pentru proiectele tale viitoare depinde de tine. Dezvoltatorii care doresc control complet asupra graficelor lor vor alege cu siguranță D3.js. Aproape toate bibliotecile de mai sus au un suport bun pe forumurile Stackoverflow.

Sper că v-a plăcut acest articol. Să aveţi o zi bună.

Utilizarea graficelor și diagramelor are aplicații foarte largi. Cu ajutorul lor, puteți afișa o mulțime de informații într-o formă convenabilă și de înțeles și, prin urmare, le puteți înțelege și înțelege rapid.

Există mai multe moduri de a adăuga un grafic sau o diagramă la o pagină web. Prima, la care probabil te-ai gândit deja, este să-l desenezi în orice editor grafic. Dar aceasta nu este cea mai convenabilă și mai rapidă opțiune. Este mult mai ușor și mai rapid să faci un grafic în JavaScript, unde tot ce trebuie să faci este să setezi parametrii necesari, aspectul și să-l plasezi pe pagină.

În acest articol, vă vom spune despre 10 servicii și instrumente care vă vor ajuta să creați grafice și diagrame în JavaScript. Veți găsi alte metode de creare în secțiunea „”.

Cacealma
Pentru a desena un grafic cu linii folosind acest serviciu, trebuie doar să copiați câteva linii de cod, să setați parametrii necesari și să adăugați text. Codul este atât de simplu și clar încât îl puteți da seama în doar câteva secunde.

Cu PlotKit puteți construi diagrame și grafice care se vor afișa corect în toate browserele. Pe site veți găsi documentație, exemple de tipuri de diagrame și un ghid rapid (cu o descriere a tuturor parametrilor și setărilor) pentru a începe rapid.

Acest serviciu vă permite să realizați caracteristici vizuale grozave. Introduceți o ecuație, de exemplu 2*sin(4*x)^(x+4), apăsați „Enter” și funcția este gata. După aceea, tot ce trebuie să faceți este să copiați adresa URL și să o inserați în pagina dvs.

Cel mai puternic instrument pentru construirea de tabele, grafice și diagrame folosind jQuery. Pe site veți găsi exemple de toate tipurile de grafice, precum și o descriere detaliată a parametrilor și pașii de configurare.

Flot
Biblioteca de diagrame jQuery de la Google. Nu trebuie să mai scrieți nimic despre asta, totul este deja clar (: Dar remarcăm totuși că serviciul oferă un număr mare de exemple frumoase cu setări flexibile și simple.

Vă permite să creați diagrame și tabele cu histograme de date. Pentru a construi, trebuie să introduceți datele necesare și să faceți clic pe butonul „Calculați”. Apoi, copiați codul și descărcați un mic script. Dacă se dorește, toate datele pot fi introduse în codul propriu-zis.

Serviciul oferă 6 tipuri de diagrame (diagramă circulară, diagramă cu linii, diagramă dinamică și 3 tipuri de histograme). Există o descriere a setărilor, parametrilor și exemple detaliate ale tuturor tipurilor de diagrame.

Rafael
Raphaël este o mică bibliotecă JavaScript care face crearea de grafice și diagrame mult mai ușoară. Acesta este cel mai puternic instrument dintre toate cele prezentate în această recenzie. Vă va fi mai ușor să vedeți singur capacitățile bibliotecii decât să citiți o descriere a capacităților acesteia.

Plotr
Bibliotecă pentru crearea de diagrame pe Mootools. Un instrument excelent care prezintă informațiile într-un mod frumos și ușor de înțeles. Și pentru a-l configura trebuie doar să modificați sau să adăugați valori.

Capacitățile acestui serviciu vă permit să construiți grafică 3D. Printre funcționalități, merită evidențiate configurarea simplă, operarea rapidă a scriptului și capacitatea de a construi grafice cosinus și sinus.

Există momente când un anumit tip de informații trebuie prezentat pe o pagină de destinație și pe un site web în general. Cu această bibliotecă puteți crea grafice și diagrame pentru site - nu este atât de dificil pe cât pare. Trebuie să vă dați seama o dată (exemplele din acest articol vă vor ajuta). Apoi introduceți-vă datele și bucurați-vă de graficele frumoase și animate. Astfel de lucruri atrag întotdeauna atenția.

Aceasta nu este singura modalitate de a vă face pagina de destinație sau site-ul web special. Mai jos sunt câteva efecte interesante pe care le puteți aplica cu ușurință proiectelor dvs.:

Toate cele 3 exemple de grafice animate pot fi vizualizate mai jos:

DescărcațiCum să utilizați o grafică frumoasă pentru propriile dvs. scopuri?

Vreau să spun imediat că aceste grafice sunt și adaptive. Acum acest lucru este important, deoarece numărul utilizatorilor care accesează site-ul de pe dispozitive mobile crește în fiecare oră.

Astfel de diagrame frumoase sunt create folosind biblioteca - Chartist.js.

Și cu aplicare, ele „prind viață” și atrag atenția. Acum imaginați-vă reacția vizitatorilor când văd asta pe o pagină de destinație obișnuită! La urma urmei, nu vei surprinde pe nimeni, dar astfel de elemente vor îmbunătăți întotdeauna calitatea site-ului.

Mai întâi, să parcurgem pașii care vă vor ajuta să conectați această bibliotecă, apoi voi arăta câteva exemple și voi vorbi despre toate funcțiile acestei biblioteci. Dar vă avertizez imediat că este pur și simplu imposibil să luați în considerare absolut toate funcțiile dintr-un articol.

Etapa 1. Conectăm stilurile și scripturile necesare

Puteți descărca fișiere de stil și script și le puteți plasa pe găzduire, dar este mult mai convenabil să introduceți doar 2 linii în HTML și să conectați tot ce aveți nevoie:

Acest lucru este suficient pentru a crea primul grafic sau diagramă frumos. A mai rămas un ultim pas.

Etapa 3. Setați valorile graficului (JS)

Pentru început, voi prezenta imediat codul complet care creează un astfel de grafic:

Și iată codul în sine:

COD JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12

nou Chartist.Line (".chart1" , ( etichete: [ „Ziua 1” , „Ziua 2” , „Ziua 3” , „Ziua 4” , „Ziua 5” ] , seria: [ [ 12 , 9 , 3 , 8, 4], [2, 1, 4.7, 5.5, 8]]), (fullWidth: adevărat, chartPadding: (dreapta: 50)));

Să trecem prin fiecare rând, astfel încât să înțelegeți complet acest mic script JS. Și dacă înțelegeți de ce este responsabilă fiecare linie, puteți modifica orice valoare pentru a vă potrivi.

• Linia 1 - Pe această linie, observați valoarea dintre ghilimele simple. Aici indicăm blocul în care vom avea un grafic sau diagramă.
• Linia 2 - scriem numele unei diviziuni de-a lungul axei X, separate prin virgule între ghilimele simple.
• Liniile de la 3 la 6 - aici setați valorile axei Y pentru fiecare linie de pe grafic. O linie de valori între paranteze pătrate (în acest script rândurile a 4-a și a 5-a) corespunde unei linii.
• Linia 8 - prin specificarea valorii true , am extins graficul pe toată lățimea „blocului părinte”.
• Liniile de la 9 la 11 - setați indentarea interioară în dreapta. Acest lucru se face astfel încât descrierea diviziunilor de-a lungul axei X să nu fie tăiată și plasată într-un singur bloc.

Dacă urmați toți pașii indicați mai sus, veți obține deja un grafic frumos. Tot ce rămâne este să introduceți valorile necesare. Dar acest grafic nu este diferit de toate celelalte care pot fi văzute pe Internet. Vedeți mai jos cum puteți adăuga unicitate acestui grafic, după care va atrage atenția.

Exemplul 1. Grafic animat

Dar cum poți crea un grafic ca cel din imaginea de mai sus (imaginea este animată, dacă nu ai animație, atunci așteptați până se încarcă) de mai sus?

Pentru a face acest lucru, trebuie doar să adăugați câteva proprietăți ale elementelor pe diagrama finală. Deoarece întregul grafic constă din elemente SVG, trebuie doar să decidem pe care vrem să o animam.

Pentru a anima două linii așa cum am făcut în acest exemplu, trebuie să adăugați următorul cod CSS la foaia de stil:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/*Diagrama #1*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-line ( stroke: #F04D3A ; stroke-width: 5px ; stroke-dasharray: 5px 5px ; animație: dashoffset- șapte 200ms liniar infinit ;) /*Culoarea primelor puncte de linie*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-point( stroke: #B22819 ; ) .chart1 .ct-chart . ct-serie .ct-series-b .ct-line ( stroke: #4DB543 ; stroke-width: 5px ; stroke-dasharray: 5px 5px ; animație: dashoffset 200 ms liniar infinit ; ) /*Culoarea punctelor a doua linie*/ .chart1 .ct -chart .ct-series .ct-series-b .ct-point( stroke: #0FB500 ; ) /*Animarea mișcării punctelor punctate*/ @keyframes dashoffset ( 0% ( stroke-dashoffset: 7px ; ) 100% ( stroke-dashoffset: 0px ; ) )

Nu scriu partea JS aici, este foarte asemănătoare în fiecare dintre exemple. Dacă ați studiat cu atenție descrierea codului JS de mai sus, unde am analizat totul literal linie cu linie, atunci nu vă va fi greu să vă dați seama nici aici.

Exemplul 2. Animație de evidențiere a liniei principale pe diagramă

Există animație aici (în imaginea de mai sus). Dacă nu o vedeți, atunci poate că imaginea pur și simplu nu s-a încărcat, așteptați.

Acesta este un mod grozav de a afișa modificări și de a atrage atenția asupra unei linii specifice din grafic. Totul se face în CSS3. A fost folosit următorul cod de animație:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

/*Diagrama #2*/ /*Culoarea, grosimea și stilul primei linii*/ .chart2 .ct-chart .ct-series .ct-series-a .ct-line ( stroke: #949494 ; stroke-width: 5px ; ) .chart2 .ct-chart .ct-series .ct-series-a .ct-point( stroke: #656565 ; ) /*Culoarea, grosimea și stilul celei de-a doua linii*/ .chart2 .ct-chart . ct-series .ct-series-b .ct-line ( stroke: #6765B5 ; stroke-width: 5px ; animație: width-pulse 2s infinit; ) .chart2 .ct-chart .ct-series .ct-series-b .ct-point ( stroke: #403CB5 ; ) /*Culoarea, grosimea și stilul celei de-a treia linii*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-line ( stroke: #949494 ; stroke-width: 5px ; ) /*Culoarea punctului pentru a treia linie de pe diagramă*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-point( stroke: #656565 ; ) / * Animație ondulată pentru a evidenția linia de pe diagramă*/ @keyframes width-pulse ( 0% ( stroke-width: 6px ; stroke-width: #403CB5 ; ) 50% (stroke-width: 14px ; stroke-width: #E40DE4 ; ) 100% ( lățimea cursei: 6px ; cursă: #403CB5 ; ) )

Exemplul 3. Animație în două direcții

Ei bine, ultimul exemplu cu animația CSS3 este animația pe o diagramă în două direcții.

Pentru acest efect, trebuie să utilizați următorul cod CSS și animația:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/*Diagrama #3*/ /*Culoarea, grosimea și stilul celei de-a doua linii*/ .chart3 .ct-chart .ct-series .ct-series-b .ct-line ( stroke: #E44A4A ; stroke-width: 5px ; stroke-dasharray: 30px ; .ct-chart .ct-series .ct-series-a .ct-line ( stroke: #949494 ; stroke- width: 5px ; ) /*Culoarea punctului pentru prima linie de pe diagramă*/ .chart3 .ct -chart .ct-series .ct-series-a .ct-point( stroke: #656565 ; ) /*Animație în două direcții pe grafică*/ @keyframes dasharray-craziness ( 0% ( stroke-dasharray: 7px 2px ; ) 80% ( stroke-dasharray: 7px 100px ; stroke-width: 10px ) 100% ( stroke-dasharray: 7px 2px ; ) )

Cu aceste exemple, am vrut să arăt că a crea o diagramă frumoasă și, cel mai important, atrăgătoare este foarte simplă. Trebuie doar să cunoști cel puțin elementele de bază ale animației CSS3. Puteți citi despre acest lucru la linkul de mai jos.