Chart.js bibliotek forenkler å legge til diagrammer til webapplikasjoner

Når det gjelder presentasjon av data, kommer det gamle ordtaket "et bilde er verdt tusen ord" til tankene. En fin linjediagram eller kakediagram kommuniserer på sekunder hva det kan ta en time å forklare med ord.

Desktop-brukere har mange alternativer for å jobbe med data og lage diagrammer, for eksempel Microsoft Excel og lignende tilbud i LibreOffice og OpenOffice.org. Plug-ins er tilgjengelige for nettpresentasjoner, men de kan være problematiske når de deles utover en liten gruppe. Imidlertid gjør teknologiutviklingen med HTML5 og JavaScript en pakke som Chart.js mulig.

Det tomme lerretet

Å lage diagrammer i nettleseren har alltid vært nødvendig, men det har ikke alltid en enkel eller konsekvent prosess. Tidligere har teknologier som ActiveX eller til og med Flash blitt brukt, men modningen av webteknologier med HTML5, CSS3 og JavaScript gjør det mye mer mulig i nettleseren. Mer spesifikt åpner Canvas-funksjonen i HTML5 døren for mer innholdsrike grafiske elementer på en webside.

I utgangspunktet brukes Canvas-elementet til å tegne grafikk mens du er på farten. Selve lerretselementet () er beholderen - et rektangelområde. Den har forskjellige metoder for å lage former og tekst og legge til bilder. Følgende eksempel lager et 300x300 svart rektangel med hvit tekst.

 TechRepublic.com - HTML Canvas eksempelfunksjon createCanvas () {var cvs = document.getElementById ('exampleCanvas'); var ctx = cvs.getContext ('2d'); ctext.fillStyle = '# 000'; ctext.fillRect (0, 0, 300, 300); ctext.fillStyle = '#fff'; ctext.font = 'fet 20px sans-serif'; ctext.fillText ('TechRepublic.com-regler!', 20, 50); } 

Chart.js-biblioteket bruker Canvas-elementet som lanseringspute for en fullpakket pakke for å lage og presentere diagrammer på nettet.

Velg diagramtypen

Chart.js er et fritt tilgjengelig (fullt utvidbart / tilpasses) bibliotek som er vert på GitHub. Den fullstendige kildefilen er 44kb; den minifiserte versjonen er bare 20 kb; og den faller til 4, 5k når den komprimeres. Det er ikke avhengig av noe annet bibliotek. Den bruker HTML Canvas-elementet, så nettleserstøtte er oppført på nettstedet som moderne nettlesere. eldre nettlesere støttes imidlertid via polyfiller, som er nedlastbar kode som gir fasiliteter som ikke er innebygd i en nettleser.

Du kan tilpasse Chart.js-biblioteket for å lage det diagrammet du visualiserer. Biblioteket tilbyr seks grunnleggende design som standard.

  • Linje: Vis dataene som toppene og dalene i en linjediagram.
  • Bar: Demonstrer trender med mange forskjellige formede stolper.
  • Radar: Presentere data akkurat som din lokale meteorolog.
  • Pai: Presentere data som skiver av den totale sirkelen.
  • Polarområde: Det er lettere å sitere dokumentasjonen på dette diagrammet, da det ligner på kakediagrammer. Variabelen er ikke omkretsen til segmentet, men radiusen til det.
  • Donut: Tenk på et kakediagram som presenteres i en smultringform. Den indre sirkelen eller hullet i midten kan tilpasses.

Grunnlaget for alt er Chart-objektet, som inneholder metoder for å lage og manipulere karttypene. Å bruke Chart-objektet er en enkel prosess. Følgende trinn gir den grunnleggende tilnærmingen til å lage diagrammer ved hjelp av biblioteket.

  1. Inkluder Chart.js-biblioteket på websiden.
  2. Lag et lerretselement på websiden.
  3. I skript, oppnå konteksten til Canvas-elementet.
  4. Sett sammen data som skal brukes til å fylle diagrammet.
  5. Lag diagrammet via skript - pass kontekstelement til kart og individuelle metoder for å lage diagramtype (data og alternativer som er sendt via metode).

Kartobjektet har metoder for hver diagramtype med navn som er enkle å huske som Bar, Donut, Line, Pie, PolarArea og Radar - syntaks som ikke kan være enklere. Det ene forbeholdet er at dataene blir sendt til hver av karttypene som en matrise med formatet avhengig av typen. Følgende eksempel lager et søylediagram som viser den nedadgående trenden i seire for Philadelphia Phillies fra 2010-2012.

 TechRepublic.com Eksempel funksjon createChart () {var data = {labels: "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", datasett: {fillColor: "rgba ( 225, 0, 0, 1) ", strokeColor:" rgba (225, 0, 0, 1) ", data: 12, 16, 13, 15, 18, 21}, {fillColor:" rgba (0, 26, 225, 1) ", strokeColor:" rgba (0, 26, 225, 1) ", data: 18, 16, 17, 17, 18, 16}, {fillColor:" rgba (24, 31, 28, 0.5) ", strokeColor:" rgba (24, 31, 28, 0.5) ", data: 11, 16, 9, 10, 17, 17}} var cht = document.getElementById ('trChart'); var ctx = cht.getContext ('2d'); var barChart = nytt diagram (ctx). Bar (data); } 

Som eksemplet viser, aksepterer søylediagrammet to matriser for etikettene og datasettet. Dataene har mange alternativer (dekket i dokumentasjonen), men vi bruker bare fyllfarge (for faktiske søyler) og dataene. Figur A viser diagrammet lastet i Chrome.

Figur A

Et eksempel på bruk av Chart.js søylediagram.

Konstruktøren for hver diagramtype godtar en ekstra valgfri parameter som kan brukes til å spesifisere de forskjellige formateringsalternativene. Disse lar deg endre egenskaper som skala, farger, skrift osv.

Neste kodebit endrer vårt forrige eksempel for å bruke noen av de tilgjengelige alternativene for å endre presentasjonen. Figur B viser diagrammet som er presentert ved hjelp av disse alternativene.

 funksjon createChart () {var data = {labels: "apr", "mai", "juni", "jul", "aug", "september", datasett: {fillColor: "rgba (225, 0, 0, 1) ", data: 12, 16, 13, 15, 18, 21}, {fillColor:" rgba (0, 26, 225, 1) ", data: 18, 16, 17, 17, 18, 16}, {fillColor: "rgba (24, 31, 28, 0, 5)", data: 11, 16, 9, 10, 17, 17}} var alternativer = {scaleOverlay: true, scaleShowGridLines: true, skalaOverride: true, scaleSteps: 4, scaleStepWidth: 5, skalaStartValue: 0, skalaLineColor: "rgba (0, 0, 0, .1)", scaleLineWidth: 1, skalaShowLabels: true, skalaFontSize: 16, skalaFontColor: "# 000", barDatasetSpacing: 2, barStrokeWidth: 2}; var cht = document.getElementById ('trChart'); var ctx = cht.getContext ('2d'); var barChart = nytt diagram (ctx) .Bar (data, opsjoner); } 

Figur B

Søylediagram med forskjellige alternativer benyttet.

Chart.js-dokumentasjonen sier at den fungerer med moderne nettlesere, men det kan være problemer med eldre nettlesere som Internet Explorer 7 eller 8. Dokumentasjonen inneholder informasjon om midlertidige løsninger for å støtte eldre nettlesere.

Å se er å tro

Jeg snublet over Chart.js-biblioteket mens jeg søkte etter en løsning på en annen utviklingsutfordring, men jeg holdt det i bakhodet for et annet prosjekt der klienten ønsket å inkludere diagrammer på nettstedet deres. Det var en intranettløsning, så nettleseren var noe kontrollert, selv om jeg ikke trengte å takle mange av problemene med eldre nettlesere. Biblioteket har prestert bra og gitt alt som trengs for prosjektet.

Chart.js lar deg raskt opprette og levere grunnleggende diagrammer. Det vil være interessant å se om eller hvordan biblioteket utvikler seg. Foreløpig fyller Chart.js-biblioteket et behov.

© Copyright 2021 | mobilegn.com