✅ Diagramele interactive cu JavaScript și Highcharts

Cuprins

Highcharts este o bibliotecă scrisă în HTML5 și Javascript pur:

Să vedem cum funcționează, cum este structurat și cum să-l implementăm pe site-ul nostru web.
Structura directorului
Mai întâi descărcăm fișierul zip care conține biblioteca noastră, îl dezarhivăm și putem vedea directorul nostru de fișiere și cum este structurat.

Să vedem ce conține fiecare director și pentru ce este folosit:

index.html: Aceasta este pagina de test HTML, cu aceasta puteți face teste și vizualiza opțiunile implicite.
exemple: Acest folder conține tot codul sursă pentru exemple.
grafică: Acest folder conține imaginile utilizate în exemple.
server-exportator: Acesta este un director care conține funcția de server pentru a exporta grafica către o imagine.
js: Acesta este directorul principal Highcharts. Fiecare fișier Javascript are două sufixe, primul .src.js este cel care conține codul sursă cu comentarii și celălalt .js este versiunea minimizată a acestuia.
adaptoare: Iată pluginurile de utilizat Mootools sau Prototip ca cadre, în acest director se află următoarele:

exportând.js: acest fișier ne oferă funcții de export și imprimare.

teme: Acest folder conține o serie de fișiere Javascript pre-construite cu setări precum culoarea fundalului, stiluri, printre altele. Putem încărca unul dintre aceste fișiere în grafică pentru diferite stiluri.

Văzând cum funcționează această bibliotecă și cum este organizată, să trecem la un exemplu practic despre cum să implementăm Highcharts pe site-ul nostru.

Mai întâi includem bibliotecile din Highcharts, precum și bibliotecile din jQuery pentru funcționalitate suplimentară:

 Highcharts Primul exemplu

Diagrama curbei este definită în specificația obiectului care conține toate proprietățile și seria de date.

 var chart = new Highcharts.Chart ({diagramă: {…}, titlu: „…” …});

Odată creat acest obiect, grafica este afișată în browser, în cadrul acestui obiect există o serie de opțiuni pe care le vom explica mai jos.
Instrucțiunea renderTo spune Highcharts să afișeze o diagramă în HTML, în special încu id = "container". Optiunea tip definește tipul de grafic, opțiunile pot fi: zonă, linie, spline etc. În acest exemplu vom folosi splina.

 diagramă: {renderTo: 'container', tastați: 'spline'}

Urmată de aceasta, stabilim un titlu și un subtitlu, care vor apărea în partea de sus a graficului.

 title: {text: 'Browsere web …'}, subtitrare: {text: 'Din 2008 până în prezent'},

În opțiunea categoriilor din proprietatea xAxis conține o matrice cu etichetele fiecărei intrări de date și cu bifați Intervale Separăm felul în care sunt imprimate aceste etichete.

 xAxis: {categories: [„Jan 2008”, „Feb”,…. ], bifați Interval: 3},

Opțiunile de pe proprietate yAxis Acestea ne permit să atribuim titlul acelei axe și să setăm valoarea minimă și maximă în care ne vom limita graficul.

 yAxis: {title: {text: 'Procentaj%'}, min: 0},

Proprietatea plotOptions Acesta controlează modul în care fiecare serie de date va fi afișată în funcție de tipul graficului.

 plotOptions: {series: {lineWidth: 2}},

Proprietatea seriei este centrul întregului obiect de configurare care definește datele care vor alimenta graficul.

 serie: [{nume: „Internet Explorer”, date: [54.7, 54.7, 53.9, 54.8, 54.4, …]}, {nume: „FireFox”, date: [36.4, 36.5, 37.0, 39.1, 39.8, …] }, {

Acum, cu toate părțile codului explicate, să vedem cum ar arăta în browserul nostru.

În cele din urmă las codul complet, astfel încât să îl puteți testa pentru dvs. și fără a uita că poate fi personalizat pentru a-l adapta la orice nevoie.