Kaarten toevoegen aan uw site met Highcharts

Iedereen houdt zich bezig met gegevens en wordt vaak gepresenteerd in grote gegevenstabellen. Het weergeven en lezen van lange tabellen op een website kan erg omslachtig zijn. Grafieken zijn goed om mensen de verandering en de tendens achter gegevens te laten begrijpen. 

Onlangs, toen ik probeerde een eenvoudige manier te vinden om een ​​interactieve grafiek op een website in te voegen, vond ik Highcharts en ik gebruik het sindsdien in verschillende projecten. 

In deze reeks artikelen gaan we een onderzoek doen naar Highcharts, waarom het geweldig is en hoe we het kunnen implementeren in onze eigen webprojecten.

Wat is fascinerend over Highcharts?

• Het is interactief. U kunt met de muis over een item gaan voor meer informatie en u kunt ook op items in de legenda klikken om ze in en uit te schakelen. 
• verenigbaarheid. Het is gebaseerd op JavaScript, het wordt weergegeven in een webbrowser, dus zelfs IE 6 of een iPad kan je die prachtige grafieken laten zien. Highcharts maakt gebruik van andere JS-raamwerken zoals jQuery, MooTools, Prototype of Highcharts Standalone-raamwerk. U hebt een van de bibliotheken en highcart.js om grafieken te maken.
• Veel-veel grafiektypen. Highcharts ondersteunt lijn-, spline-, gebied-, gebiedspline-, kolom-, staaf-, cirkel-, strooi-, hoek-, rechthoek-, vlakschuif-, kolom- en polaire grafiektypen. We zullen voorbeelden voor de meest gebruikte bekijken: kolom-, staaf-, lijn- en cirkeldiagrammen.
• Het voeren van Highcharts is eenvoudig. Highcharts kan gegevens laden van lokale gegevens, lokale bestanden of zelfs van een externe server. Het kan geparseerde gegevens van CSV, JSON, XML-bestanden of een andere database bevatten.
• Sla uw diagrammen op of druk ze af. Een van de verrassende functies die ik heb gevonden, is dat u de grafiek kunt afdrukken of exporteren die u momenteel ziet. Men kan een grafiek opslaan als PDF-, JPG-, PNG- of SVG-bestand.
• Eenvoudig in te stellen, tunen is geen probleem. Voeg een paar regels code toe en uw gegevens en grafieken tekenen. Met zijn goed geschreven gebruikersdocumentatie en API-referentie, zullen beginners niet verdwalen en zijn ervaren ontwikkelaars welkom.
• Flexibele licentie. Het gebruik van Highcharts is gratis voor niet-commerciële sites en prijzen zijn flexibel voor commerciële projecten.
• Thema-able. Op dit moment zijn er vier voorgedefinieerde modern ogende thema's of kun je je eigen unieke met wat smaak en CSS-kennis maken.

Voordat we Highcharts de eerste keer gebruiken, laten we zien welk grafiektype gebruikt moet worden voor algemene taken.

Welke kaart te gebruiken wanneer?

Staafdiagrammen en kolomdiagrammen zijn vergelijkbaar op een manier die elk lange rechthoeken gebruikt om meerdere waarden te vergelijken, maar hun verschil ligt in de richting van hun grafiek. Staafdiagrammen zijn horizontaal georiënteerd en kolomdiagrammen zijn verticaal. 

In mijn eenvoudige voorbeeld vergelijk ik de omzet per bron van een imaginaire webshop in een maandelijkse distributie (waarbij elke maand de verkoop met elkaar wordt vergeleken). Zoals u hieronder kunt zien, als u slechts een kleine hoeveelheid gegevens wilt vergelijken en het staafdiagram past op het scherm waarmee u momenteel werkt, dan is uw beste gok om met het staafdiagram te gaan. 

Gebruik daarentegen kolomdiagrammen als u een verticale beperking hebt, zoals bij landschapsgeoriënteerde schermen. Zie onderstaande vergelijking.

Lijndiagrammenvertegenwoordigen informatie met de reeks gegevenspunten en rechte lijnen. Ze tonen specifieke gegevensveranderingen met gelijke tijdsintervallen. Het wordt vaak gebruikt om trends in een tijdreeks te visualiseren. 

In mijn voorbeeld gebruik ik dezelfde gegevenstabel als ik hieronder gebruikte om meerdere gegevenssets met elkaar te vergelijken. Zoals u kunt zien, is het eenvoudig om de trending van de verkoopbron van de voorgaande maanden te vergelijken.

Taartpuntenzijn cirkelvormige diagrammen onderverdeeld in sectoren waarin elke sector de relatieve grootte van elke waarde weergeeft. Ze zijn handig als u gegevens wilt vergelijken die deel uitmaken van het geheel. Elk taartpunt vertegenwoordigt de numerieke waarde van de som. 

In mijn voorbeeld toon ik de verdeling van verschillende verkopen van het brontype van een bepaalde periode.

Anatomie van Highcharts

Om de volgende codevoorbeelden te begrijpen, moet u de basisbegrippen kennen die deel uitmaken van Highcharts.

Dit zijn de hoofdonderdelen van een grafiek:

• Titeltoont de naam van een kaart bovenaan
• Ondertitels zijngeplaatst recht onder de titel
• Series verwijst naareen of meer gegevensreeksen gepresenteerd op een kaart
• Tooltips zijnbeschrijvingen van bepaalde gegevens die worden weergegeven door over een deel van een diagram te zweven
• Legendetoont de naam en / of het symbool van elke reeks op een kaart. Door in een legenda op de naam van de reeks te klikken, kan de reeks worden in- of uitgeschakeld.
• Print en download, laten we gebruikers het diagram afdrukken of exporteren. 

Uw eerste kaart toevoegen

In dit voorbeeld importeren we enkele voorbeeldgegevens uit een CSV-bestand, verwerken deze en presenteren de gegevens in een kolomdiagram in een HTML-bestand. 

Laten we de basisinstellingen bekijken: 

• U moet een HTML-bestand maken met elke gewenste naam
• In dezelfde map heeft u een CSV-bestand (door komma's gescheiden waarden) nodig

In mijn voorbeeld gebruik ik een tekstbestand waarin waarden gescheiden worden door een komma en records worden gescheiden door nieuwe regels.

De inhoud van de kolomvormige data.csv bestand dat we gebruiken: 

Verkoop per bron, januari, februari, maart, april, mei, juni, juli Zoekmachine, 60,64,57,61,54,58,61 Ad, 30,39,32,40,37,33,41 Affiliate, 20,18,23,27,19,23,27 Nieuwsbrief, 29,22,23,27,19,32,34 offline / organisch, 50,47,44,40,48,51,53

In de HTML's hoofd, we moeten de nieuwste versie van jQuery opnemen, Highcarts.js, de optionele exportmodule en onze aangepaste JavaScript die onze grafiek voorbereidt en maakt. 

In het lichaam hebben we een container nodig div waar de grafiek kan worden getekend.

Zoals u kunt zien, zijn de eerste dingen die u wilt instellen het type diagram en de naam van de container. Vervolgens stellen we de titel, ondertitel en de titel van de y-as in met onze eigen tekst. De inhoud van de categorieën voor de x-as en de seriegegevens worden later verwerkt en gekoppeld na het succesvol parseren van de CSV-gegevens. 

Onze JavaScript deed deze eenvoudige stappen: 

1. Stel de opties in
2. Ontleed de CSV
3. De grafiek gemaakt

Het zijn drie eenvoudige stappen naar een heel goed uitziende grafiek voor onze gegevens.

Komende volgende ...

Dit was een inleidend artikel over hoe u Highcharts kunt gaan gebruiken. 

In het volgende artikel gaan we verder met het bekijken van de bibliotheek en hoe we deze kunnen gebruiken om informatie in andere soorten grafieken weer te geven, evenals.