9 Javascript-bibliotheken om interactieve grafieken te maken
Dus je hebt tonnen gegevens in handen, met een aantal variabelen, die je op de een of andere manier aan iemand anders moet doorgeven. Ruwe, ongeorganiseerde gegevens zullen moeilijk te begrijpen zijn. Dit is waarom je hulp nodig hebt van grafieken. In webontwerp, grafieken zijn een van de beste tools voor datavisualisatie. Het is gemakkelijk te lezen, gemakkelijk in de ogen en relatief gemakkelijk in te stellen.
Maar laten we de zaken een tandje bijsteken: laten we het doen animatie en interactiviteit toevoegen aan die grafieken, zodat lezers niet alleen iets nieuws uit de grafiek kunnen leren, maar er ook mee kunnen spelen. Het is eigenlijk makkelijker dan het klinkt, dankzij een aantal JS-bibliotheken die er zijn. Laten we ze eens bekijken.
1. Kaart JS
Chart.js is een no-afhankelijkheidsbibliotheek om grafieken te bouwen in 6 verschillende soorten: lijndiagrammen, staafdiagrammen, radardiagrammen, grafieken van polaire gebieden, taart- en ringdiagrammen. De bibliotheek is ook gesplitst volgens het grafiektype, zodat uw pagina's niet verzanden in wat niet nodig is. Het ondersteunt responsief ontwerp en u kunt eenvoudig variabelen zoals kleur of animatie wijzigen om de kaartinterface aan te passen.
2. Chartist JS
Chartist JS is een geweldige bibliotheek om responsieve grafieken te maken die gebruik maken van SVG. Naast zijn reactievermogen biedt Chartist u flexibiliteit door gebruik te maken van duidelijke scheiding van punten van zorg: stijl met CSS en controle met JS. Om aanpassingen gemakkelijker te maken, zijn de SASS-bestanden inbegrepen. Het leuke hier is dat je onbeperkte opties hebt om je diagram te animeren met behulp van de Chartist-animatie-API, SMIL, die je extra animatie-opties biedt.
3. C3 JS
C3 JS is een bibliotheek om grafieken te bouwen op basis van D3 JS. Het wikkelt de vereiste code bij om diagrammen met D3 JS te maken, zodat u het schrijven van de D3-code kunt overslaan en alleen uw gegevens kunt invoeren. C3 wordt geleverd met een verscheidenheid aan API die u kunt gebruiken om uw diagrammen eenvoudig te beheren. Als u uw diagram wilt aanpassen, definieert u uw eigen aangepaste stijlen voor de gegeven CSS-klassen. Maak grafieken van eenvoudige lijndiagrammen naar maattabellen. Bekijk deze pagina om te zien hoe de bibliotheek werkt.
4. Flot
flot is een jQuery-plguin voor het maken van diagrammen met interactieve elementen zoals het in- of uitschakelen van een reeks, gegevenspuntinteracties, pannen, zoomen en meer. Flot wordt geleverd met verschillende diagramtypen en als u meer mogelijkheden op uw grafiek wilt, zijn hier enkele plug-ins die u ook kunt gebruiken. De grafieken zullen goed werken met browsers die HTML-canvases ondersteunen.
5. EChart
Echart is een verbazingwekkend uitgebreide bibliotheek uit China die meerdere diagramtypes ondersteunt, big data kan verwerken (tot 200.000 datapunten in een cartesiaanse grafiek), schaalroaming heeft, de mogelijkheid om moeiteloos uit te pakken, te integreren en gegevens uit te wisselen tussen meerdere grafieken, waardoor een om eenvoudig van het ene datatype naar het andere over te schakelen, en nog veel meer.
6. Peity
Peity voegt een minischiagram toe aan uw webpagina. Het is een kleine jQuery-plug-in die een element omzet in een mini svg lijn, staaf, doughnut of cirkeldiagram. U hoeft alleen maar een element te maken en een waarde als te geven 1/5 en bel peity ( 'pie') op dat element om een minicirkeldiagram te maken. Als u bijvoorbeeld een ringdiagram wilt maken dat slechts voor een vijfde is gemarkeerd, volgt hier de HTML:
1/5
U kunt de grafiekkleur, radius, breedte en hoogte aanpassen, maar standaard wordt deze in klein formaat weergegeven.
7. DC JS
DC JS heeft overeenkomsten met C3 JS in termen van gebruikte motor; ze gebruiken beide de D3-bibliotheek om diagrammen weer te geven in SVG. DC JS is gemaakt om u te helpen gegevens en analyses voor browsers en voor mobiele apparaten te visualiseren. Omdat het gebruikmaakt van de D3 JS, kunt u gebruikersinteractie toevoegen aan uw diagram. DC JS is een krachtige bibliotheek om grafieken te maken van eenvoudige tot hoge complexiteiten.
8. Google Chart
U kunt interactieve diagrammen en gegevenshulpmiddelen maken met behulp van de Google Visualization API via Google Chart. Er zijn diagramgalerijen om de mogelijkheden voor gegevensvisualisatie van Google Chart te bekijken. Om te beginnen, sluit eenvoudig JavaScript in uw webpagina in om de Google Chart-bibliotheken die u nodig heeft te laden. Geef vervolgens de gegevens op die u in kaart wilt brengen en breng enkele aanpassingen aan met behulp van de diagramopties. Maak tenslotte een diagramobject met een ID en maak op uw webpagina een NVD3 is een set herbruikbare diagrammen en diagramonderdelen die zijn gebouwd met D3 JS. Deze bibliotheek is daarom een 'sjabloon' waarmee u gemakkelijker grafieken kunt maken. Bekijk hier de vele voorbeeldkaarten die met NVD3 zijn gebouwd.
9. NVD3
Nu lezen: JavaScript-bibliotheken om interactieve en aangepaste kaarten te maken
