Share
Den forrige opplæringen i denne serien fokuserte på å lage linjer og linjediagrammer ved hjelp av Chart.js. Begge disse kartene har egne bruksområder og konfigurasjonsalternativer som ble dekket i detalj i den siste opplæringen.
I denne opplæringen lærer du om to nye karttyper som kan opprettes ved hjelp av Chart.js: radar og polar arealdiagrammer. På samme måte som forrige veiledning, starter vi med en kort oversikt over karttyper, og deretter flyttes til en mer detaljert diskusjon.
Linje- og linjediagrammer er nyttige når du bare vil sammenligne en eller to egenskaper av et stort antall objekter, for eksempel befolkningen i alle landene i Asia eller antall forskjellige forurensende stoffer i atmosfæren.
La oss si at du vil sammenligne tetthet, opasitet, viskositet, brytningsindeks og kokepunkt for bare tre forskjellige væsker. Å lage et strekdi for disse dataene vil være problematisk, da du må opprette fem forskjellige kolonner for hver væske. Det vil også være vanskelig å sammenligne de tilsvarende egenskapene til væskene.
I situasjoner hvor du må sammenligne mange egenskaper av bare noen få objekter, er det å skape et radarplan den mest effektive metoden for å visualisere og sammenligne data. Disse diagrammene er også kjent som edderkoppdiagrammer.
Fra Wikipedia er et radardiagram en grafisk metode for å vise multivariate data i form av et todimensjonalt diagram med tre eller flere kvantitative variabler representert på akser som starter fra samme punkt. De relative posisjoner og vinkler på aksene er typisk uinformative.
La oss lage vårt første radarskjema nå. Radardiagrammer opprettes ved å sette inn type tast inn Chart.js til radar. Her er et veldig grunnleggende eksempel.
var radarChart = nytt diagram (marksCanvas, type: 'radar', data: marksData, alternativer: chartOptions);
La oss plotte karakterene til to elever av en klasse i fem forskjellige fag. Her er koden for å gi dataene for å lage diagrammet.
varmerData = Etiketter: ["Engelsk", "Matematikk", "Fysikk", "Kjemi", "Biologi", "Historie"], datasett: [label: "Student A", backgroundColor: "rgba 0,0,0,2), data: [65, 75, 70, 80, 60, 80], label: "Student B", backgroundColor: "rgba (0,0,200,0,2)", data: , 65, 60, 70, 70, 75]]; var radarChart = nytt diagram (marksCanvas, type: 'radar', data: marksData);
Det første diagrammet som vi vanligvis lager, har ingen bakgrunnsfarge spesifikt satt av oss. Radardiagrammer kan imidlertid ha mye overlapping, noe som gjør det vanskelig å korrekt identifisere datapunkter uten fargekoding.
Av denne grunn har en farge blitt tildelt hvert datasett ved hjelp av bakgrunnsfarge nøkkel. Følgende demo viser det endelige resultatet av koden vår. Som du ser, er det nå veldig enkelt å sammenligne resultatene til begge studentene i ulike fag.
I tillegg til bakgrunnsfarge kan du også endre grensefarge og kantbredde for diagrammet ved hjelp av grensefarge og borderWidth nøkler. Det er også mulig for deg å lage stiplede grenser i stedet for kontinuerlige linjer ved hjelp av borderDash nøkkel. Denne nøkkelen aksepterer en matris som verdi.
Det første elementet i arrayet bestemmer lengden på bindestrekene, og det andre elementet bestemmer mellomrummet mellom dem. Du kan også gi en forskyvningsverdi for å tegne strekkene ved hjelp av borderDashOffset nøkkel.
Du kan også kontrollere grensefarge og bredde for plottede punkter ved hjelp av pointBorderColor og pointBorderWidth. På samme måte kan du også sette en bakgrunnsfarge for forskjellige punkter ved hjelp av pointBackgroundColor nøkkel. Størrelsen på de plottede punktene kan spesifiseres ved hjelp av pointRadius nøkkel. Du kan kontrollere avstanden hvor punktene skal begynne å interagere med musen ved hjelp av pointHitRadius nøkkel.
Du kan også kontrollere utseendet på de plottede punktene på hover ved hjelp av pointHoverBackgroundColor, pointHoverBorderColor og pointHoverBorderWidth nøkler. En ting du må huske er at disse svingnøklene ikke vil vente på at du faktisk skal svinge over elementet for å bli utløst. Endringene trer i kraft så snart du er innenfor hitradiusen som er angitt ovenfor.
Det er mange former tilgjengelig for plottet poeng. De er sirkulære som standard. Du kan imidlertid endre formen til triangel, rect, rectRounded, rectRot, kryss, crossRot, stjerne, linje, og bindestrek.
La oss bruke alle disse tastene til å omdøpe det forrige radarplanet. Her er koden for å gi konfigurasjonsalternativer for datasettene og skalaene.
var marksData = etiketter: ["Engelsk", "Matematikk", "Fysikk", "Kjemi", "Biologi", "Historie"], datasett: [label: "Student A", backgroundColor: "transparent", borderColor : "rgba (200,0,0,0,6)", fyll: false, radius: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "orange", pointBorderColor: "rgba (200,0,0,0,6)" , punktHoverRadius: 10, data: [65, 75, 70, 80, 60, 80], label: "Student B", backgroundColor: "transparent", borderColor: "rgba (0,0,200,0,6)" : false, radius: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "cornflowerblue", pointBorderColor: "rgba (0,0,200,0,6)", pointHoverRadius: 10, data: [54, 65, 60, 70, 70 , 75]]; var chartOptions = skala: ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels: fontSize: 18, legend: posisjon: 'left';
Inne i chartOptions objekt, den min og max verdier brukes til å angi minimums- og maksimumverdiene for skalaen. De Trinnstørrelse nøkkel kan brukes til å fortelle Chart.js antall trinn som det skal ta for å gå fra min til max. Her er det endelige resultatet av koden ovenfor.
Polare arealdiagrammer ligner pajediagrammer. To store forskjeller mellom disse diagrammene er at i polare områdediagrammer har alle sektorer like vinkler, og radiusen for hver sektor avhenger av den plottede verdien. Disse diagrammene brukes til å plotte sykliske fenomener. For eksempel kan du bruke den til å plotte antall trekkfugler av en bestemt art i ditt område i hver sesong av året.
Radien til hver sektor i disse diagrammene er proporsjonal med kvadratroten av antall tilsvarende objekter. I tilfelle av trekkfugler vil radiusen være proporsjonal med kvadratroten av antall fugler i ditt område.
Du kan opprette polare områdediagrammer i Chart.js ved å sette inn type nøkkelen til polarArea. Her er den grunnleggende koden du trenger for å lage et polart diagram.
var polarAreaChart = nytt diagram (birdsCanvas, type: 'polarArea', data: birdsData, alternativer: chartOptions);
Her er koden for å plotte antall trekkfugler på et polart områdediagram. De eneste dataene som er oppgitt på dette punktet, er antall fugler og bakgrunnsfarge for forskjellige årstider.
var birdsData = etiketter: ["Spring", "Summer", "Fall", "Winter"], datasett: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0,5) "," rgba (100, 255, 0, 0,5) "," rgba (200, 50, 255, 0,5) "," rgba (0, 100, 255, 0,5) "]]; var polarAreaChart = nytt diagram (birdsCanvas, type: 'polarArea', data: birdsData);
Ovennevnte kode vil opprette følgende polare arealdiagram.
Polarområdeskartet gir de vanlige alternativene for å stille inn bakgrunnsfarge, borderWidth, grensefarge, hoverBackgroundColor, hoverBorderWidth, og hoverBorderColor. Det er også noen spesifikke nøkler for polarområdet som du kan bruke til å tilpasse utseendet deres.
For eksempel kan du angi startvinkelen for den første verdien i datasettet ved hjelp av startAngle nøkkel. På samme måte, lineArc nøkkel som kan bli funnet under skala kan brukes til å spesifisere om linjene trukket skal være sirkulære eller ikke ved å sette verdien til ekte eller falsk henholdsvis.
Sektorene som er tegnet i polarområdediagrammet, roteres og skaleres som standard. Du kan imidlertid forhindre skaleringsanimasjonen ved å sette verdien av animateScale nøkkelen til falsk. På samme måte kan den roterende animasjonen slås av ved å sette verdien av animateRotate nøkkelen til falsk. Begge disse nøklene er tilgjengelige under animasjon.
Koden nedenfor endrer verdien av noen få taster for å gjøre diagrammet mer visuelt tiltalende.
var birdsData = etiketter: ["Spring", "Summer", "Fall", "Winter"], datasett: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0,6) "," rgba (0, 255,200, 0,6) "," rgba (200, 0, 200, 0,6) "," rgba (0, 255, 0, 0,6) "], borderColor:" rgba , 0, 0, 0,8) "]; var chartOptions = startAngle: -Math.PI / 4, legend: posisjon: 'left', animasjon: animateRotate: false; var polarAreaChart = nytt diagram (birdsCanvas, type: 'polarArea', data: birdsData, alternativer: chartOptions);
I tillegg til å rotere diagrammet og deaktivere rotasjonsanimasjonen, har vi også flyttet legenden til venstre for diagrammet ved å sette verdien av stilling til venstre. Dette gir nok plass på toppen av diagrammet for å vise det riktig.
I denne opplæringen lærte du om programmer av radar- og polare områdediagrammer. Deretter lærte du å lage grunnleggende diagrammer og tilpasse dem med ulike konfigurasjonsalternativer som er tilgjengelige i Chart.js. Du vil lære om kake og boble diagrammer i neste del av serien.
Hvis du jobber med nettet, spesielt på forsiden, er JavaScript viktig å vite. Selvfølgelig er det ikke uten sine læringskurver, 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, vennligst gi meg beskjed i kommentarene.
Accentsconagua