Adăugarea de diagrame la site-ul dvs. cu Highcharts

Toată lumea se ocupă de date și de foarte multe ori este prezentată în tabele de date mari. Reprezentarea și citirea prin tabele lungi pe un site web poate fi foarte greoaie. Graficele sunt bune pentru a permite oamenilor să înțeleagă schimbarea și tendința din spatele datelor. 

Recent, când am încercat să găsesc o modalitate ușoară de a introduce o diagramă interactivă pe un site web, am găsit Highcharts și l-am folosit în diverse proiecte încă de atunci. 

În cadrul acestei serii de articole, vom face un studiu al Highcharts, de ce este minunat și cum îl putem implementa în propriile noastre proiecte web.

Ce este fascinant despre Highcharts?

• E interactiv. Pentru mai multe detalii, puteți să faceți mouse-ul peste un element și să faceți clic pe elementele din legenda graficelor pentru a le activa sau dezactiva. 
• Compatibilitate. Se bazează pe JavaScript, se redă într-un browser web, deci chiar IE 6 sau un iPad vă poate arăta acele grafice frumoase. Highcharts utilizează alte cadre JS, cum ar fi jQuery, MooTools, Prototype sau Highcharts Standalone framework. Ai nevoie de una din biblioteci și highcart.js pentru a crea grafice.
• Multe tipuri de diagrame. Highcharts sprijină linia, splinea, suprafața, zonele, coloanele, barele, plăcile, scatterul, gabaritele unghiulare, arearangele, zoneleplane, coloanele și tipurile de diagramă polară. Vom vedea exemple pentru cele mai frecvent utilizate: coloane, bare, linii și diagrame.
• Hrănitorul Highcharts este ușor. Highcharts pot încărca date din date locale, fișiere locale sau chiar de la un server de la distanță. Poate prelua date analizate din fișiere CSV, JSON, XML sau orice altă bază de date.
• Salvați sau tipăriți diagramele. Una dintre caracteristicile surprinzătoare pe care le-am găsit este că puteți tipări sau exporta harta pe care o vedeți în prezent. Se poate salva o diagramă ca fișier PDF, JPG, PNG sau SVG.
• Ușor de configurat, tuning-ul nu este o problemă. Adăugați câteva linii de cod, iar datele și graficele dvs. vor fi desenate. Cu documentația sa de utilizare bine scrisă și referința API, începătorii nu se vor pierde și dezvoltatorii experimentați sunt bineveniți.
• Licență flexibilă. Utilizarea Highcharts este gratuită pentru site-uri non-comerciale și prețurile sunt flexibile pentru proiectele comerciale.
• Tema-able. În prezent, există patru teme predefinite moderne sau puteți să vă faceți una foarte unică, cu un gust și cunoștințe CSS.

Înainte de a utiliza prima dată Highcharts, să vedem ce tip de diagramă să utilizați în sarcinile obișnuite.

Ce diagramă trebuie utilizată când?

Diagramele de bare și diagramele coloanelor sunt similare într-un mod în care fiecare utilizează dreptunghiuri lungi pentru a compara mai multe valori, însă diferența lor constă în orientarea graficului lor. Diagramele de bare sunt orientate pe orizontală și diagramele coloanelor sunt verticale. 

În exemplul meu simplu, comparăm vânzările unui magazin imaginar prin sursă într-o distribuție lunară (comparând vânzarea fiecărei luni între ele). După cum puteți vedea mai jos, dacă doriți să comparați doar o cantitate mică de date și diagrama de bare se potrivește pe ecranul cu care lucrați în prezent, atunci cel mai bun pariu este să mergeți cu diagrama barei. 

În schimb, ar trebui să utilizați diagramele coloanelor dacă aveți o limitare verticală, cum ar fi ecrane orientate pe peisaj. Consultați comparația de mai jos.

Linii graficereprezintă informații cu seria de puncte de date și linii drepte. Acestea arată schimbări particulare ale datelor la intervale egale de timp. Este adesea folosit pentru a vizualiza tendința într-o serie de timp. 

În exemplul meu, folosesc același tabel de date pe care l-am folosit mai jos pentru a compara mai multe seturi de date. După cum puteți vedea, este ușor să comparăm trendul surselor de vânzări din ultimele luni.

Diagrame circularesunt diagrame circulare împărțite în sectoare în care fiecare sector prezintă dimensiunea relativă a fiecărei valori. Ele sunt utile atunci când doriți să comparați datele care fac parte din întreg. Fiecare felie de plăcintă reprezintă valoarea numerică a sumei. 

În exemplul meu, arată distribuția diferitelor tipuri de surse de vânzări dintr-o anumită perioadă.

Anatomia claselor superioare

Pentru a înțelege următoarele exemple de coduri, trebuie să cunoașteți conceptele de bază care alcătuiesc Highcharts.

Acestea sunt în primul rând părți ale unui grafic:

• Titluafișează numele unei diagrame deasupra
• Subtitrările suntplasat sub titlul
• Seria se referă launa sau mai multe serii de date prezentate pe o diagramă
• Instrumentele suntdescrieri ale unor date particulare afișate prin plasarea pe o parte a unei diagrame
• Legendăafișează numele și / sau simbolul fiecărei serii pe o diagramă. Făcând clic pe numele seriei într-o legendă, se poate activa sau dezactiva seria.
• Imprimați și descărcați să permiteți utilizatorilor să tipărească sau să exporte graficul. 

Adăugarea primei tale diagrame

În acest exemplu, vom importa câteva exemple de date dintr-un fișier CSV, îl vom procesa și vom prezenta datele într-o diagramă a coloanelor dintr-un fișier HTML. 

Să vedem configurația de bază: 

• Trebuie să creați un fișier HTML cu orice nume doriți
• În același director aveți nevoie de un fișier CSV (valori separate prin virgulă)

În exemplul meu, folosesc un fișier text în care valorile sunt separate prin virgulă, iar înregistrările sunt separate de linii noi.

Conținutul coloană-data.csv fișier pe care îl folosim: 

Vânzări după sursă, ianuarie, februarie, martie, aprilie, mai, iunie, iulie Motor de căutare, 60,64,57,61,54,58,61 Ad, 30,39,32,40,37,33,41 Afiliat, 20,18,23,27,19,23,27 Newsletter, 29,22,23,27,19,32,34 Offline / Organic, 50,47,44,40,48,51,53

În HTML cap, trebuie să includem cea mai recentă versiune a jQuery, Highcarts.js, modulul de export opțional și JavaScript personalizat care pregătește și creează graficul nostru. 

În organism, avem nevoie de un container div unde diagrama poate fi desenată.

După cum puteți vedea, primele lucruri pe care trebuie să le setați sunt tipul de diagramă și numele containerului. Apoi am setat titlul, subtitrarea și titlul axei y cu textul nostru personalizat. Conținutul categoriilor pentru axa x și datele din serii sunt procesate și asociate mai târziu după parsarea cu succes a datelor CSV. 

JavaScript-ul nostru a făcut acești pași simpli: 

1. Setați opțiunile
2. Parsează CSV-ul
3. A creat graficul

Este vorba de trei pași simpli pentru o diagramă foarte bună pentru datele noastre.

Urmeaza…

Acesta a fost un articol introductiv despre cum să începeți să utilizați Highcharts. 

În următorul articol, vom continua să ne uităm la bibliotecă și cum o putem folosi pentru a face informații în alte tipuri de diagrame, precum și.