O modalitate ușoară de a crea grafice folosind codul, de exemplu, utilizând biblioteca completă de grafice din CodeCanyon.
Dar dacă doriți să știți ce aveți nevoie pentru a crea o astfel de bibliotecă, această lecție este pentru dvs.
Ce este o diagramă liniară?
Diagramele linii sunt un instrument foarte util care este folosit pentru a reprezenta date numerice. Din rapoartele financiare în prezentări PowerPoint la infografice, diagramele de linii sunt folosite pentru a afișa date numerice ușor de înțeles.
Graficele grafice reprezintă bare de utilizare a datelor numerice care sunt dreptunghiulare sau cu lățimea sau înălțimea lor, proporționale cu datele numerice pe care le furnizează.
Există multe tipuri de grafice liniare:
- grafică orizontală și verticală, în funcție de orientare
- histograme pliate sau grafice clasice pentru reprezentarea unei serii multiple de date
- histograma 2B sau 3D
- alte
Care sunt componentele histogramelor?
Să ne uităm la componentele care alcătuiesc histograma, indiferent de tipul acesteia:
Vom face totul foarte simplu și vom adăuga următorul cod în index.html:
Adăugați următorul cod în fișierul script.js.
Aceasta oferă o referință la element și apoi determină lățimea și înălțimea de 300 de pixeli. Pentru a desena pe pagină, trebuie să ne referim doar la contextul 2D, care conține toate metodele de desen.
Adăugăm câteva funcții auxiliare
Desenarea unei histograme necesită doar cunoașterea modului de desenare a două elemente:
- Desenarea unei linii: pentru desenarea liniilor într-o rețea
- desenarea unui dreptunghi de culoare: pentru a desena o histogramă
Creați o funcție auxiliară pentru aceste două elemente. Vom adăuga funcția în fișierul script.js.
Funcția drawLine oferă șase parametri:
- CTX. se referă la contextul desenat
- startx. coordonarea X a punctului de pornire al liniei
- starty. coordonați Y cu punctul de plecare al liniei
- endX. X coordonează punctul final al liniei
- Endy. Coordonată Y a punctului final al liniei
- culoare. line culoare
Modificăm setările de culoare pentru strokeStyle. Aceasta va determina culorile care vor fi folosite în desenul liniei. Utilizăm ctx.save () și ctx.restore (). așa că nu vom atinge culorile folosite în afara acestei funcții.
Vom desena o linie numită beginPath (). Aceasta va informa contextul desenat că am început să desenez ceva nou pe pagină. Utilizăm moveTo () pentru a selecta punctul de pornire, numit lineTo () pentru a specifica punctul de sfârșit și apoi a face desenul real numit cursa ().
O altă funcție suplimentară este necesară pentru desenarea unei diagrame, care este un dreptunghi colorat. Adăugați-l la script.js:
Funcția drawBar oferă șase parametri:
- ctx: se referă la contextul desenat
- upperLeftCornerX. Coordonata X a diagramei din colțul din stânga sus
- upperLeftCornerY. Coordonata X a diagramei din colțul din stânga sus
- lățime. diagrama lățime
- înălțime: înălțimea graficului
- culoare: culoarea diagramei
Model de informație al histogramei
- Muzica clasică: 10
- Stâncă alternativă: 14
- Pop: 2
- Jazz: 12
Implementăm componenta histogramei
Clasele de pornire au fost salvate în setări ca parametri. Aceasta salvează pânza și creează un context desenat și o salvează ca o clasă membră. Apoi stochează culorile matricei ca opțiuni.
Următoarea parte este cea mai consistentă funcție a tragerii (). Aceasta desenează diagrama prin primul desen al liniei de rețea, a marcatorilor de rețea și apoi a barelor care utilizează parametrii care au trecut prin obiectul opțiunilor.
Privind la tragerea funcției (). putem observa că mai întâi calculam valoarea maximă pentru întregul model numeric. Avem nevoie de acest număr pentru a determina mărimea diagramei și din acest număr dimensiunea panzei va fi respinsă. În caz contrar, diagrama noastră ar putea depăși zona de afișare și nu vrem acest lucru.
Variabilele canvasActualHeight și canvasActualWidth stochează valorile înălțimii și lățimii folosind valorile indentate trecute la setări. Plăcuța variabilă specifică numărul de pixeli dintre pagină și marginea graficului din interior.
Apoi tragem liniile de grilă ale diagramei. Variabila options.gridScale specifică etapa utilizată pentru desenarea liniilor. Astfel, o valoare de 10 pentru gridScale va însemna tragerea liniilor de rețea la fiecare 10 unități.
Pentru a desena o linie de grilă, folosim funcția heller drawLine (); În ceea ce privește culoarea liniilor de rețea, o luăm din variabila options.gridColor. Rețineți că panza provine de la 0,0 în colțul din stânga sus și merge spre dreapta și în jos, în timp ce valoarea rețelei noastre crește de jos în sus. De aceea am folosit 1 - gridValue / maxValue în calculul formulei pentru valoarea gridY.
Pentru fiecare linie de grilă, tragem de asemenea o linie de 2 pixeli deasupra liniei (de aceea avem gridY - 2 pentru coordonatele Y din text).
Utilizați componenta histogramă
Să vedem acum modul în care utilizarea clasei Barchart este implementată mai jos. Trebuie să identificăm clasa și să apelăm funcția draw (). adăugați următorul cod script.js.
Codul creează o instanță a clasei Barchart cu opțiunile necesare. Descărcați index.html în browser pentru a obține un rezultat ca acesta:
Adăugați un nume de date seriale și o descriere a graficului
Pentru a adăuga un nume de date seriale, trebuie să adăugăm următorul cod în fișierul script.js după for-loop. care desenează o diagramă:
De asemenea, trebuie să schimbăm modul de a apela componenta Barchart așa cum este descris mai jos:
Rezultatul nostru arată astfel:
Pentru a adăuga o descriere, trebuie să modificăm index.html. astfel încât să pară următoarele:
Rezultatul final în browser:
Felicitări
Dacă doriți o soluție rapidă și simplă pentru crearea nu numai a histogramelor, ci și pentru încărcarea altor tipuri de diagrame, puteți descărca Biblioteca de diagrame Infograme și Grafică HTML sau WordPress Visual Designer plug-in pentru Wordpress.
Trimiteți-le prietenilor: