Interaktive diagrammer med JavaScript og Highcharts

Highcharts er et bibliotek skrevet i HTML5 og rent Javascript:

La oss se hvordan det fungerer, hvordan det er strukturert og hvordan vi implementerer det på nettstedet vårt.
Katalogstruktur
Først laster vi ned zip -filen som inneholder biblioteket vårt, vi pakker det ut, og vi kan se filkatalogen vår og hvordan den er strukturert.

La oss se hva hver katalog inneholder og hva den brukes til:

• index.html: Dette er HTML -testsiden, med denne kan du lage tester og se standardalternativene.
• eksempler: Denne mappen inneholder all kildekoden for eksemplene.
• grafikk: Denne mappen inneholder bildene som brukes i eksemplene.
• eksporterende server: Dette er en katalog som inneholder funksjonen på serversiden for å eksportere grafikken til et bilde.
• js: Dette er den viktigste Highcharts -katalogen. Hver Javascript -fil har to suffikser, den første .src.js er den som inneholder kildekoden med kommentarer i den, og den andre .js er den minimerte versjonen av den.
• adaptere: Her er pluginene for å kunne bruke Mootools eller Prototype som rammer, i denne katalogen er følgende:

• exporting.js: denne filen gir oss funksjoner for eksport og utskrift.

• temaer: Denne mappen inneholder en serie forhåndsbygde Javascript-filer med innstillinger som bakgrunnsfarge, stiler, blant andre. Vi kan laste inn en av disse filene i grafikken for forskjellige stiler.

Når vi ser hvordan dette biblioteket fungerer og hvordan det er organisert, la oss gå videre til et praktisk eksempel på hvordan det skal implementeres Highcharts på nettstedet vårt.

Først inkluderer vi bibliotekene til Highcharts, samt bibliotekene til jQuery for ekstra funksjonalitet:

 Highcharts første eksempel 

Kurvediagrammet er definert i spesifikasjonen til objektet som inneholder alle egenskapene og dataseriene.

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

Når dette objektet er opprettet, vises grafikken i nettleseren, i dette objektet er det en rekke alternativer som vi vil forklare nedenfor.
Instruksjonen renderTo ber Highcharts om å vise et diagram i HTML, spesielt imed id = "beholder". Valget type definerer typen graf, alternativene kan være: område, linje, spline, etc. I dette eksemplet vil vi bruke spline.

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

Etterfulgt av dette setter vi en tittel og en undertekst, som vil vises øverst i grafen.

 tittel: {text: 'Web browsers …'}, undertittel: {text: 'From 2008 to present'}, 

I alternativet for kategoriene i eiendommen til xAksis inneholder en matrise med etikettene for hver datainføring og med tickIntervals Vi skiller måten disse etikettene skrives ut.

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

Alternativene på eiendommen yAxis De lar oss tilordne tittelen på den aksen og angi minimums- og maksimumsverdien der vi vil begrense grafen vår.

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

Eiendommen til plotOptions Det er hvem som kontrollerer hvordan hver dataserie skal vises avhengig av graftype.

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

Serieegenskapen er sentrum for hele konfigurasjonsobjektet som definerer dataene som skal mate 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, …] }, { 

Nå med alle delene av koden forklart, la oss se hvordan det ville se ut i nettleseren vår.

Til slutt forlater jeg hele koden slik at du kan teste den selv og uten å glemme at den kan tilpasses for å tilpasse den til ethvert behov.

 Highcharts første eksempel

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng