no.hideout-lastation.com
9 Javascript-bibliotek for å bygge interaktive diagrammer
Så du har i hånden tonnevis med data, med en rekke variabler, at du på en eller annen måte må videresende til noen andre. Rå, uorganiserte data kommer til å være vanskelig for dem å forstå. Det er derfor du trenger hjelp fra diagrammer. I webdesign er diagrammer et av de beste verktøyene for datavisualisering . Det er lett å lese, lett på øynene og relativt enkelt å sette opp.
Men la oss ta ting opp i hak: la oss legge til animasjon og interaktivitet til disse diagrammene, slik at leserne ikke bare kan lære noe nytt fra diagrammet, men også spille med det. Det er faktisk enklere enn det høres, takket være en rekke JS-biblioteker der ute. La oss sjekke dem ut.
1. Figur JS
Chart.js er et ikke-avhengighetsbibliotek for å bygge diagrammer i 6 forskjellige typer: linjediagrammer, linjediagrammer, radardiagrammer, polare områdediagrammer, paj og donutdiagrammer. Biblioteket er også delt i henhold til karttype, slik at sidene dine ikke er slått ned med det som ikke er nødvendig. Den støtter responsiv design, og du kan enkelt endre variabler som farge eller animasjon for å tilpasse diagramgrensesnittet.
2. Chartist JS Chartist JS er flott bibliotek for å bygge responsive diagrammer som bruker SVG. Foruten sin lydhørhet gir Chartist deg fleksibilitet ved å bruke tydelig adskillelse av bekymringer: stil med CSS og kontroll med JS. For å gjøre tilpasningen enklere, er SASS-filene inkludert. Den gode tingen her er at du har ubegrensede alternativer for å animere diagrammet ditt ved å bruke Chartist animasjon API, SMIL, som gir deg ekstra animasjonsalternativer.
3. C3 JS C3 JS er et bibliotek for å bygge diagrammer basert på D3 JS. Den bryter opp koden for å bygge diagrammer med D3 JS, slik at du kan hoppe over å skrive D3-koden, og bare skrive inn dataene dine. C3 leveres med en rekke APIer som du kan bruke til å kontrollere diagrammer dine enkelt. For å tilpasse diagrammet ditt, definer du dine egne tilpassede stiler til de oppgitte CSS-klassene. Bygg diagrammer fra enkle linjediagrammer for å måle diagrammer. Sjekk ut denne siden for å se hvordan biblioteket fungerer.
4. Flot Flot er et jQuery plguin for å lage diagrammer med interaktive elementer som å slå en serie på eller av, datapunkt-interaksjoner, panorering, zooming og mer. Flot kommer med en rekke alternativer for karttype og hvis du vil ha mer evne på diagrammet ditt, er det noen plugins du kan bruke også. Kartene vil fungere godt med nettlesere som støtter HTML canvases.
5. EChart Echart er et utrolig omfattende bibliotek fra Kina som støtter flere karttyper, kan behandle store data (plotting opptil 200 000 datapunkter på kartesisk diagram), har roaming-skala, muligheten til enkelt å trekke ut, integrere og utveksle data mellom flere diagrammer, slik at man enkelt kan bytte fra en datatype til en annen, og mye mer.
6. Peity Peity vil legge til et minikart til websiden din. Det er et lite jQuery-plugin som forvandler et element til en mini svg linje, bar, doughnut eller kakediagram. Du trenger bare å opprette et element og gi en verdi som 1/5 og ringe peity('pie') på det elementet for å lage et mini-kake diagram. For eksempel å lage et doughnutdiagram som bare er en femtedel uthevet, her er HTML:
1/5
Du kan tilpasse kartfargene, radius, bredde og høyde, men som standard vises den i liten størrelse.
7. DC JS DC JS har likheter med C3 JS når det gjelder motor brukt; De bruker begge D3-biblioteket til å gjengi diagrammer i SVG. DC JS er laget for å hjelpe deg med å visualisere data og analyse for nettlesere og mobile enheter. Siden det bruker D3 JS, kan du legge til brukerinteraksjon i diagrammet ditt. DC JS er et kraftig bibliotek for å lage diagrammer fra enkle til høye kompleksiteter.
8. Google-diagram Du kan opprette interaktive kart og dataverktøy ved hjelp av Google Visualiserings-API via Google Chart. Det er kartgallerier for å sjekke ut Google Charts datavisningsfunksjoner. For å starte, legg inn enkelt JavaScript til websiden din for å laste inn de Google kartbiblioteker du trenger. Oppgi deretter dataene du vil kartlegge, og gjør noen tilpasninger gjennom kartvalgene. Endelig opprett et diagramobjekt med et id, og opprett på din nettside en
9. NVD3 NVD3 er et sett med gjenbrukbare diagrammer og kartkomponenter som er bygget med D3 JS. Dette biblioteket er derfor en "mal" som vil gjøre det enklere for deg å bygge diagrammer. Sjekk ut de mange utvalgskartene som er bygd med NVD3 her.
Nå Les: JavaScript-biblioteker for å lage interaktive og tilpassede kart 
UIpie er en varm ny kilde for design inspirasjon og freebies
Søker etter designinspirasjon online kan koste deg timer på dagen. Det er bare så mange forskjellige steder å bla og tonnevis av freebies skreddersydd for designere.En av de nyeste nettstedene å legge til i denne listen med web inspirasjon er Uipie . Den dekker både web og mobil inspirasjon, sammen med tonnevis av freebies som PSD, AI og Sketch-filer .Dette
Slik legger du til Facebook Authorship i WordPress
Facebook gir mange tjenester for å la nettsteder være mer engasjerende gjennom det sosiale nettverket, for eksempel ved å bruke kommentaren, likebox, den eminente like- knappen, og mer nylig har den forbedret forfatter-tagging-funksjonen. Forfatter-taggen, når den er gitt, tillater Facebook å merke den delte artikkelen med forfatterens Facebook-profil.Merk
