Innhold
Som en responsiv webutvikler søker jeg stadig veier for å bringe standardteknologier under ett hette, mens jeg også prøver å følge med på W3C One Web-løftet.
Å gjøre den samme informasjonen, utformingen og interaksjonene tilgjengelig på hvert medium - til tross for at hver kommer med sine egne spesielle begrensninger - kan det virke umulig i begynnelsen. Det er en av de mest utfordrende delene av en utviklers jobb, men jeg tror fortsatt at dette er et løfte vi kan og bør oppfylle.
Problemet med å ikke vise noe innhold på visse medier, eller avvise noen interaksjoner, er egentlig ikke at det bryter en W3C-kontrakt, men at det roter med brukernes forventninger. Det er der vi betaler boten.
Det er ingenting som er mer irriterende enn å oppdage at favorittknappen din på et nettsted ikke eksisterer når du sitter i bussen og har lyst til å trykke på den! Etter min erfaring kan dette til og med føre til at brukeren bare velger å ikke se et nettsted på agiven media helt.
Jeg tror disse prinsippene bør brukes på alt innhold på nettet, og dette inkluderer datavisualisering.Stod overfor et prosjekt for en klient som ønsket at jeg skulle implementere et ytelsesdashboard som skulle være tilgjengelig på en mobil og et nettbrett, men som også ble vist pent på en stor widescreen-tv, tapte Ifelt med de tilgjengelige alternativene.
Det var allerede mange gode kartbiblioteker der ute, men ingen av dem løste faktisk problemet med å generere enkle og flotte kart som også oppførte seg responsivt.
Etter å ha brukt timer på å tilpasse eksisterende biblioteker for å få dem til å oppføre seg slik jeg ville at de bestemte meg, bestemte jeg meg bare for å lage mine egne. Dette markerte fødselen til Chartist.js.
Komme i gang
Den enkleste måten å komme i gang med Chartist.js er ved å bruke Bower pakkebehandling (bower.io). Du kan deretter installere den nyeste versjonen av Chartist.js ved å skrive følgende kommando i skallet ditt:
bower install chartist --save
Du vil nå ha Chartist.js installert lokalt, og venter på din videre instruksjon. Alt du trenger å gjøre er å legge til ressursene i HTML-en, og du er klar til å tegne noen fine responsive diagrammer.
link rel = ”stylesheet” href = ”bower_components / chartist / libdist / chartist.min.css”> script src = ”bower_components / chartist / libdist / chartist.min.js”> / script>
Chartist.js kommer uten noen avhengigheter og har en komprimert størrelse på mindre enn 10 KB. Hovedformålet med Chartist.js er å løse ett og bare ett problem, som er å gjøre det mulig for utviklere å tegne enkle, responsive diagrammer. Det gjør det ved å bruke kraften til webstandarder, som innebygd SVG i DOM, og CSS for utseendet. Med denne klare skillet mellom bekymringer og utnyttelse av standardteknologi, er Chartist.js i stand til å gi deg alt du trenger og ingenting mer.
Chartist.js takler bare ett problem: å gjøre det mulig for devs å tegne enkle, responsive diagrammer
Det største problemet jeg for øyeblikket legger merke til med mange biblioteker, er at de prøver å løse for mange problemer, og glemme det faktum at de er biblioteker og ikke applikasjoner. Jeg er sikker på at du har kommet i situasjoner der et bibliotek tilpasser alt, bortsett fra den ene tingen du virkelig vil tilpasse. Ved å bygge på nettstandarder kan du enkelt utvide funksjonaliteten til Chartist.js og skalere lineært.
Hacking av ditt første diagram
Nå som du har tatt Chartist.js med i prosjektet ditt, kan du fortsette og lage ditt første diagram. Biblioteket leveres med noen standardstiler som lett kan overstyres eller tilpasses med Sass (SCSS) -versjonen.
Hvis du vil bruke standardstiler, kan du ganske enkelt bruke det forhåndsbygde CST-klassen .ct-chart til å lage en beholder i HTML-en.
div class = ”ct-chart”> / div>
Det er allerede det for HTML-delen. Selvfølgelig er det opp til deg om du vil bruke en div>, eller et hvilket som helst annet element du mener samsvarer bedre med konteksten.
Chartist.Line ('. Ct-chart', {labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], series: [[0, 3, 2, 8, 9] , [1, 2, 3, 5, 8]]}, {bredde: '300px', høyde: '200px'});
Gratulerer, du har nettopp opprettet ditt første diagram ved hjelp av Chartist.js! Var det ikke et stykke kake? Men vent ... skal det ikke være et responsivt kartbibliotek? Selvfølgelig vil jeg ikke anbefale at du bruker faste dimensjoner for diagrammet ditt, basert på piksler, ikke sant?
Neste side: mer om hvordan du lager responsive diagrammer med Chartist.js
