Interaktive diagrammer med JavaScript og highcharts

Highcharts er et bibliotek skrevet i HTML5 og ren Javascript:

Lad os se, hvordan det fungerer, hvordan det er struktureret og hvordan man implementerer det på vores websted.
Katalogstruktur
Først downloader vi zip -filen, der indeholder vores bibliotek, vi pakker det ud, og vi kan se vores filmappe og hvordan det er opbygget.

Lad os se, hvad hver mappe indeholder, og hvad den bruges til:

• index.html: Dette er HTML -testsiden, med denne kan du lave tests og se standardindstillingerne.
• eksempler: Denne mappe indeholder alle kildekoden til eksemplerne.
• grafik: Denne mappe indeholder de billeder, der bruges i eksemplerne.
• eksporterende server: Dette er et bibliotek, der indeholder server-funktionen til at eksportere grafikken til et billede.
• js: Dette er det vigtigste highcharts -bibliotek. Hver Javascript -fil har to endelser, den første .src.js er den, der indeholder kildekoden med kommentarer i den, og den anden .js er den minimerede version af den.
• adaptere: Her er de plugins, der skal bruges Mootools eller Prototype som rammer er følgende i denne mappe:

• eksporterer.js: denne fil giver os funktioner til eksport og udskrivning.

• temaer: Denne mappe indeholder en række forudbyggede Javascript-filer med indstillinger som baggrundsfarve, stilarter, blandt andre. Vi kan indlæse en af ​​disse filer i grafikken for forskellige stilarter.

Når vi ser, hvordan dette bibliotek fungerer, og hvordan det er organiseret, lad os gå videre til et praktisk eksempel på, hvordan det skal implementeres Highcharts på vores hjemmeside.

Først inkluderer vi bibliotekerne i Highcharts, samt bibliotekerne i jQuery for ekstra funktionalitet:

 Highcharts første eksempel 

Kurvediagrammet er defineret i specifikationen af ​​objektet, der indeholder alle egenskaberne og dataserierne.

 var chart = new Highcharts.Chart ({chart: {…}, title: '…'…}); 

Når dette objekt er oprettet, vises grafikken i browseren, inden for dette objekt er der en række muligheder, som vi vil forklare nedenfor.
Instruktionen renderTo fortæller Highcharts at vise et diagram i HTML, specifikt imed id = "container". Muligheden type definerer graftypen, kan valgmulighederne være: område, linje, spline osv. I dette eksempel vil vi bruge spline.

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

Efterfulgt af dette sætter vi en titel og en undertekst, som vises øverst i grafen.

 title: {text: 'Web browsers …'}, subtitle: {text: 'From 2008 to present'}, 

I muligheden for kategorierne i ejendommen til xAxis indeholder en matrix med etiketterne for hver dataindtastning og med tickIntervaller Vi adskiller den måde, disse etiketter udskrives på.

 xAxis: {kategorier: ['Jan 2008', 'Feb',…. ], tickInterval: 3}, 

Mulighederne på ejendommen yAxis De giver os mulighed for at tildele titlen på denne akse og indstille minimums- og maksimumværdien, hvor vi vil begrænse vores graf.

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

Ejendommen til plotOptions Det er den, der styrer, hvordan hver dataserie vises, afhængigt af graftypen.

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

Serieegenskaben er centrum for hele konfigurationsobjektet, der definerer de data, der skal fodre grafen.

 serier: [{navn: 'Internet Explorer', data: [54.7, 54.7, 53.9, 54.8, 54.4, …]}, {navn: 'FireFox', data: [36.4, 36.5, 37.0, 39.1, 39.8, …] }, { 

Nu med alle dele af koden forklaret, lad os se, hvordan det ville se ud i vores browser.

Endelig forlader jeg den komplette kode, så du kan teste den selv og uden at glemme, at den kan tilpasses til at tilpasse den til ethvert behov.

 Highcharts første eksempel

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt