9 Javascript-bibliotek för att bygga interaktiva diagram

Så du har i din hand massor av data, med ett antal variabler, att du på något sätt måste överföra till någon annan. Råa, oorganiserade data kommer att bli svåra för dem att förstå. Det är därför du behöver hjälp från diagram. I webbdesign, diagram är ett av de bästa verktygen för datavisualisering. Det är lätt att läsa, lätt på ögonen och relativt lätt att ställa in.

Men låt oss ta saker uppe: låt oss lägg till animering och interaktivitet för dessa diagram, så att läsare inte bara kan lära sig något nytt från diagrammet, men också leka med det. Det är faktiskt enklare än det låter tack vare ett antal JS-bibliotek där ute. Låt oss kolla in dem.

1. Diagram JS

Chart.js är ett bibliotek som inte är beroende av att bygga diagram i 6 olika typer: linjekartor, stapeldiagram, radardiagram, polarkartschema, pie och donutdiagram. Biblioteket är också uppdelat enligt diagramtyp så att dina sidor inte bogseras med vad som inte behövs. Den stöder responsiv design och du kan enkelt ändra variabler som färg eller animering för att anpassa grafikgränssnittet.

2. Chartist JS

Chartist JS är ett bra bibliotek för att skapa responsiva diagram som använder SVG. Förutom sin lyhördhet ger Chartist dig flexibilitet genom att använda tydlig separation av problem: stil med CSS och kontroll med JS. För att göra anpassningen enklare ingår SASS-filerna. Det bästa här är att du har oändliga alternativ att animera ditt diagram med hjälp av API-animerings API, SMIL, vilket ger dig ytterligare animeringsalternativ.

3. C3 JS

C3 JS är ett bibliotek för att bygga diagram baserat på D3 JS. Det klämmer in den obligatoriska koden för att skapa diagram med D3 JS, så du kan hoppa över att skriva D3-koden och bara mata in dina data. C3 levereras med en mängd API som du enkelt kan styra dina diagram. För att anpassa ditt diagram, definiera dina egna anpassade stilar till de givna CSS-klasserna. Bygg diagram från enkla linjekartor för att mäta diagram. Kolla in den här sidan för att se hur biblioteket fungerar.

4. Flot

flot är ett jQuery-plguin för att skapa diagram med interaktiva element som att slå en serie på eller av, datapunktsinteraktioner, panorering, zoomning och mer. Flot kommer med en mängd olika diagramtypalternativ och om du vill ha mer förmåga på ditt diagram, här är några plugins du kan använda också. Diagrammen fungerar bra med webbläsare som stöder HTML canvases.

5. EChart

Echart är ett fantastiskt omfattande bibliotek från Kina som stöder flera karttyper, kan bearbeta stor data (plottar upp till 200 000 datapunkter på ett kartesiskt diagram), har roamingskala, förmågan att enkelt extrahera, integrera och utbyta data bland flera diagram, vilket tillåter en för att enkelt växla från en datatyp till en annan, och mycket mer.

6. Peity

Peity lägger till ett mini-diagram på din webbsida. Det är ett litet jQuery-plugin som omvandlar ett element till en mini svg linje, stapel, munk eller cirkeldiagram. Du behöver bara skapa ett element och ge ett värde som 1/5 och ring ett samtal peity ( 'pie') på det här elementet för att göra ett mini cirkeldiagram. Till exempel, för att skapa ett donut diagram som bara är en femtedel markerat, här är HTML:

1/5

Du kan anpassa diagrammets färg, radie, bredd och höjd, men som standard visas den i liten storlek.

7. DC JS

DC JS har likheter med C3 JS i termer av använt motor; De använder båda D3-biblioteket för att göra diagram i SVG. DC JS är skapad för att hjälpa dig att visualisera data och analys för webbläsare och mobila enheter. Eftersom det använder sig av D3 JS, kan du lägga till användarinteraktion i diagrammet. DC JS är ett kraftfullt bibliotek för att skapa diagram från enkla till höga komplexiteter.

8. Google-diagram

Du kan skapa interaktiva diagram och dataverktyg med hjälp av Google Visualization API via Google Chart. Det finns kartgallerier för att kolla in Google Charts datavisningsfunktioner. För att starta, bädda in enkel JavaScript till din webbsida för att ladda upp de Google-kartbibliotek du behöver. Anteckna sedan de data som du vill kartlägga och gör några anpassningar via diagramalternativen. Skapa slutligen ett diagramobjekt med ett id, och skapa på din webbsida en

med det här idet för att visa ditt diagram.

9. NVD3

NVD3 är en uppsättning återanvändbara diagram och diagramkomponenter som är byggda med D3 JS. Detta bibliotek är därför en "mall" som hjälper dig att göra det enklare för dig att bygga diagram. Kolla in de många provkartor som är byggda med NVD3 här.

Läs nu: JavaScript-bibliotek för att skapa interaktiva och anpassade kartor