Interaktivni grafikoni s JavaScript -om i Highcharts -ovima

Highcharts je knjižnica napisana u HTML5 i čistom Javascriptu:

Pogledajmo kako to funkcionira, kako je strukturirano i kako to primijeniti na našoj web stranici.
Struktura imenika
Prvo preuzimamo zip koji sadrži našu biblioteku, raspakiramo ga i možemo vidjeti naš direktorij datoteka i njegovu strukturu.

Pogledajmo što svaki direktorij sadrži i za što se koristi:

• index.html: Ovo je HTML stranica za testiranje, pomoću koje možete napraviti testove i pregledati zadane opcije.
• primjere: Ova mapa sadrži sav izvorni kod za primjere.
• grafika: Ova mapa sadrži slike korištene u primjerima.
• server-izvoznik: Ovo je direktorij koji sadrži funkciju na poslužitelju za izvoz grafike u sliku.
• js: Ovo je glavni direktorij Highcharts. Svaka Javascript datoteka ima dva sufiksa, prvi .src.js je onaj koji sadrži izvorni kod s komentarima, a drugi .js je njegova minimizirana verzija.
• adapteri: Evo dodataka koje možete koristiti Mootools ili Prototip Kao okviri, unutar ovog direktorija nalazi se sljedeće:

• export.js: ova nam datoteka daje funkcije za izvoz i ispis.

• teme: Ova mapa sadrži niz unaprijed izgrađenih Javascript datoteka s postavkama kao što su boja pozadine, stilovi, između ostalog. Možemo učitati jednu od ovih datoteka u grafiku za različite stilove.

Vidjevši kako ova knjižnica funkcionira i kako je organizirana, prijeđimo na praktičan primjer kako je implementirati Highcharts na našoj web stranici.

Prvo uključujemo knjižnice Highcharts, kao i knjižnice jQuery za dodatnu funkcionalnost:

 Highcharts prvi primjer 

Krivuljasti grafikon definiran je u specifikaciji objekta koja sadrži sva svojstva i niz podataka.

 var chart = novi Highcharts.Chart ({grafikon: {…}, naslov: '…' …}); 

Nakon što se ovaj objekt stvori, grafika se prikazuje u pregledniku, unutar tog objekta postoji niz opcija koje ćemo objasniti u nastavku.
Uputa renderTo govori Highchartsu da prikaže grafikon u HTML -u, točnije usa id = "spremnik". Opcija tip definira vrstu grafikona, opcije mogu biti: područje, linija, spline itd. U ovom primjeru koristit ćemo se spline.

 grafikon: {renderTo: 'container', tip: 'spline'} 

Nakon toga postavljamo naslov i podnaslov koji će se pojaviti pri vrhu grafikona.

 naslov: {tekst: 'Web preglednici …'}, podnaslov: {tekst: 'Od 2008. do danas'}, 

U mogućnosti kategorija u vlasništvu osa sadrži niz s oznakama svakog unosa podataka i sa tickIntervali Odvajamo način na koji se ove naljepnice ispisuju.

 xOsa: {kategorije: ['siječanj 2008', 'veljača',…. ], tickInterval: 3}, 

Opcije na imanju yOsovina Omogućuju nam da dodijelimo naslov te osi i postavimo minimalnu i maksimalnu vrijednost u kojoj ćemo ograničiti naš grafikon.

 yOsa: {naslov: {tekst: 'Postotak%'}, min: 0}, 

Vlasništvo od plotOpcije On određuje kako će se svaki niz podataka prikazivati ​​ovisno o vrsti grafikona.

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

Svojstvo serije središte je cijelog konfiguracijskog objekta koji definira podatke koji će unositi grafikon.

 serija: [{name: 'Internet Explorer', podaci: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {name: 'FireFox', podaci: [36.4, 36.5, 37.0, 39.1, 39.8,…] }, { 

Sada kad su svi dijelovi koda objašnjeni, pogledajmo kako bi to izgledalo u našem pregledniku.

Na kraju ostavljam cijeli kôd kako biste ga sami testirali i ne zaboravivši da se može prilagoditi tako da ga prilagodi bilo kojoj potrebi.

 Highcharts prvi primjer

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod