Share
Du har lært om fire forskjellige karttyper i Chart.js frem til dette punktet. Den andre opplæringen av serien dekket linje og strekdiagrammer. Den tredje opplæringen diskuterte radar- og polare områdediagrammer. I denne opplæringen lærer du hvordan du bruker Chart.js for å lage kake, doughnut og bubble diagrammer.
Kakediagrammer er nyttige når du vil vise andelen hvor noe er delt mellom ulike enheter. For eksempel kan du bruke kakediagrammer til å vise prosentandelen av menn, kvinner og unge av løver i en dyrelivspark, eller prosentandelen stemmer som forskjellige kandidater fikk i valg.
Kakediagrammer er bare nyttige når du vil sammenligne en bestemt parameter eller sett med data. En viktig ting å huske på er at du ikke kan bruke kakediagrammer til å plotte enheter hvis verdier er null fordi vinkelen av sektorene i et kakediagram avhenger av størrelsen på datapunkter.
Dette betyr at enhver enhet hvis andel er null vil ikke bli vist på diagrammet i det hele tatt. På samme måte kan du ikke plotte negative verdier på et kakediagram. Du kan opprette sektordiagrammer i Chart.js ved å sette inn type nøkkelen til pai. På samme måte kan du lage doughnutdiagrammer ved å sette inn type nøkkelen til smultring. Her er et eksempel på å lage disse to diagrammene:
var pieChart = nytt diagram (votesCanvas, type: 'pie', data: votesData, alternativer: chartOptions); var doughnutChart = new Chart (votesCanvas, type: 'donut', data: votesData, alternativer: chartOptions);
La oss lage et kakediagram som viser oljeeksportdataene til de fem største landene i 2015. Dataene er i amerikanske milliarder dollar.
var data = etiketter: ["Saudi Arabia", "Russland", "Irak", "De forente arabiske emirater", "Canada"], datasett: [data: [133,3, 86,2, 52,2, 51,2, 50,2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"]];
Du kan kontrollere utseendet til diagrammet ovenfor ved hjelp av forskjellige taster som cutoutPercentage, som definerer prosentandelen av diagrammet som er skåret ut av midten. Du kan også angi startvinkelen til diagrammet ved hjelp av rotasjon nøkkel. På samme måte kan du også spesifisere vinkelen som diagrammet feier mens du plotter dataene ved hjelp av omkrets nøkkel.
Det er to forskjellige animasjoner som kan aktiveres mens du tegner et diagram. Du kan angi om diagrammet skal ha en rotasjonsanimasjon ved hjelp av animateRotate nøkkel. På samme måte kan du også angi om donutdiagrammet skal skaleres fra sentrum ved hjelp av animateScale nøkkel. Verdien av animateRotate er satt til ekte som standard, og verdien for animateScale er satt til falsk som standard.
Som vanlig kan du kontrollere bakgrunnsfarge, kantfarge og grensebredde for alle datapunkter ved hjelp av bakgrunnsfarge, grensefarge, og borderWidth nøkler henholdsvis. På samme måte kan hoververdiene for alle disse egenskapene styres ved hjelp av hoverBackgroundColor, hoverBorderColor, og hoverBorderWidth nøkler.
Her er koden for å lage et doughnutdiagram for de ovennevnte dataene. Angir verdien for rotasjon lik -Math.PI tar utgangspunktet 180 grader mot urviseren. Deretter setter du verdien av omkrets til Math.PI gjør diagrammet kun på en halvcirkel.
var oilData = etiketter: ["Saudi Arabia", "Russland", "Irak", "De forente arabiske emirater", "Canada"], datasett: [data: [133,3, 86,2, 52,2, 51,2, 50,2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"], borderColor: "black", borderWidth: 2]; var chartOptions = rotasjon: -Math.PI, cutoutPercentage: 30, omkrets: Math.PI, legend: posisjon: 'left', animasjon: animateRotate: false, animateScale: true;
Boble diagrammer brukes til å plotte eller vise tre dimensjoner (p1, p2, p3) av data på et diagram. Plasseringen og størrelsen på boblene bestemmer verdien av disse tre datapunktene. Den horisontale akse representerer det første datapunktet (p1), den vertikale aksen representerer det andre datapunktet (p2), og området for boblen brukes til å representere verdien av det tredje datapunktet (p3).
En ting du bør huske på er at størrelsen på det tredje datapunktet ikke er representert av radius av boblene, men deres område. Nå er området av en sirkel proporsjonal med radien av radiusen. Dette betyr at du må sørge for at radiusen til boblen du plottet er proporsjonal med kvadratroten av størrelsen på det tredje datapunktet.
Du kan lage boble diagrammer i Chart.js ved å sette verdien av type nøkkelen til boble. Her er et eksempel på å lage et boble diagram.
var bubbleChart = ny diagram (popCanvas, type: 'boble', data: popData, alternativer: chartOptions);
La oss plotte vekten av forskjellige elementer som holdes i et rom ved hjelp av et boble diagram. Dataene for diagrammet må sendes i form av et objekt. Dataobjektet må ha følgende grensesnitt for at det skal være plottet riktig.
x:, y: , r:
En viktig forskjell mellom boble diagrammer og alle andre diagrammer er at bobleradiusen ikke skaleres med diagrammet.
For eksempel kan bredden på stolper i et linjediagram øke eller redusere basert på diagrammets størrelse. Det samme skjer ikke med boble diagrammer. Radien til boblene er alltid lik det eksakte antall piksler du angav. Det er fornuftig fordi i denne diagramtypen er radiusen faktisk brukt til å representere ekte data.
La oss lage et boble diagram for å plotte hjortens populasjon på forskjellige steder i en skog.
var popData = datasett: [label: ['Deer Population'], data: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# FF9966"];
Siden radiusen her er proporsjonal med kvadratroten av den faktiske størrelsen, er antall hjort på (80, 80) 100 ganger mer enn antall hjort på (0, 100).
På samme måte som alle andre karttyper, kan du kontrollere bakgrunnsfarge, kantfarge og kantbredde av plottede punkter ved hjelp av bakgrunnsfarge, grensefarge, og borderWidth nøkler. På samme måte kan du også angi bakgrunnsfargen på svingeren, svinge grensefarge og sveve grensebredden ved hjelp av hoverBackgroundColor, hoverBorderColor, og hoverBorderWidth nøkler.
Du kan også angi tilleggsradiusen du vil legge til i forskjellige bobler på svever ved hjelp av hoverRadius nøkkel. Husk at denne radiusen er lagt til den opprinnelige verdien for å tegne den sveverede boblen. Hvis den opprinnelige boblen hadde en radius på 10 og hoverRadius er satt til 5, vil boblens radius på svinger være lik 15.
var popData = datasett: [label: ['Deer Population'], data: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# 9966FF", hoverBackgroundColor: "# 000000", hoverBorderColor: "# 9966FF", hoverBorderWidth: 5, hoverRadius: 5];
Ovennevnte parametere vil opprette følgende boble diagram.
I denne opplæringen lærte du om tre flere karttyper som er tilgjengelige i Chart.js. Du bør nå kunne velge riktig karttype for å plotte dataene dine og angi spesifikke verdier for forskjellige taster for å kontrollere utseendet deres. I den neste opplæringen lærer du hvordan du skal manipulere skalaene for forskjellige karttyper.
Jeg håper du likte denne opplæringen. Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene.
Accentsconagua