✅ Interaktyvios diagramos su „JavaScript“ ir „Highcharts“

Turinys

Aukščiausios diagramos yra biblioteka, parašyta HTML5 ir grynu „JavaScript“:

Pažiūrėkime, kaip tai veikia, kaip ji sukurta ir kaip ją įgyvendinti mūsų svetainėje.
Katalogo struktūra
Pirmiausia atsisiunčiame ZIP failą, kuriame yra mūsų biblioteka, išpakuojame ir galime pamatyti savo failų katalogą ir jo struktūrą.

Pažiūrėkime, kas yra kiekviename kataloge ir kam jis naudojamas:

index.html: Tai yra HTML bandymo puslapis, kuriame galite atlikti bandymus ir peržiūrėti numatytas parinktis.
pavyzdžių: Šiame aplanke yra visas pavyzdžių šaltinio kodas.
grafika: Šiame aplanke yra pavyzdžiuose naudojami vaizdai.
eksportuojantis serveris: Tai katalogas, kuriame yra serverio pusės funkcija grafikai eksportuoti į vaizdą.
js: Tai yra pagrindinis „Highcharts“ katalogas. Kiekvienas „Javascript“ failas turi dvi priesagas. Pirmasis .src.js yra tas, kuriame yra šaltinio kodas su komentarais, o kitas .js yra sumažinta jo versija.
adapteriai: Čia yra papildiniai, kuriuos galima naudoti Mootools arba Prototipas kaip rėmai, šiame kataloge yra toks:

exporting.js: šis failas suteikia mums eksporto ir spausdinimo funkcijas.

temomis: Šiame aplanke yra iš anksto sukurtų „Javascript“ failų serija su nustatymais, pvz., Fono spalva, stiliais. Vieną iš šių failų galime įkelti į skirtingų stilių grafiką.

Matydami, kaip ši biblioteka veikia ir kaip ji organizuojama, pereikime prie praktinio įgyvendinimo pavyzdžio Aukščiausios diagramos mūsų svetainėje.

Pirmiausia įtraukiame Aukščiausios diagramos, taip pat bibliotekos „jQuery“ papildomam funkcionalumui:

 Highcharts pirmasis pavyzdys

Kreivių diagrama apibrėžta objekto, kuriame yra visos savybės ir duomenų eilutės, specifikacijoje.

 var diagrama = nauja „Highcharts.Chart“ ({diagrama: {…}, pavadinimas: „…“…});

Sukūrus šį objektą, grafika rodoma naršyklėje, šiame objekte yra keletas variantų, kuriuos paaiškinsime toliau.
Instrukcija renderTo nurodo „Highcharts“ rodyti diagramą HTML, konkrečiaisu id = "konteineris". Variantas tipo apibrėžia grafiko tipą, parinktys gali būti: plotas, linija, spline ir kt. Šiame pavyzdyje mes naudosime spline.

 diagrama: {renderTo: 'container', type: 'spline'}

Po to mes nustatome pavadinimą ir subtitrus, kurie bus rodomi diagramos viršuje.

 title: {text: 'Interneto naršyklės …'}, paantraštė: {text: 'Nuo 2008 m. iki dabar'},

Į nuosavybės kategorijų variantą xAšis yra masyvas su kiekvieno duomenų įvedimo etiketėmis ir su tickTarpai Mes atskiriame šių etikečių spausdinimo būdą.

 xAxis: {kategorijos: ['2008 m. sausis', 'vasaris',…. ], tickInterval: 3},

Turto parinktys yAšis Jie leidžia mums priskirti tos ašies pavadinimą ir nustatyti mažiausią ir didžiausią vertę, kuria apribosime savo grafiką.

 yAksis: {title: {text: 'Procentas%'}, min: 0},

Turtas plotOptions Jis kontroliuoja, kaip bus rodomos kiekvienos duomenų serijos, atsižvelgiant į diagramos tipą.

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

Serijos ypatybė yra viso konfigūracijos objekto centras, kuris apibrėžia duomenis, kurie pateiks diagramą.

 serija: [{pavadinimas: „Internet Explorer“, duomenys: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {pavadinimas: „FireFox“, duomenys: [36,4, 36,5, 37,0, 39,1, 39,8,…] }, {

Dabar, paaiškinus visas kodo dalis, pažiūrėkime, kaip jis atrodytų mūsų naršyklėje.