Beoordelingen redacteur: Gebruikersbeoordelingen: [Totaal: 0 Gemiddeld: 0].ilfs_responsive_below_title_1 { width: 300px; } @media(min-breedte: 500px) {.ilfs_responsive_below_title_1 { breedte: 300px; } } @media(min-breedte: 800px) {.ilfs_responsive_below_title_1 { breedte: 336px; } }
Chartist is een gratis open source bibliotheek voor het genereren van SVG-kaarten die men kan gebruiken. Het is zeer geavanceerd en ondersteunt het genereren van veel grafieken met veel parameters. Hiermee kunt u kleurrijke grafieken van elk formaat genereren en op uw website plaatsen. Het ondersteunt zelfs animatie met CSS en dus kunt u met behulp van deze bibliotheek geanimeerde grafieken en grafieken genereren.
Bij het maken van dashboards en webpagina’s om een soort van rapportgerelateerde gegevens weer te geven, heeft u grafieken nodig. Vaak moesten ze dynamisch of statisch zijn. Daar zijn tools voor, maar niet zoals Chartist. Dit is waarschijnlijk een van zijn soort. Het wordt geleverd met zeer gedetailleerde documentatie en zeer goede voorbeelden, zodat u vrij snel kunt leren grafieken te genereren.
Lijst met ondersteunde grafiektypen door Chartist:
Staafdiagram (gestapeld en horizontaal inclusief) Lijndiagram Cirkeldiagram Vlakdiagram Donutdiagram Meterdiagram Lijnspreidingsdiagram Geanimeerd SVG-pad Bi-polair lijndiagram Tijdreeksen
Kenmerken van de grafieken gegenereerd door Chartist:
Extreem responsieve configuratie. Labelplaatsing Labels met meerdere regels Overlappende balken voor mobiel Gaten in gegevens CSS Animatie SVG Animatie Geavanceerde SMIL Animaties Ondersteuning voor plug-ins
Hoe Chartsit te gebruiken om SVG-diagrammen te genereren?
Er zijn meerdere manieren om deze bibliotheek te gebruiken. Afhankelijk van wat voor soort frontend ontwikkelaar je bent, kun je het gebruiken. Het wordt geleverd als een Node-module en als een insluitbaar scriptbestand dat u rechtstreeks op HTML kunt aanbieden via CDN.
Voor de eenvoud kunt u dit vrij gemakkelijk in HTML-documenten gebruiken. U hoeft deze bestanden alleen maar te importeren in het
-gedeelte van uw website. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsNa het koppelen van de bibliotheken hoeft u alleen een
Voeg nu een scripttag toe die het diagram daadwerkelijk in de opgegeven container zal genereren. Dit is eigenlijk heel eenvoudig. Als u JavaScript heel goed kent, kunt u de documentatie doornemen om te zien hoe u een aangepaste grafiek. Voor demo-doeleinden kunt u gewoon de volgende code gebruiken. Voeg het toe net onder het
Je bent nu bijna klaar. Open gewoon het HTML-bestand in de browser. De grafiek wordt nu voor u gegenereerd. U kunt met de JS-code spelen om een aangepaste grafiek te genereren op basis van verschillende gegevens. U kunt op deze manier ook een ander soort grafiek genereren.
De documentatie op de hoofdwebsite van Chartist is zeer gedetailleerd. Het heeft veel voorbeelden, zelfs over het maken van geanimeerde grafieken. Als front-end ontwikkelaar moet je die documentatie doornemen om een grafiek te genereren. En met wat code kun je ze zelfs exporteerbaar maken.
Sluitende gedachten:
Ik moet zeggen dat Chartist een juweel van een tool is voor ontwikkelaars en ontwerpers om aangepaste grafieken te integreren in enscenering evenals website in productie. Het is heel eenvoudig en je hoeft niet echt een heel lange stukcode te schrijven, tenzij je niet echt een complexe code maakt. De GitHub-repository heeft al meer dan 10.000 sterren, wat op zich al een enorme prestatie is.
