Share
I de siste fire opplæringene har du lært mye om Chart.js. Etter å ha lest de første fire opplæringsprogrammene, bør du nå kunne tilpasse verktøytipsene og etikettene, endre skrifter og opprette forskjellige karttyper. Et aspekt av Chart.js som ennå ikke er dekket i denne serien er skalaer.
Vektene har endret seg mye siden versjon v1.0 av biblioteket og er nå mye kraftigere. I denne opplæringen vil du lære å manipulere skalaer og kontrollere utseendet deres ved hjelp av forskjellige alternativer som biblioteket gir.
Alle konfigurasjonsalternativene for rutenettlinjer er nestet under skalaalternativet i rutenett nøkkel. Denne nøkkelen definerer alternativer for å tilpasse gridlinjene som løper vinkelrett på aksene. La oss endre gridlinjene i linjediagrammet du opprettet i linjelinjen og linjediagrammer opplæringen.
Du kan vise eller skjule nettlinjene i et diagram ved hjelp av vise nøkkel. Den opprinnelige verdien er ekte, slik at rutenettene vises som standard. Fargen på rutenettene kan spesifiseres ved å bruke farge nøkkel. Hvis du vil at gridlinjene skal bestå av bindestrekker i stedet for å være faste linjer, kan du gi en verdi for lengden og avstanden mellom bindestreker som en verdi av borderDash nøkkel. Du kan angi bredden og fargen på linjene for den første eller nullindeksen ved hjelp av zeroLineWidth og zeroLineColor nøkler henholdsvis.
I alle diagrammer frem til dette punktet hadde vektene ingen beskrivende tekst for å la seerne vite hva en bestemt akse representerte. Dette kan gjøre diagrammer mindre nyttige. Hvis du for eksempel ser et kort om bilhastighet og ikke kan finne ut enheten der hastigheten er plottet på y-aksen, er diagrammet ganske mye ubrukelig.
Du kan vise eller skjule skalaenikettene på et diagram ved å bruke vise nøkkel. Skalaetikettene er gjemt som standard. Teksten som skal vises på disse skalaene kan spesifiseres ved hjelp av labelString nøkkel. Du kan også kontrollere skriftfarge, familie, størrelse og stil ved hjelp av skriftfarge, fontfamily, skriftstørrelse, og fontstil nøkler henholdsvis.
Her er det samme gamle bilhastighetsdiagrammet med et annet sett med kartalternativer angitt.
var chartOptions = legend: display: true, posisjon: 'top', etiketter: boxWidth: 80, fontColor: 'black', skalaer: xAxes: [gridLines: display: false, color: ", skalaLabel: display: true, labelString:" Time in Seconds ", fontColor:" red "], yAxes: [gridLines: color:" black ", borderDash: [2, 5] scaleLabel: display: true, labelString: "Hastighet i miles per time", fontColor: "green"];
Det er en nøkkel som heter offsetGridLines. Når satt til ekte, det skifter etikettene til midten av rutenettet. Dette er generelt nyttig når du oppretter strekdiagrammer.
Linjære skalaer brukes til å kartlegge numeriske data. Disse skalaene kan opprettes på enten x- eller y-aksen. I de fleste tilfeller oppdager Chart.js automatisk minimums- og maksimumverdiene for skalaene. Dette kan imidlertid føre til forvirring.
La oss si at du vil plotte karakterene til studenter i en klasse. Hvis maksimaltallene for testen var 200, men ingen av studentene fikk mer enn 180 poeng, vil skalaen sannsynligvis maksimere ut på 180. I slike tilfeller vil leserne ikke ha mulighet til å vite om maksimalkarakterene var 180 eller 200.
Chart.js har flere innebygde alternativer som lar deg kontrollere forskjellige nøkler for skalaer. Du kan angi minimum og maksimumsverdi for skalaer ved hjelp av min og max nøkler. Trinnstørrelsen på skalaene kan styres ved hjelp av Trinnstørrelse eiendom. På denne måten kan du avgjøre hvor mange gridlinjer som skal tegnes på diagrammet. En annen måte å sette en grense på antall gridlinjer og flått som vises på et diagram, er å bruke maxTicksLimit nøkkel.
Her er koden for å angi minimums- og maksimumskalaverdiene for den horisontale skalaen på linjediagrammet for en tidligere opplæring i denne serien.
var chartOptions = skalaer: yAxes: [barPercentage: 0.5, gridLines: display: false], xAxes: [gridLines: zeroLineColor: "black", nullLineWidth: 2, flått: min: 0, max: 6500, trinnstørrelse: 1300, skalaLabel: display: true, labelString: "tetthet i kg / m3", elementer: rektangel: borderSkipped: 'left',;
På samme måte som den lineære skalaen, kan du også lage logaritmiske skalaer for å plotte verdier på diagrammet. I dette tilfellet brukes logaritmisk interpolering for å bestemme posisjonen til et punkt på aksene. Disse skalaene kan også plasseres på både x-aksen og y-aksen.
Denne skala typen brukes til radar- og polarområdeskarttyper. I motsetning til den vanlige lineære skalaen overlegger denne kartområdet i stedet for å være plassert på aksen.
Det er mange nøkler som er spesielt rettet mot radiale skalaer. For eksempel kan du bruke lineArc nøkkel for å angi om nettlinjene skal være sirkulære eller rette. Standardverdien er falsk for radardiagrammer og ekte for polare arealdiagrammer.
Du kan kontrollere utseendet på linjer som utstråler fra midten av diagrammet til dets punktetiketter ved hjelp av angleLines nøkkel. Den aksepterer et objekt som dets verdi. Objektet kan inneholde nøkler for å kontrollere farge og bredde av vinkellinjer. Du kan skjule vinkellinjene ved å sette verdien av vise nøkkelen til falsk. Farge og bredde av vinkellinjer kan styres ved hjelp av farge og linje bredde nøkler.
Utseendet på punktetiketter kan styres ved hjelp av pointLabels nøkkel. På samme måte som vinkellinjer, aksepterer denne nøkkelen også et objekt som dets verdi. Vær oppmerksom på at disse alternativene bare har en effekt når verdien av lineArc er satt til falsk. Skriftfarge, familie, størrelse og stil kan spesifiseres ved hjelp av skriftfarge, fontfamily, skriftstørrelse, og fontstil nøkler.
Du kan også angi en minimums- og maksimumsverdi for skalaen ved hjelp av min og max nøkler. Trinnstørrelsen og maksimalt antall ticks på skalaen kan spesifiseres ved hjelp av Trinnstørrelse og maxTicksLimit nøkler. Disse alternativene er tilgjengelige under flått nøkkel. Noen andre nøkler tilgjengelig inne flått er showLabelBackdrop, backdropColor, backdropPaddingX, og backDropPaddingY. Du kan bruke dem til å vise eller skjule bakgrunnen bak merketikettene og kontrollere bredde, høyde og farge.
Du kan også bruke rutenett nøkkel som vi brukte for linjediagrammet for å angi en farge og bredde for rutenettlinjer i et radarplan. Her er noen alternativer for å lage et radarplan med tilpassede skalaer.
var chartOptions = skala: gridLines: color: "black", lineWidth: 3, angleLines: display: false, flått: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels : fontSize: 18, fontColor: "green", legend: posisjon: 'left';
Du kan bruke en tidsskala til å vise tider og datoer på et diagram. Som nevnt i den innledende Chart.js opplæringen må du inkludere Moment.js i prosjektene dine for å vise tid. En begrensning ved bruk av en tidsskala er at den bare kan vises på x-aksen. Alle konfigurasjonsalternativene for tidsskalaen er plassert under tid sub-alternativ.
For å opprette en tidsskala må du sette verdien av type nøkkelen til tid under xAxes sub-alternativet. Deretter kan du sette verdien av forskjellige nøkler under tid. Enheten som skal brukes til å tegne flåttene, er satt ved hjelp av enhet nøkkel.
Enhetenes trinn kan spesifiseres ved hjelp av unitStepSize nøkkel. Formatet der etikettene for kryssene skal vises, er spesifisert ved hjelp av displayFormats sub-alternativet. Du kan lese mer om tillatte strengformater på Moment.js nettsted.
Formatet der klokken vises i verktøytipsene, kan spesifiseres ved hjelp av tooltipFormat nøkkel.
Du kan også runde tiden før du plotter den på diagrammet ved hjelp av rund nøkkel. Vær forsiktig når du setter inn en verdi for rund. La oss si at du setter verdien til time og det er to ganger som må plottes på diagrammet. Hvis en gang er 5:30 og en annen er 5:50, vil de begge bli plottet på klokka 5:00. Setter verdien til minutt vil plotte dem på henholdsvis 5:30 og 5:50.
Linjediagrammet som ble tegnet i begynnelsen av opplæringen, kunne plottes ved hjelp av en tidsskala ved hjelp av følgende kode.
var chartOptions = legend: display: true, posisjon: 'top', etiketter: boxWidth: 80, fontColor: 'black', skalaer: xAxes: [type: "tid" 'time', unitStepSize: 0,5, runde: 'time', tooltipFormat: "h: mm: ss a", displayFormats: time: 'MMM D, h: mm A', yAxes: [gridLines: color: "black", borderDash: [2, 5], scaleLabel: display: true, labelString: "Hastighet i miles per time", fontColor: "green"];
Denne opplæringen hjalp deg med å lære om forskjellige typer skalaer i Chart.js. Du kan nå enkelt tilpasse skalaene i et diagram ved å kontrollere farge, minimum og maksimum verdi, antall flått og andre slike faktorer.
Etter å ha lest alle fem veiledningene i denne serien, bør du nå kunne lage alle slags diagrammer som er tilgjengelige i Chart.js. Jeg håper du likte opplæringen og serien.
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, vennligst gi meg beskjed i kommentarene. Har du noen gang brukt dette biblioteket i dine egne prosjekter? Vennligst del noen tips i kommentarene.
Accentsconagua