Highcharts scurt ghid

caracteristici

Mai jos sunt caracteristicile Highcharts de bibliotecă.

Compatibilitate - Funcționează seemlessly toate browserele importante și platforme mobile. cum ar fi Android și iOS.

Libertatea de a folosi - open source și libertatea de a utiliza în scopuri necomerciale.

Ușoare - highcharts.js bibliotecă de bază cu o dimensiune de aproximativ 35KB, bibliotecă foarte ușoare.

configurare simplă - Folosește JSON. pentru a defini diferite diagrame de configurare și foarte ușor de învățat și de utilizat.

Dinamic - Permite schimba chiar și după generație diagrama de program.

Mai multe axe - fără a se limita la x, axa y. Sprijinirea graficele cu mai multe axe.

Bule - Configurabil tooltip vine. atunci când un utilizator plasează cursorul cursorul în orice punct de pe grafic. Highcharts oferă built-in formatorului tooltip sau software-ul de management tooltip formatorului de apel invers.

diagrame Export în format PDF / PNG / JPG / SVG prin implementarea funcției de export - export.

Imprimare - Imprimați diagrama folosind un web - pagina.

Date externe - sprijină încărcarea dinamică a datelor de pe server. Acesta oferă un control asupra datelor utilizând funcția de apel invers.

Rotația Text - Suporta rotirea etichetelor în orice direcție.

tipuri de diagrame acceptate

Biblioteca Highcharts oferă următoarele tipuri de diagrame:

În următoarele capitole, vom discuta despre fiecare tip de topuri de mai sus, în detaliu, cu exemple.

Highcharts este open source și este liber să utilizeze în scopuri necomerciale. Comanda. Highcharts de a utiliza în proiecte comerciale, du-te la: Licență și Prețuri

În acest capitol vom vorbi despre cum să configurați biblioteca Highcharts pentru utilizare în dezvoltarea de aplicații web.

Highcharts necesită Jquery ca dependență. Deci, în primul rând am stabilit biblioteca Jquery și apoi biblioteca HighChart.

Set JQuery

Există două moduri de a folosi JQuery.

Descarca: Descarcă-l de la jQuery.COM la nivel local și să o folosească.

acces CDN: De asemenea, aveți acces la CDN. CDN vă va oferi acces la nivel mondial la centrele de date regionale, în circumstanțele date, Google va găzdui. Acest lucru înseamnă că, cu ajutorul CDN se mută responsabilitatea de a găzdui fișierele de serverele proprii la o serie de externe. De asemenea, are avantajul că în cazul în care un vizitator pagină web a descărcat deja o copie a aceluiași JQuery CDN, acesta nu ar trebui să fie descărcate din nou.

Utilizarea JQuery Descărcări

Folosind un CDN

Noi folosim versiunea bibliotecii CDN JQuery în acest tutorial.

Set Highcharts

Există două moduri de a folosi Highcharts.

Descarca: Descarcă-l de la Highcharts.COM la nivel local și să o folosească.

acces CDN: De asemenea, aveți acces la CDN. CDN vă va oferi acces la nivel mondial de centre de date regionale, că, în acest caz, proprietarul Highcharts Code.Highcharts.Com.

Utilizarea Highcharts descărcate

Folosind un CDN

Noi folosim versiunea CDN Highcharts bibliotecă în acest tutorial.

În acest capitol, vom demonstra comfiguration necesară pentru a desena o diagramă folosind API-ul Highcharts.

Pasul 1: Crearea HTML-pagini

DIV trase Zdeskonteyner utilizat pentru a stoca diagramă folosind biblioteca Highcharts.

Pasul 2: Crearea unei configurații

Biblioteca Highcharts folosește o configurație foarte simplu, folosind sintaxa JSON.

Există un format de date JSON JSON și configurații pe care biblioteca le utilizează pentru a desena pachete diagramă HighChart DIV containere, folosind metoda (Highcharts). Acum vom stabili o varietate de opțiuni pentru a crea un șir JSON dorit.

Ajustați titlul diagramei.

subpoziția

Setarea graficul de subtitrare.

Ajustați widget pentru afișarea pe axa X.

Setarea antetului, linie de subiect care va apărea pe axa Y.

Setarea unui tooltip. Pune sufixul trebuie adăugate după valoarea (axa y).

Setarea legenda, care este afișat pe partea dreaptă a diagramei, împreună cu alte proprietăți.

Personalizați datele care vor fi afișate pe grafic. Seria este o matrice în cazul în care fiecare element de matrice este o singură linie pe grafic.

Pasul 3: Construirea unei date JSON

Se combină toate configurațiile.

Etapa 4: Desenați o diagramă

Ceea ce urmează este un exemplu complet:

diagrame linie folosite pentru a desena diagrame bazate pe linie / spline. În această secțiune vom discuta următoarele tipuri de linii și spline pe baza diagramelor.

Grafic Tip / Descriere