Share
In de laatste vier tutorials hebt u veel geleerd over Chart.js. Nadat u de eerste vier zelfstudies hebt gelezen, kunt u nu de tooltips en labels aanpassen, de lettertypen wijzigen en verschillende diagramtypen maken. Een aspect van Chart.js dat nog niet in deze serie is behandeld, is schalen.
Schalen zijn veel veranderd sinds versie v1.0 van de bibliotheek en zijn nu veel krachtiger. In deze zelfstudie leert u hoe u schalen manipuleert en hun uiterlijk beheert met behulp van de verschillende opties die de bibliotheek biedt.
Alle configuratie-opties voor rasterlijnen zijn genest onder de schaaloptie in de rasterlijnen sleutel. Deze sleutel definieert opties om de rasterlijnen aan te passen die loodrecht op de assen lopen. Laten we de rasterlijnen van de lijndiagram wijzigen die u in de zelfstudie voor lijn- en staafdiagrammen hebt gemaakt.
U kunt de rasterlijnen van een grafiek weergeven of verbergen met behulp van de tonen sleutel. De beginwaarde is waar, dus de rasterlijnen worden standaard getoond. De kleur van de rasterlijnen kan worden opgegeven met behulp van de kleur sleutel. Als u wilt dat de rasterlijnen worden samengesteld uit streepjes in plaats van vaste lijnen, kunt u een waarde opgeven voor de lengte en spatiëring van streepjes als een waarde van de borderDash sleutel. U kunt de breedte en kleur van de lijnen voor de eerste of de nulindex instellen met behulp van de zeroLineWidth en zeroLineColor toetsen respectievelijk.
In alle grafieken tot op dit punt hadden de schalen geen beschrijvende tekst om de kijkers te laten weten wat een bepaalde as vertegenwoordigde. Dit kan de grafieken minder handig maken. Als u bijvoorbeeld een grafiek van de snelheid van een auto ziet en niet kunt achterhalen in welke eenheid de snelheid op de y-as is uitgezet, is de grafiek vrijwel nutteloos.
U kunt de schaallabels op een grafiek weergeven of verbergen met behulp van de tonen sleutel. De schaallabels zijn standaard verborgen. De tekst die op deze schalen moet worden weergegeven, kan worden opgegeven met behulp van de labelString sleutel. U kunt ook de kleur, familie, grootte en stijl van het lettertype regelen met de fontcolor, fontFamily, lettertypegrootte, en lettertype toetsen respectievelijk.
Hier is dezelfde oude autosnelheidsgrafiek met een andere set diagramopties gespecificeerd.
var chartOptions = legend: display: true, position: 'top', labels: boxWidth: 80, fontColor: 'black', scales: xAxes: [gridLines: display: false, color: "black ", scaleLabel: display: true, labelString:" Time in Seconds ", fontColor:" red "], yAxes: [gridLines: color:" black ", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Speed in Miles per Hour", fontColor: "green"];
Er is nog een sleutel gebeld offsetGridLines. Indien ingesteld op waar, het verplaatst de labels naar het midden van de rasterlijnen. Dit is over het algemeen handig bij het maken van staafdiagrammen.
Lineaire schalen worden gebruikt voor het in kaart brengen van numerieke gegevens. Deze schalen kunnen op de x- of y-as worden gemaakt. In de meeste gevallen detecteert Chart.js automatisch de minimum- en maximumwaarden voor de schalen. Dit kan echter tot enige verwarring leiden.
Laten we zeggen dat je de cijfers van studenten in een klas wilt uitzetten. Als de maximale punten voor de test 200 waren, maar geen van de studenten meer dan 180 punten scoorde, zal de schaal hoogstwaarschijnlijk max. 180 zijn. In dergelijke gevallen kunnen de lezers niet weten of de maximale cijfers 180 of 200 waren.
Chart.js heeft meerdere ingebouwde opties waarmee u verschillende sleutels voor schalen kunt beheren. U kunt de minimum- en maximumwaarde voor schalen opgeven met behulp van de min en max sleutels. De stapgrootte van de schalen kan worden geregeld met behulp van de stapgrootte eigendom. Op deze manier kunt u bepalen hoeveel rasterlijnen op het diagram moeten worden getekend. Een andere manier om een limiet in te stellen voor het aantal rasterlijnen en tikken dat op een kaart wordt weergegeven, is om de maxTicksLimit sleutel.
Hier is de code om de minimum- en maximumschaalwaarden voor de horizontale schaal op het staafdiagram te specificeren voor een eerdere zelfstudie van deze reeks.
var chartOptions = scale: yAxes: [barPercentage: 0.5, gridLines: display: false], xAxes: [gridLines: zeroLineColor: "black", zeroLineWidth: 2, ticks: min: 0, max: 6500, stepSize: 1300, scaleLabel: display: true, labelString: "Density in kg / m3"], elements: rectangle: borderSkipped: 'left',;
Net als de lineaire schaal, kunt u ook logaritmische schalen maken om waarden in uw grafiek te plotten. In dit geval wordt logaritmische interpolatie gebruikt om de positie van een punt op de assen te bepalen. Deze schalen kunnen ook op zowel de x-as als de y-as worden geplaatst.
Dit schaaltype wordt gebruikt voor kaarttypen van het radar- en poolgebied. In tegenstelling tot de gewone lineaire schaal, overlapt deze het diagramgebied in plaats van dat het op de as is geplaatst.
Er zijn veel toetsen die specifiek op radiale schalen zijn gericht. U kunt bijvoorbeeld de gebruiken lineArc toets om aan te geven of de rasterlijnen cirkelvormig of recht moeten zijn. De standaardwaarde is vals voor radardiagrammen en waar voor kaarten met poolgebieden.
U kunt het uiterlijk bepalen van lijnen die vanuit het midden van het diagram naar de puntlabels wijzen met behulp van de angleLines sleutel. Het accepteert een voorwerp als zijn waarde. Het object kan sleutels bevatten om de kleur en breedte van hoeklijnen te regelen. U kunt de hoeklijnen verbergen door de waarde in te stellen tonen sleutel tot vals. De kleur en breedte van hoeklijnen kunnen worden geregeld met behulp van de kleur en lijnbreedte sleutels.
Het uiterlijk van puntlabels kan worden beheerd met behulp van de pointLabels sleutel. Net als hoeklijnen accepteert deze sleutel ook een object als waarde. Houd er rekening mee dat deze opties alleen een effect hebben wanneer de waarde van lineArc ingesteld op vals. De lettertypekleur, -familie, -grootte en -stijl kunnen worden opgegeven met behulp van de fontcolor, fontFamily, lettertypegrootte, en lettertype sleutels.
U kunt ook een minimum- en maximumwaarde voor de schaal instellen met behulp van de min en max sleutels. De stapgrootte en het maximale aantal tekens op de schaal kunnen worden opgegeven met behulp van de stapgrootte en maxTicksLimit sleutels. Deze opties zijn beschikbaar onder de teken sleutel. Sommige andere sleutels zijn beschikbaar binnenin teken zijn showLabelBackdrop, backdropColor, backdropPaddingX, en backDropPaddingY. U kunt ze gebruiken om de achtergrond achter de maatlabels weer te geven of te verbergen en de breedte, hoogte en kleur ervan te regelen.
U kunt ook de rasterlijnen sleutel die we hebben gebruikt voor het lijndiagram om een kleur en breedte in te stellen voor de rasterlijnen in een radardiagram. Hier zijn enkele opties om een radardiagram met aangepaste schalen te maken.
var chartOptions = scale: gridLines: color: "black", lineWidth: 3, angleLines: display: false, ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels : fontSize: 18, fontColor: "green", legend: position: 'left';
U kunt een tijdsschaal gebruiken om tijden en datums in een grafiek weer te geven. Zoals vermeld in de inleidende Chart.js-zelfstudie, moet u Moment.js opnemen in uw projecten om de tijd weer te geven. Een beperking op het gebruik van een tijdschaal is dat deze alleen op de x-as kan worden weergegeven. Alle configuratie-opties voor de tijdschaal bevinden zich onder de tijd sub-optie.
Om een tijdschaal te maken, moet u de waarde van de type sleutel tot tijd onder de xAxes sub-optie. Hierna kunt u de waarde van de verschillende toetsen hieronder instellen tijd. De eenheid die moet worden gebruikt om de teek te tekenen, wordt ingesteld met behulp van de eenheid sleutel.
De stap van het apparaat kan worden opgegeven met behulp van de unitStepSize sleutel. Het formaat waarin de labels voor de maat moeten worden weergegeven, wordt opgegeven met behulp van de displayFormats sub-optie. U kunt meer lezen over toegestane tekenreeksen op de Moment.js-website.
Het formaat waarin de tijd wordt weergegeven in de tooltips kan worden opgegeven met behulp van de tooltipFormat sleutel.
U kunt ook de tijd vóór het plotten op het diagram afronden met behulp van de ronde sleutel. Wees voorzichtig bij het instellen van een waarde voor ronde. Stel dat u de waarde ervan instelt uur en er moeten twee keer worden geplot op de kaart. Als de ene tijd 05.30 uur is en de andere 5.50 uur, worden beide op het 5:00 AM-vinkje geplot. De waarde instellen op minuut zal ze plotten op respectievelijk de 5:30 en 5:50 mark.
Het lijndiagram dat in het begin van de zelfstudie is geplot, kan worden geplot met behulp van een tijdschaal met behulp van de volgende code.
var chartOptions = legend: display: true, position: 'top', labels: boxWidth: 80, fontColor: 'black', scales: xAxes: [type: "time", time: unit: 'hour', unitStepSize: 0.5, round: 'hour', tooltipFormat: "h: mm: ss a", displayFormats: hour: 'MMM D, h: mm A'], yAxes: [gridLines: color: "black", borderDash: [2, 5],, scaleLabel: display: true, labelString: "Speed in Miles per Hour", fontColor: "green"];
Met deze zelfstudie hebt u geleerd over verschillende soorten schalen in Chart.js. U kunt nu eenvoudig de schalen in een grafiek aanpassen door hun kleur, minimale en maximale waarde, aantal tekens en andere dergelijke factoren te regelen.
Nadat u alle vijf zelfstudies in deze serie hebt gelezen, kunt u nu allerlei diagrammen maken die beschikbaar zijn in Chart.js. Ik hoop dat je de tutorial en de serie leuk vond.
Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats. Als u vragen heeft, kunt u me dit laten weten in de opmerkingen. Heeft u deze bibliotheek ooit in uw eigen projecten gebruikt? Geef enkele tips in de comments.
Accentsconagua