✅ Interaktīvas diagrammas ar JavaScript un Highcharts

Satura rādītājs

Augstākās diagrammas ir bibliotēka, kas rakstīta HTML5 un tīrā Javascript:

Apskatīsim, kā tas darbojas, kā tas ir strukturēts un kā to ieviest mūsu vietnē.
Direktorija struktūra
Vispirms mēs lejupielādējam ZIP, kurā ir mūsu bibliotēka, mēs to izpakojam un varam redzēt mūsu failu direktoriju un tā struktūru.

Apskatīsim, ko katrs direktorijs satur un kādam nolūkam tas tiek izmantots:

index.html: Šī ir HTML testa lapa, ar kuras palīdzību jūs varat veikt testus un skatīt noklusējuma opcijas.
piemēri: Šajā mapē ir viss piemēru avota kods.
grafika: Šajā mapē ir attēlos izmantotie attēli.
eksportētājs-serveris: Šis ir direktorijs, kurā ir servera puses funkcija grafikas eksportēšanai uz attēlu.
js: Šis ir galvenais Highcharts direktorijs. Katram Javascript failam ir divi sufiksi: pirmais .src.js ir tas, kurš satur avota kodu ar komentāriem, bet otrs .js ir tā minimizētā versija.
adapteri: Šeit ir spraudņi, kurus var izmantot Mootools vai Prototips kā ietvari šajā direktorijā ir šāds:

exporting.js: šis fails dod mums funkcijas eksportēšanai un drukāšanai.

tēmas: Šajā mapē ir virkne iepriekš izveidotu Javascript failu ar tādiem iestatījumiem kā fona krāsa, stili. Mēs varam ielādēt vienu no šiem failiem dažādu stilu grafikā.

Redzot, kā šī bibliotēka darbojas un kā tā ir organizēta, pāriesim pie praktiska piemēra, kā to ieviest Augstākās diagrammas mūsu mājas lapā.

Vispirms mēs iekļaujam bibliotēkas Augstākās diagrammas, kā arī bibliotēkas jQuery papildu funkcionalitātei:

 Highcharts pirmais piemērs

Līknes diagramma ir definēta objekta specifikācijā, kurā ir visi rekvizīti un datu sērijas.

 var diagramma = jauna Highcharts.Chart ({diagramma: {…}, nosaukums: '…'…});

Kad šis objekts ir izveidots, grafika tiek parādīta pārlūkprogrammā, šajā objektā ir vairākas iespējas, kuras mēs izskaidrosim tālāk.
Instrukcija renderTo norāda Highcharts parādīt diagrammu HTML, īpašiAr id = "konteiners". Iespēja tipa definē diagrammas veidu, iespējas var būt: apgabals, līnija, spline utt. Šajā piemērā mēs izmantosim spline.

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

Pēc tam mēs iestatām nosaukumu un apakšvirsrakstu, kas parādīsies diagrammas augšdaļā.

 title: {text: 'Tīmekļa pārlūkprogrammas …'}, apakšvirsraksts: {text: 'No 2008. gada līdz šim brīdim'},

Kategoriju opcijā īpašumā xAxis satur masīvu ar katra datu ievades etiķetēm un ar tickIntervals Mēs nošķiram šo etiķešu drukāšanas veidu.

 xAxis: {kategorijas: ['Jan 2008', 'Feb',…. ], atzīmējiet intervālu: 3},

Īpašuma iespējas yAxis Tie ļauj mums piešķirt šīs ass nosaukumu un noteikt minimālo un maksimālo vērtību, kādā mēs ierobežosim savu grafiku.

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

Īpašums plotOptions Tas ir tas, kurš kontrolē, kā katra datu sērija tiks parādīta atkarībā no diagrammas veida.

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

Sērijas rekvizīts ir visa konfigurācijas objekta centrs, kas nosaka datus, kas tiks izmantoti diagrammai.

 sērija: [{nosaukums: 'Internet Explorer', dati: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {nosaukums: 'FireFox', dati: [36,4, 36,5, 37,0, 39,1, 39,8,…] }, {

Tagad, izskaidrojot visas koda daļas, redzēsim, kā tas izskatīsies mūsu pārlūkprogrammā.