Interaktiva diagram med JavaScript och Highcharts

Highcharts är ett bibliotek skrivet i HTML5 och ren Javascript:

Låt oss se hur det fungerar, hur det är uppbyggt och hur man implementerar det på vår webbplats.
Katalogstruktur
Först laddar vi ner zip -filen som innehåller vårt bibliotek, vi packar upp den och vi kan se vår filkatalog och hur den är uppbyggd.

Låt oss se vad varje katalog innehåller och vad den används till:

• index.html: Detta är HTML -testsidan, med detta kan du göra tester och visa standardalternativen.
• exempel: Den här mappen innehåller all källkod för exemplen.
• grafik: Den här mappen innehåller bilderna som används i exemplen.
• export-server: Detta är en katalog som innehåller funktionen på serversidan för att exportera grafiken till en bild.
• js: Detta är den viktigaste Highcharts -katalogen. Varje Javascript -fil har två suffix, den första .src.js är den som innehåller källkoden med kommentarer i den och den andra .js är den minimerade versionen av den.
• adaptrar: Här är insticksprogrammen för att kunna använda Mootools eller Prototyp som ramar finns följande i den här katalogen:

• exporting.js: den här filen ger oss funktioner för att exportera och skriva ut.

• teman: Den här mappen innehåller en serie förbyggda Javascript-filer med inställningar som bakgrundsfärg, stilar, bland annat. Vi kan ladda en av dessa filer i grafiken för olika stilar.

Se hur det här biblioteket fungerar och hur det är organiserat, låt oss gå vidare till ett praktiskt exempel på hur man implementerar det Highcharts på vår webbplats.

Först inkluderar vi biblioteken för Highcharts, liksom biblioteken för jQuery för extra funktionalitet:

 Highcharts första exempel 

Kurvdiagrammet definieras i specifikationen för objektet som innehåller alla egenskaper och dataserier.

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

När detta objekt har skapats visas grafiken i webbläsaren, inom detta objekt finns det en rad alternativ som vi kommer att förklara nedan.
Instruktionen renderTo uppmanar Highcharts att visa ett diagram i HTML, särskilt imed id = "behållare". Alternativet typ definierar graftypen, alternativen kan vara: område, linje, spline, etc. I det här exemplet kommer vi att använda spline.

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

Följt av detta sätter vi en titel och en undertext, som kommer att visas högst upp i grafen.

 titel: {text: 'Webbläsare …'}, undertext: {text: 'Från 2008 till nu'}, 

I valet av kategorierna i egenskapen till xAxis innehåller en array med etiketterna för varje datainmatning och med tickIntervals Vi separerar hur dessa etiketter skrivs ut.

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

Alternativen på fastigheten yAxis De tillåter oss att tilldela titeln på den axeln och ställa in lägsta och högsta värde i vilket vi kommer att begränsa vårt diagram.

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

Fastigheten till plotOptions Det är den som styr hur varje dataserie ska visas beroende på diagramtyp.

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

Serieegenskapen är centrum för hela konfigurationsobjektet som definierar data som ska mata diagrammet.

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

Nu med alla delar av koden förklarad, låt oss se hur det skulle se ut i vår webbläsare.

Slutligen lämnar jag hela koden så att du kan testa den själv och utan att glömma att den kan anpassas för att anpassa den till alla behov.

 Highcharts första exempel

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng