Komme i gang med Chart.js Introduksjon

Folk vil normalt ikke gå gjennom en stor mengde data presentert for dem i form av tekst eller tabeller. For det meste er det fordi det er kjedelig, men enda viktigere er det litt vanskeligere å behandle rånumre. 

For eksempel, her er en tabell av de ti mest folkerike landene i verden:

Med bare ti land i denne tabellen er det fortsatt en veldig god sjanse for at du og andre lesere vil hoppe over bordet helt. Normalt ser folk bare på ett eller to land som interesserer dem. Hvis de samme dataene hadde blitt presentert i form av et strekdiagram, ville det ha tatt svært lite tid for noen å få en grov ide om befolkningen i disse landene. 

Videre vil det være mye lettere å finne ut trender eller fakta. For eksempel er USA dobbelt så populært som Bangladesh, og Kina har omtrent ti ganger flere mennesker enn Russland - bare ved å se lengden på stolpene i diagrammet.

Et populært bibliotek som du kan bruke til å lage forskjellige typer diagrammer, er Chart.js. I denne serien lærer du om alle viktige sider ved dette biblioteket. Det kan brukes til å lage fancy, responsive diagrammer på HTML5 Canvas. 

Biblioteket lar deg enkelt kombinere forskjellige karttyper og plottdata på datatid, logaritmiske eller tilpassede skalaer. Biblioteket har også idrett utenom boks animasjoner som kan brukes når du endrer data eller oppdaterer farger. 

La oss begynne med installasjonen, og så fortsetter vi til konfigurasjonsalternativer og andre aspekter.

Installasjon og bruk

Du kan enten laste ned den nyeste versjonen av Chart.js fra GitHub eller bruke CDN-lenken for å inkludere den i prosjektene dine. Du kan også installere biblioteket ved hjelp av NPM eller Lysthus ved hjelp av følgende kommandoer:

npm installer chart.js - save bower install chart.js --save

Biblioteket har to forskjellige versjoner. Den vanlige versjonen, kalt Chart.js og Chart.min.js, leveres med Chart.js-biblioteket og en fargeparser. Hvis du vil bruke denne versjonen av biblioteket og bestemmer deg for å bruke tidsaksen i diagrammene dine, må du separat inkludere Moment.js-biblioteket før du bruker Chart.js. 

Den medfølgende versjonen, som er identifisert som Chart.bundle.js  eller Chart.bundle.min.js, inkluderer allerede Moment.js. På denne måten trenger du ikke å inkludere to separate filer. En ting du må huske på, er ikke å bruke denne versjonen hvis du allerede har tatt med Moment.js i prosjektet. Dette kan føre til versjonsproblemer.

Når du har funnet ut bibliotekversjonen du vil bruke, kan du inkludere den i prosjektene dine og begynne å lage flotte diagrammer.

Opprette et diagram

La oss representere populasjonstabellen som presenteres i introduksjonen som et strekdiagram. Y-aksen vil bli brukt til å plotte befolkningen, og x-aksen vil bli brukt til å plotte landene. Vi begynner med å lage et lerret med id popChart.

Bredden og høyden brukes til å bestemme dimensjonene på diagrammet. Når du oppretter responsive diagrammer, bestemmes størrelsesforholdet for diagrammet av lerretets bredde og høyde.

Deretter må du instantiere Chart klasse. Dette kan gjøres ved å sende noden, jQuery-forekomsten eller 2d-konteksten til lerretet som du vil tegne diagrammet på.

var popCanvas = $ ("# popChart"); var popCanvas = document.getElementById ("popChart"); var popCanvas = document.getElementById ("popChart"). getContext ("2d");

Det eneste du må gjøre nå er å sende alle parametrene til konstruktøren:

var barChart = ny figur (popCanvas, type: 'bar', data: etiketter: ["Kina", "India", "USA", "Indonesia", "Brasil", "Pakistan", "Nigeria" "Bangladesh", "Russland", "Japan"], datasett: [label: 'Population', data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398], backgroundColor: 'rgba (255, 99, 132, 0,6)', 'rgba (54, 162, 235, 0,6)', 'rgba (255, 206, 86, 0,6)', 'rgba (75, 192, 192, 0,6) ',' rgba (255, 99, 132, 0,6) ',' rgba (54, 162, 235, 0,6) ',' rgba (255, 206, 86, 0,6) ',' rgba (75, 192, 192, 0,6) ',' rgba (153, 102, 255, 0,6) ');

Objektet som passeres i den andre parameteren inneholder all den informasjonen som Chart.js trenger å tegne diagrammet ditt. De type nøkkel brukes til å angi hvilken type diagram du vil tegne. Det kan ha noen av følgende verdier: linje, Bar, radar, polarArea, pai, smultring, og boble. Du vil lære om alle disse karttyper i denne serien.

Datanøkkelen inneholder de faktiske dataene du vil plotte. De bakgrunnsfarge nøkkel brukes til å angi fargen på forskjellige barer i diagrammet. Når bakgrunnsfargen ikke er angitt, er standardverdien 'RGBA (0,0,0,0.1)' benyttes. 

Hver av kartene har også sine egne spesifikke nøkler som du kan bruke til å kontrollere utseendet. Her er diagrammet opprettet av koden ovenfor:

I ovennevnte demo kan du svinge over stolpene for å se den eksakte befolkningen i forskjellige land. En ting verdt å merke seg er at størrelsen på diagrammet ikke er lik dimensjonene vi oppgav, men det har fortsatt samme størrelsesforhold. 

Hvis diagramene skal ha samme størrelse på alle enheter, må du sette verdien av mottakelig nøkkelen til falsk.

Konfigurasjonsalternativer

Chart.js-biblioteket gir deg muligheten til å tilpasse alle aspekter av diagrammene du lager. For eksempel kan du endre farge og bredde på kantene til stolpene i diagrammet ovenfor. Du kan også endre verktøytipsene og legenden ved å endre skriftstørrelsen og fargen. I denne delen lærer du om forskjellige nøkler som brukes til å utforme disse elementene.

Biblioteket har fire spesielle globale nøkler som kan brukes til å endre alle skrifttyper i et diagram. Disse tastene er defaultFontFamily, defaultFontSize, defaultFontStyle, og defaultFontColor. Skriftstørrelsen er angitt i piksler og gjelder ikke for radialLinear skalapunktetiketter. på samme måte, defaultFontStyle gjelder ikke for verktøytipsens tittel eller bunntekst.

Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'blue';

Følgende diagram bruker de ovennevnte globale skriftinnstillingene. Endring av utseendet på denne måten kan hjelpe deg med å lage diagrammer som samsvarer med nettstedet ditt i stil.

Du kan også endre legenden som vises i et diagram. Konfigurasjonsalternativene må sendes inn i options.legend navnerom. Du kan også spesifisere leggen alternativer globalt for alle diagrammer ved hjelp av Chart.defaults.global.legend. Legenden til legenden styres ved hjelp av stilling nøkkel, som kan akseptere en av følgende fire verdier: topp, venstre, bunn, og Ikke sant. Du kan også vise eller skjule legenden ved å bruke vise nøkkel.

Foruten legenden kan du også kontrollere utseendet til legendenes etikett. Dens konfigurasjonsalternativer er satt under legenden konfigurasjonen ved hjelp av merkelapp nøkkel. Bredden på fargeboksen kan spesifiseres ved hjelp av boxWidth nøkkel. Når ingen verdi er angitt, brukes standardverdien 40. 

Skrifttypefamilien, skriftstørrelsen, skriftfarge og skrifttypestilverdier er arvet fra den globale konfigurasjonen som standard. Du kan imidlertid angi dine egne verdier for dem som bruker skriftstørrelse, fontstil, fontfamily, og skriftfarge.

var barChart = nytt diagram (popCanvas, type: 'bar', data: data, alternativer: legend: display: true, position: 'bottom', etiketter: boxWidth: 80, fontColor: 'rgb (60, 180 , 100) ');

Du kan kontrollere måten verktøytipsene er lokalt tegnet for et diagram ved hjelp av options.tooltips navnerom. på samme måte, Chart.defaults.global.tooltips kan brukes til å angi utseendet på verktøytips globalt. For å angi om verktøytips skal presenteres for brukeren, kan du bruke aktivert nøkkel. Setter den til falsk vil deaktivere verktøytipsene. Standardverdien til denne nøkkelen er ekte. 

Du kan også kontrollere showen / skjule oppførselen til verktøytipsene ved hjelp av krysse nøkkel. Når satt til ekte, som også er standardverdien til denne nøkkelen, vises verktøytipsene bare når musepekeren faktisk samhandler med stolpene. Når satt til falsk, verktøytipsene vises basert på oppførselen spesifisert av modus nøkkel. 

De modus nøkkel brukes til å bestemme hvilket element som er vist i verktøylippen. Standardverdien er nærmeste. Dette betyr at når du setter inn krysse til falsk, verktøytipset vil bli vist for linjen som er nærmest musepekeren.

På samme måte som legenden, kan du også kontrollere verdien av forskjellige skriftbaserte egenskaper for verktøylinjer. Den eneste forskjellen er at denne gangen verdiene må settes individuelt for tittel-, kropps- og bunntekstelementene i verktøytipset. 

For eksempel kan du endre skriftegenskapene til verktøytipsets kropp ved hjelp av bodyFontFamily, bodyFontSize, bodyFontStyle, og bodyFontColor. Tittelen og bunnteksten til verktøytipset har også flere egenskaper som kalles titleMarginBottom og footerMarginTop. De kan brukes til å legge til litt ekstra mellomrom mellom dem og verktøylippens kropp. 

På samme måte kan du legge til ekstra utfylling til venstre / høyre og øverste / nedre side av verktøytipset ved hjelp av xPadding og yPadding eiendommer.

Du kan kontrollere størrelsen på verktøytip-pilen ved hjelp av caretSize nøkkel. Bakgrunnen til verktøytipsene kan endres ved hjelp av bakgrunnsfarge nøkkel.

var barChart = nytt diagram (popCanvas, type: 'bar', data: data, alternativer: verktøytips: cornerRadius: 0, caretSize: 0, xPadding: 16, yPadding: 10, backgroundColor: 'rgba (0, 150, 100, 0,9) ', titleFontStyle:' normal ', titleMarginBottom: 15);

Ovennevnte alternativer vil gjemme karmen som caretSize er satt til 0. Her er en fungerende demo som viser alternativene i aksjon. Prøv å sveve over stolpene for å se det tilpassede verktøytipset.

Siste tanker

Denne opplæringen ga en grunnleggende introduksjon av Chart.js biblioteket og viste deg hvordan du bruker den til å lage bardiagrammer. Du har også lært om forskjellige konfigurasjonsalternativer som kan brukes til å kontrollere utseendet til forskjellige diagrammer. 

Selv om vi bare brukte bardiagrammer i opplæringen, kan konfigurasjonsalternativene brukes på alle karttyper. I neste veiledning vil du lære mer om linjediagrammer og linjediagrammer.

JavaScript har blitt et av de de facto språkene som fungerer på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.

Hvis du har spørsmål om denne opplæringen, gi meg beskjed i kommentarene.

Vær oppmerksom på at populasjonsdataene ble hentet fra denne folketellingen.