✅ Interactieve grafieken met JavaScript en Highcharts

Inhoudsopgave

Highcharts is een bibliotheek geschreven in HTML5 en puur Javascript:

Laten we eens kijken hoe het werkt, hoe het is gestructureerd en hoe we het op onze website kunnen implementeren.
Directorystructuur
Eerst downloaden we de zip die onze bibliotheek bevat, we unzippen deze en we kunnen onze bestandsdirectory zien en hoe deze is gestructureerd.

Laten we eens kijken wat elke map bevat en waarvoor deze wordt gebruikt:

index.html: Dit is de HTML testpagina, hiermee kun je testen maken en de standaard opties bekijken.
voorbeelden: Deze map bevat alle broncode voor de voorbeelden.
afbeeldingen: Deze map bevat de afbeeldingen die in de voorbeelden worden gebruikt.
export-server: Dit is een map die de server-side-functie bevat om de afbeeldingen naar een afbeelding te exporteren.
js: Dit is de hoofddirectory van Highcharts. Elk Javascript-bestand heeft twee achtervoegsels, de eerste .src.js is die de broncode met opmerkingen erin bevat en de andere .js is de geminimaliseerde versie ervan.
adapters: Dit zijn de plug-ins die u kunt gebruiken Mootools of Voorlopig ontwerp als frameworks, binnen deze map is het volgende:

exporteren.js: dit bestand geeft ons functies om te exporteren en af te drukken.

thema's: Deze map bevat een reeks vooraf gebouwde Javascript-bestanden met instellingen zoals onder andere achtergrondkleur, stijlen. We kunnen een van deze bestanden in de afbeeldingen laden voor verschillende stijlen.

Als we zien hoe deze bibliotheek werkt en hoe deze is georganiseerd, gaan we verder met een praktisch voorbeeld van hoe te implementeren Highcharts op onze website.

Eerst nemen we de bibliotheken van de Highcharts, evenals de bibliotheken van jQuery voor extra functionaliteit:

 Highcharts eerste voorbeeld

Het curvediagram wordt gedefinieerd in de specificatie van het object dat alle eigenschappen en de gegevensreeksen bevat.

 var grafiek = nieuwe Highcharts.Chart ({chart: {…}, titel: '…'…});

Zodra dit object is gemaakt, wordt de afbeelding weergegeven in de browser, binnen dit object zijn er een aantal opties die we hieronder zullen uitleggen.
De instructie renderTo vertelt Highcharts om een grafiek in de HTML weer te geven, met name in demet de id = "container". De optie type definieert het type grafiek, de opties kunnen zijn: oppervlakte, lijn, spline, enz. In dit voorbeeld gebruiken we spline.

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

Hierna stellen we een titel en een ondertitel in, die bovenaan de grafiek zullen verschijnen.

 titel: {tekst: 'Webbrowsers …'}, ondertitel: {tekst: 'Van 2008 tot heden'},

In de optie van de categorieën in de eigenschap van de xAxis bevat een array met de labels van elke gegevensinvoer en met vink Intervallen aan We scheiden de manier waarop deze labels worden bedrukt.

 xAxis: {categorieën: ['Jan 2008', 'Feb',…. ], tikInterval: 3},

De opties op het terrein yAxis Hiermee kunnen we de titel van die as toewijzen en de minimum- en maximumwaarde instellen waarin we onze grafiek zullen beperken.

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

het eigendom van plotOpties Het is wie bepaalt hoe elke gegevensreeks wordt weergegeven, afhankelijk van het type grafiek.

 plotOptions: {serie: {lineWidth: 2}},

De reekseigenschap is het centrum van het gehele configuratieobject dat de gegevens definieert die de grafiek zullen voeden.

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

Nu alle delen van de code zijn uitgelegd, laten we eens kijken hoe het eruit zou zien in onze browser.

Ten slotte laat ik de volledige code achter zodat je hem zelf kunt testen en zonder te vergeten dat hij kan worden aangepast om hem aan elke behoefte aan te passen.