11 JavaScript-rammer til oprettelse af grafik
Javascript-rammer kan udføre en række funktioner. Her skal vi se på nogle biblioteker, der hjælper dig med at skabe fantastisk grafik.
Browseren tilbyder flere kraftfulde tegnings-API'er og overflader. Mest bemærkelsesværdige er lærredselementet og skalerbar vektorgrafik (SVG). Begge disse funktioner er nu tilgængelige i næsten alle desktop- og mobilbrowsere, men de API'er, der kræves for at bruge dem, er ret lave og 'lavt niveau' betyder typisk en meget kedelig og overflødig kode bare for at gøre enkle ting.
Da skrivning af kedelig og overflødig kode ikke er højt på listen over ting, som udviklere typisk kan lide at gøre, selv med bedste kode redaktører og bedste bærbare computere til programmering , der er heldigvis adskillige biblioteker til rådighed, der kan hjælpe dig med alle dine browserkrav til tegning.
I denne artikel ser vi på nogle af de tilgængelige muligheder. Vi udforsker de mest populære JavaScript-biblioteker og taler om deres styrker og svagheder. Vi vil også lave lidt spilunking til nogle af de mindre kendte projekter, der udfylder nogle meget interessante nichebehov - den slags, som du ikke ved, du har brug for, før du har brug for dem. Starter du fra bunden? Prøv en top webstedsbygger og overvej hvilke webhosting service er den rigtige for dig.
01. D3.js
D3.js er den store chef for JavaScript-grafikbiblioteker. Med over en million ugentlige downloads til over havniveau , det er muligvis den mest kendte og udbredte af alle grafikbibliotekerne. Det har endda sit eget Wikipedia-side . Og lad os indse det, er det ikke når du ved, at du har gjort det til den store tid?
D3 giver dig mulighed for at oprette datavisualiseringer af enhver art. Du behøver kun at kigge igennem det eksempler side at se verden af muligheder. Bedre endnu, besøg Shirley Wu's interaktiv visualisering af hver linje i musikalen Hamilton, hvis du virkelig vil have dit sind sprængt.
D3 er et altomfattende værktøj. Det har sit eget DOM-valg, AJAX-funktioner og endda en proprietær tilfældig talgenerator. Hver komponent i D3 er sit eget Node-modul, der skal importeres. For eksempel kaldes valgmodulet d3-valg. Der er også moduler til arrays, figurer, farver, træk og slip, tid og meget mere.
D3's styrke kommer med kompromis med kompleksitet. Læringskurven kan være stejl, og koden kan stadig føles bred. At bygge noget så simpelt som et søjlediagram kræver, at du manuelt samler aksen, skalerer, kryds og endda tegner de rektangler, der repræsenterer søjlerne. Udviklere klager ofte over den lave forståelse, der kræves for at være effektiv med D3.
Dette skyldes i vid udstrækning oprettelse af komplekse datavisualiseringer kræver, at du har en lav forståelse af den visualisering, du vil oprette. D3 er ikke den bedste mulighed for forbagede diagrammer. Til det er der flere andre valg, der finder dig i ' pit af succes meget hurtigere.
D3 er i stand til at gengive til lærred og SVG. Den virkelige magi ved D3 er dog dens evne til at 'data binde' til den grafik, den genererer. Tænk på et diagram, der ændres, når de indgående data ændres. Med SVG er hvert grafisk element et individuelt element, der kan vælges og opdateres. Dette er ikke muligt med lærred, og da D3 grundlæggende handler om at drive datavisualiseringer, er SVG normalt det foretrukne outputformat.
02. Chart.js
Chart.js er et open source-projekt til opbygning af robuste diagrammer med JavaScript. Den store forskel mellem Chart.js og D3 er, at mens du kan bygge næsten hvad som helst med D3, begrænser Chart.js dig til otte forudbyggede diagramtyper: linje, bjælke, pie, polar, boble, scatter, areal og blandet. Selvom dette synes at være begrænsende, er det det, der gør Chart.js enklere at komme i gang med. Dette gælder især for dem, der ikke er eksperter i data vis, men kender deres vej rundt i et grundlæggende diagram.
Syntaksen er alle bygget op omkring en diagramtype. Du initialiserer et nyt diagram på et eksisterende lærredselement, indstiller diagramtypen og indstiller derefter kortindstillingerne. Chart.js gengives kun til lærred. Dette er ikke et problem, da alle moderne browsere understøtter HTML-lærredselementet, men det kan være et hangup for udviklere, der har krav til SVG-support.
Det betyder også, at du er begrænset i de animationer, der er mulige. Uden for boksen har Chart.js understøttelse af alle lempelsesligninger, og animationer er angivet med en egenskabsindstilling. Selvom det gør det hurtigt og nemt at få et animeret diagram, forhindrer ikke at have individuelle SVG-elementer dig i at være i stand til at lave komplekse animationer ved hjælp af CSS3-overgange og animationer.
I modsætning til D3 er Chart.js ikke modulært, så det kræver kun en JavaScript-inkludering for at få support til alle funktioner og diagramtyper. Dette gør det lettere at komme i gang, men det betyder, at dine aktiver kan være meget større. Dette gælder især hvis du har brug for tidsakser - Chart.js kræver derefter Moment.js, som er ~ 51 kb minificeret og lynlås. Det er langt nemmere at oprette et søjlediagram med Chart.js end med D3. Der er dog et loft, der følger med enkelheden. Du kan finde ud af, at du rammer grænsen for, hvad det vil gøre ud af kassen. Ofte starter udviklere med en løsning som Chart.js og graduerer derefter til D3.
Hvis enkelheden i Chart.js appellerer til dig, kan du virkelig lide den næste mulighed: Chartist.
03. Kortlægger
Kortlægger sigter mod at være et simpelt, strømlinet kortbibliotek, der er lille i størrelse og let at komme i gang med. Det er også designet til at være lydhør som standard. Dette er en større aftale, end det lyder, da rammer som D3 ikke ændrer størrelsen på diagrammer automatisk, men kræver, at udvikleren binder sig til begivenheder og tegner grafik igen.
Chartist er også lille i sammenligning med Chart.js. Det vejer kun 10 KB uden afhængighed. Det kan skyldes, at det kun tilbyder tre diagramtyper: linje, bar og pie. Der er variationer inden for disse typer (dvs. spredningsdiagram er en linjetype i Chartist), men den lille størrelse og lette konfiguration modvirkes af manglen på out-of-the-box diagramtyper.
Chartist gengiver til SVG i stedet for lærred, hvilket gør det meget mere tilpasset med hensyn til udseende og følelse samt giver langt mere kontrol over interaktivitet og animationer. At ikke have adgang til et lærred betyder imidlertid, at du måske har sværere ved at udføre bestemte handlinger. For eksempel er der en API til gengivelse af et lærred til et billede (toDataURI). Denne mulighed findes ikke for SVG, så det vil vise sig at være meget vanskeligere at eksportere et diagram som et billede. I en ideel verden ville du have mulighed for at gengive til begge tilstande.
Chartist-diagrammer er lettere at konfigurere end Chart.js, da der er færre tilgængelige muligheder. Mens det er muligt at udvide disse diagrammer med en hel del funktionalitet, betyder deres fokus på enkelhed, at de pr. Definition er enkle. Chartist er en fantastisk løsning for dem, der har brug for en grundlæggende kortløsning. Diagrammer er i sagens natur vanskelige at konfigurere, da de kræver en slags viden om, hvordan man opsætter dataene langs en bestemt akse og grupperes på bestemte måder. Chartist gør kortlægningsdelen så enkel som muligt, men du kan finde brug for en mere kraftfuld løsning, når du bliver mere komfortabel med at generere dine kort.
Chartist viser også open source-rammesupport, herunder React og Angular. Der er ingen omtale af en Vue-pakke på sit websted.
04. Britecharts
Britecharts er et kortbibliotek, der omslutter D3. Det blev lavet af Eventbrite, som derefter åbnedeourcede projektet under den tilladte Apache V2-licens.
Det tilbyder et meget minimalt, men alligevel æstetisk tiltalende sæt diagrammer. Mens det kan være en ganske opgave at oprette et søjlediagram med vanille D3, gør Britecharts 'indpakning det så simpelt som at oprette et nyt søjlediagramobjekt og derefter indstille dets bredde og højde.
barChart.width(500).height(500);Britecharts har understøttelse af alle de grundlæggende diagramtyper: linje, bjælke, doughnut, kugle, spredningsdiagram, sparkline og trin, hvilket er mere end dem, der tilbydes af biblioteker som Chartist. Det giver også grundlæggende værktøjstip og forklaringsfunktionalitet. Animationerne til kortene er indbyggede, og Eventbrite har leveret nogle smukke farveskemaer.
I sidste ende er Britecharts en god mulighed for grundlæggende kortfunktionalitet. Konfigurationsobjekterne er ret enkle, og du får stadig kraften i D3 under covers uden at skulle vide noget om selve D3. Mange udviklere finder dette en mere overbevisende mulighed end blot at opbygge et komplet diagram fra bunden med D3.
Det har også fokus på de databindende aspekter af D3, hvilket gør det ganske godt for diagrammer, der skal ændres, når de underliggende data ændres. Selvom det er noget restriktivt i de tilgængelige typer, har det også en basisdiagramtype, som du kan udvide til at oprette nye egne diagramtyper.
05. Dykkertyper
Dykkerstil er en anden kortløsning, der omslutter kompleksiteten af D3 i en let at implementere API. Det er bygget på begreberne fra Grammatikken for grafik , en bog af forfatteren Leland Wilkinson. Det giver forståelse for hvornår og hvordan man bruger hvilke datavisualiseringer til at vise forskellige slags data.
Uden for boksen indeholder den linje, søjle, scatterplot, område og facetkort. Imidlertid implementerer den begreberne fra The Grammar of Graphics i 'Taucharts Language', som giver en ramme, hvor du kan implementere dine egne datavisualiseringer.
Taucharts ser ret overbevisende ud, og det faktum, at den er bygget på D3, gør det til en attraktiv og kraftfuld mulighed. Der er dog en følelse af, at udvikleren også skal læse The Grammar of Graphics for fuldt ud at udnytte sin magt.
Indtil videre har vi kun dækket kortlægning og datavisualisering. Dette skyldes, at tegning af diagrammer er den mest almindelige anvendelse af et grafikbibliotek i en browser. Men det er på ingen måde den eneste. Et andet ganske almindeligt scenario for grafik er selvfølgelig animation.
06. Two.js
Ikke at forveksle med D3.js, two.js er et open source JavaScript-bibliotek til todimensionel tegning på nettet. Det er også i stand til at målrette mod alle tre grafikindstillinger i moderne browsere: SVG, Canvas og WebGL.
Two.js ligner noget D3, idet det er strengt fokuseret på tegning og ikke har forbagede diagrammer eller interaktive strukturer at vælge imellem. Dette betyder, at du, ligesom D3, har brug for en underliggende forståelse af den type tegning, du prøver at gøre, og hvordan du opnår det med de konstruktioner, two.js giver. At tegne en cirkel er ret ligetil. At bygge en detaljeret animation er derimod en meget mere kompliceret indsats. Two.js abstraherer kun tedium af tegningsformer, ikke tedium af den samlede tegning.
Two.js holder også styr på alle de objekter, du opretter, så du kan henvise til og animere dem til enhver tid. Dette er især vigtigt, hvis du laver spiludvikling, og du har aktiver, der skal spores for ting som kollisionsdetektering. Den har en indbygget animationssløjfe, der aflaster dig fra at skulle bekymre dig om animationsrammer og gør det lettere at binde i et animationsbibliotek som f.eks. GreenSock .
Mens two.js er kraftfuldt, kan dets fri form muligvis lade nogle udviklere være usikre på, hvordan de skal begynde, og det er mere et nicheværktøj til 2D-tegning og animation. En anden fremragende mulighed er pts.js.
07. Pts.js
Pts er også et to-dimensionelt tegningsbibliotek. Det er fundamentalt anderledes end two.js, da det bruger en forudbestemt metode til, hvordan tegninger og animationer skal samles: rum, form og punkt. Den analogi, dets udviklere bruger til at forklare dette, er en fra den fysiske verden. Rummet er papir. Form er blyanten. Og punkt er din idé.
Med hensyn til implementering er plads et lærredselement. Når lærredselementet er oprettet, kan du føje spillere til det. Disse kan enten være funktioner eller objekter. Disse funktioner og objekter skal være i overensstemmelse med den forudbestemte grænseflade, som et rum har. Pts er bygget på TypeScript, så der er ingen grund til at gætte på, hvad det er, da det værktøj, du bruger, sandsynligvis vil foreslå dem med autofuldførelse.
For eksempel har et mellemrum en startfunktion, som du kan specificere. Dette er kode, der køres, når pladsen er klar. Inden for disse funktioner sker tegningen til rummet ved hjælp af formobjektet. Formobjekter kan tegne enhver form for form, og punktet er, hvor disse emner er placeret i rummet.
Pts ser ud til at være primært designet til at skabe interaktive visualiseringer og animationer. Dens implementering er interessant, omend ganske abstrakt. Udviklere kan have svært ved at forstå den 'rum, form, punkt'-model, som Pts kræver. Dette er en anden mental forhindring, der skal ryddes ud over den simpelthen at tegne og animere figurer.
08. Anime.js
Anime.js er primært et animationsbibliotek. Det har et indbygget forskydningssystem, der gør det lettere at have komplekse animationer, der overlapper eller er afhængige af forekomsten af en anden udførelse. Det er almindeligt, at animationer bliver timet sammen eller udløses af hinanden. Det svimlende system gør dette nemmere at implementere, da det hjælper med at aflaste nogle af omkostningerne ved at spore alt, hvad der sker på siden og manuelt konfigurere animationstimingene.
I modsætning til de hidtil dækkede tegnebiblioteker har anime.js ikke API'er til tegning af figurer. I stedet antager det, at dine former allerede eksisterer, og at du vil animere dem. Dette gør det godt til brug med biblioteker som two.js. Anime.js har understøttelse af animering af CSS-egenskaber, SVG, DOM og endda JavaScript-objekter.
Anime.js er en god mulighed for at animere eksisterende tegninger og vil sandsynligvis blive kombineret med et andet bibliotek. Det bør betragtes som et alternativ til noget som GreenSock og ikke som en erstatning for andre tegnebiblioteker. Anime.js vil sandsynligvis blive brugt til mere komplekse animationer, der skal ske som en del af en interaktiv weboplevelse.
09. PixiJS
PixiJS er et andet 2D tegningsbibliotek. Hovedformålet er at gøre det nemmere at vise, animere og administrere 2D-grafik, så du kan fokusere på at opbygge din oplevelse eller dit spil uden at bekymre dig om at holde trit med alle de figurer og billeder, du skal tegne og animere. Hvis du bygger et spil, kan aktiver (eller sprites) hurtigt ballonere til et nummer, der er svært at administrere. (Masser af aktiver at spare? Hold dem sikre på det mest pålidelige Sky lagring .)
Et overbevisende aspekt af PixiJS er, at det kommer fra en API, der blev bygget og brugt i vid udstrækning i Adobe Flash. Dette er en enorm fordel for udviklere, der kommer fra en Flash-baggrund, da oplevelsen vil føle sig bekendt. Det ligner også Apples SpriteKit.
PixiJS er ikke en spilmotor, så hvis du bruger det til spil, finder du ikke noget værktøj eller fysik til at håndtere ting som kollisionsdetektering. Du bliver nødt til at pakke den ind i en faktisk spilmotor eller en, du bygger dig selv, hvis du føler dig frygtløs.
PixiJS gengiver til WebGL. WebGL er en motor til at lave GPU-accelereret grafik i browseren. Dette betyder, at det er nyttigt til animationer og grafik, der bruger mange systemressourcer og ville fungere bedst, når de gengives af en diskret grafikbehandlingsenhed (GPU). Det er baseret på OpenGL, som svarer til skrivebordets ækvivalent til at køre spil og 3D-grafikprogrammer. Under emhætten bruger WebGL HTML-lærredselementet.
Alvorlige grafikudviklere vil sætte pris på kraften i WebGL. Disse oplevelser kan dog blive forringet på maskiner med lavere effekt. Selv da jeg lagde denne artikel sammen, forårsagede mange af PixiJS-demoer en mærkbar afmatning i mit system, som ikke har de avancerede funktioner, der kræves til kompleks grafik og animationer.
10. Zdog
De fleste af de tegnemotorer, som vi hidtil har diskuteret, er todimensionale. Dette skyldes, at de fleste af de interaktioner, vi har med vores skærm, forekommer i to dimensioner - langs X- og Y-aksen. Tredimensionelle tegninger og animationer er normalt meget mere komplekse.
Zdog er et bibliotek til opbygning af pseudo-3D-oplevelser, der for det meste er flade i naturen. Det kaldes pseudo-3D, for mens det konceptualiserer sine tegninger i 3D-rummet, gengiver det dem som flade former. Det bruger visuelle tricks til at få 2D-objekter til at se 3D ud. Effekten er virkelig interessant. Det ser helt tredimensionelt ud, når animationen ses, men når der tages et skærmbillede, er det tydeligt et fladt billede. Her er et eksempel: den roterende Mario-demo.
Da gengivelserne er 2D, kan Zdog gengive til enten Canvas eller SVG. Zdog er en fantastisk mulighed for 3D-animationer på enkle objekter - især hvis disse aktiver indeholder aspekter af fladt design. Udviklere, der ønsker 3D-animation, men ikke ønsker at sætte sig fast i den komplekse verden af 3D-grafikmotorer, kan finde Zdog som en passende løsning. Derudover har Zdog med sit fokus på flade billeder råd til en meget enklere grænseflade og meget højere ydeevne, end det ville være nødvendigt for 3D-gengivelse af komplekse grafiske billeder.
Det har ikke elementerne i en spilmotor som aktivstyring og kollisionsdetektering, så det bliver nødvendigt at indpakke det i en spilmotor eller tage de manuelle overvejelser i betragtning. Dette betyder, at Zdog sandsynligvis er bedst til isolerede 3D-animationer på destinationssider.
11. Snap.svg
Snap.svg siger, at det gør 'at arbejde med dine SVG-aktiver så let som jQuery gør at arbejde med DOM'. Du kan muligvis fortælle fra jQuery-referencen, at Snap.svg er lidt ældre, men dets API føles lige så let som jQuery, og det er en ganske kraftig ting.
Snap.svg har en ren og enkel API til at vælge dit vigtigste SVG-element og derefter tegne elementer til det. Det er bedst egnet til udviklere, der søger en hurtig løsning til animering af SVG'er. Det er en særlig god mulighed, hvis dine animationer er enkle, og du ikke har meget viden om animationsmotorer. Selvom det er noget dateret, bør det bestemt ikke overses, da det kunne være den nemmeste måde at arbejde med dine SVG'er på.
Snap.svg er forfriskende i sin enkelhed. Det er omfattet af jobbet med at vælge og arbejde med SVG'er og prøver ikke at være mere end det. Snap kunne kombineres med andre grafiske biblioteker her til tegning og gengivelse til SVG'er. Det er også godt, hvis du har eksisterende SVG'er, og du vil have en nem måde at arbejde med dem på.
Denne artikel blev oprindeligt offentliggjort i netmagasinet.
Relaterede artikler:
