Aan de slag met Chart.js Inleiding

Mensen willen normaal gesproken niet een grote hoeveelheid gegevens doorgeven die hen in de vorm van tekst of tabellen wordt aangeboden. Meestal is dat omdat het saai is, maar wat nog belangrijker is, het is een beetje moeilijker om ruwe cijfers te verwerken. 

Hier is bijvoorbeeld een tabel met de tien meest bevolkte landen ter wereld:

Met slechts tien landen in deze tabel is er nog steeds een grote kans dat jij en andere lezers helemaal over de tafel gaan. Normaal gesproken kijken mensen alleen naar een of twee landen die hen interesseren. Als dezelfde gegevens in de vorm van een staafdiagram zouden zijn gepresenteerd, zou het zeer weinig tijd hebben gekost voordat iemand een ruw beeld zou krijgen van de bevolking in deze landen.. 

Bovendien zal het een stuk eenvoudiger zijn om trends of feiten te achterhalen - bijvoorbeeld, de Verenigde Staten zijn tweemaal zo bevolkt als Bangladesh, en China heeft ongeveer tien keer meer mensen dan Rusland - alleen al door te kijken naar de lengte van staven in de grafiek.

Een populaire bibliotheek die u kunt gebruiken om verschillende soorten diagrammen te maken, is Chart.js. In deze serie leer je over alle belangrijke aspecten van deze bibliotheek. Het kan worden gebruikt om mooie, responsieve grafieken te maken op HTML5 Canvas. 

Met de bibliotheek kunt u met gemak verschillende diagramtypen mengen en gegevens over datum, logaritmische of aangepaste schalen plotten. De bibliotheek biedt ook sport-out-of-the-box-animaties die kunnen worden toegepast bij het wijzigen van gegevens of het bijwerken van kleuren. 

Laten we aan de slag gaan met de installatie en dan gaan we verder met configuratie-opties en andere aspecten.

Installatie en gebruik

Je kunt de nieuwste versie van Chart.js downloaden via GitHub of de CDN-link gebruiken om deze in je projecten op te nemen. U kunt de bibliotheek ook installeren met NPM of prieel met behulp van de volgende opdrachten:

npm install chart.js --save bower installeer chart.js --save

De bibliotheek heeft twee verschillende versies. De normale versie, genaamd Chart.js en Chart.min.js, wordt geleverd met de Chart.js-bibliotheek en een kleurparser. Als u deze versie van de bibliotheek wilt gebruiken en besluit de tijdas in uw diagrammen te gebruiken, moet u de Moment.js-bibliotheek afzonderlijk opnemen voordat u Chart.js gebruikt.. 

De gebundelde versie, die wordt geïdentificeerd als Chart.bundle.js  of Chart.bundle.min.js, bevat al Moment.js. Op deze manier hoeft u geen twee afzonderlijke bestanden op te nemen. Een ding dat u in gedachten moet houden is om deze versie niet te gebruiken als u Moment.js al in uw project hebt opgenomen. Dit kan leiden tot versiekwesties.

Zodra u de bibliotheekversie die u wilt gebruiken hebt bedacht, kunt u deze in uw projecten opnemen en geweldige diagrammen maken.

Een diagram maken

Laten we de bevolkingslijst voorstellen die in de inleiding wordt gepresenteerd als een staafdiagram. De y-as wordt gebruikt om de populatie uit te zetten en de x-as wordt gebruikt om de landen uit te zetten. We beginnen met het maken van een canvas met id popChart.

De breedte en hoogte worden gebruikt om de afmetingen van de grafiek te bepalen. Bij het maken van responsieve diagrammen wordt de beeldverhouding van het diagram bepaald door de breedte en hoogte van het canvas.

Vervolgens moet u de tabel klasse. Dit kan worden gedaan door het knooppunt, de jQuery-instantie of de 2D-context van het canvas waarop u het diagram wilt tekenen, door te geven.

var popCanvas = $ ("# popChart"); var popCanvas = document.getElementById ("popChart"); var popCanvas = document.getElementById ("popChart"). getContext ("2d");

Het enige dat u nu hoeft te doen, is alle parameters aan de constructor doorgeven:

var barChart = new Chart (popCanvas, type: 'bar', data: labels: ["China", "India", "Verenigde Staten", "Indonesië", "Brazilië", "Pakistan", "Nigeria", "Bangladesh", "Rusland", "Japan"], datasets: [label: 'Population', data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398], backgroundColor: [ 'rgba (255, 99, 132, 0.6)', 'rgba (54, 162, 235, 0.6)', 'rgba (255, 206, 86, 0.6)', 'rgba (75, 192, 192, 0.6) ',' rgba (153, 102, 255, 0.6) ',' rgba (255, 159, 64, 0.6) ',' rgba (255, 99, 132, 0.6) ',' rgba (54, 162, 235, 0.6) ',' rgba (255, 206, 86, 0.6) ',' rgba (75, 192, 192, 0.6) ',' rgba (153, 102, 255, 0.6) ']]);

Het doorgegeven object in de tweede parameter bevat alle informatie die Chart.js nodig heeft om uw diagram te tekenen. De type toets wordt gebruikt om het type diagram op te geven dat u wilt tekenen. Het kan een van de volgende waarden hebben: lijn, bar, radar, polarArea, taart, donut, en bubbel. U leert over al deze diagramtypen in deze serie.

De gegevenssleutel bevat de werkelijke gegevens die u wilt plotten. De Achtergrond kleur toets wordt gebruikt om de kleur van verschillende staven in het diagram op te geven. Als de achtergrondkleur niet is opgegeven, is de standaardwaarde 'RGBA (0,0,0,0.1) is gebruikt. 

Elk van de diagrammen heeft ook zijn eigen specifieke toetsen die u kunt gebruiken om het uiterlijk te regelen. Hier is de grafiek gemaakt door de bovenstaande code:

In de bovenstaande demo kun je over de balken zweven om de exacte populatie in verschillende landen te zien. Wat nog opvalt, is dat de grootte van de kaart niet gelijk is aan de afmetingen die we hebben opgegeven, maar dat deze nog steeds dezelfde beeldverhouding heeft. 

Als u wilt dat de kaarten dezelfde grootte hebben op alle apparaten, moet u de waarde van de kaarten instellen sympathiek sleutel tot vals.

Configuratie-opties

De Chart.js-bibliotheek biedt u de mogelijkheid om alle aspecten van de diagrammen die u maakt aan te passen. U kunt bijvoorbeeld de kleur en breedte van de randen van de balken in het bovenstaande diagram wijzigen. U kunt ook de tooltips en de legenda aanpassen door de lettergrootte en kleur te wijzigen. In dit gedeelte leert u over verschillende toetsen die worden gebruikt om deze elementen te stijlen.

De bibliotheek heeft vier speciale globale sleutels die kunnen worden gebruikt om alle lettertypen in een diagram te wijzigen. Deze toetsen zijn defaultFontFamily, defaultFontSize, defaultFontStyle, en defaultFontColor. De tekengrootte is opgegeven in pixels en is niet van toepassing op radialLinear schaal punt labels. evenzo, defaultFontStyle is niet van toepassing op de titel of voettekst van het tooltip.

Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'blauw';

In de volgende grafiek worden de bovenstaande algemene lettertype-instellingen gebruikt. Door het uiterlijk op deze manier te veranderen, kunt u grafieken maken die in stijl overeenkomen met uw website.

U kunt ook de legenda wijzigen die in een diagram wordt weergegeven. De configuratie-opties moeten worden doorgegeven aan de options.legend namespace. U kunt ook de legenda-opties globaal opgeven voor alle kaarten die gebruikmaken van Chart.defaults.global.legend. De positie van de legenda wordt beheerd met behulp van de positie sleutel, die een van de volgende vier waarden kan accepteren: top, links, bodem, en rechts. U kunt de legenda ook weergeven of verbergen met behulp van de tonen sleutel.

Naast de legenda, kun je ook het uiterlijk van het label van de legenda regelen. De configuratie-opties worden ingesteld onder de legenda-configuratie met behulp van de label sleutel. De breedte van de kleurbox kan worden opgegeven met behulp van de boxWidth sleutel. Als er geen waarde is opgegeven, wordt de standaardwaarde 40 gebruikt. 

De lettertypefamilie, tekengrootte, letterkleur en tekenstijlwaarden worden standaard overgenomen van de globale configuratie. U kunt echter uw eigen waarden voor hen opgeven met lettertypegrootte, lettertype, fontFamily, en fontcolor.

var barChart = new Chart (popCanvas, type: 'bar', data: data, options: legend: display: true, position: 'bottom', labels: boxWidth: 80, fontColor: 'rgb (60, 180 , 100) ');

U kunt bepalen hoe tooltips lokaal worden getekend voor een diagram met behulp van de options.tooltips namespace. evenzo, Chart.defaults.global.tooltips kan worden gebruikt om de weergave van tooltips globaal in te stellen. Om te bepalen of tooltips aan de gebruiker gepresenteerd moeten worden, kunt u de ingeschakeld sleutel. Instellen op vals zal de tooltips uitschakelen. De standaardwaarde van deze sleutel is waar. 

U kunt ook het show / hide-gedrag van tooltips regelen met behulp van de snijden sleutel. Indien ingesteld op waar, wat ook de standaardwaarde van deze sleutel is, worden de tooltips alleen getoond als de muisaanwijzer daadwerkelijk interactie heeft met de balken. Indien ingesteld op vals, de tooltips worden getoond op basis van het gedrag gespecificeerd door de mode sleutel. 

De mode toets wordt gebruikt om te bepalen welk element wordt getoond in de tooltip. De standaardwaarde is dichtstbijzijnde. Dit betekent dat wanneer u instelt snijden naar vals, de tooltip wordt weergegeven voor de balk die zich het dichtst bij de muisaanwijzer bevindt.

Net als de legenda, kunt u ook de waarde van verschillende op lettertype gebaseerde eigenschappen voor knopinfo beheren. Het enige verschil is dat deze keer de waarden afzonderlijk moeten worden ingesteld voor de elementen title, body en footer van de tooltip. 

U kunt bijvoorbeeld de lettertype-eigenschappen van de body van de tooltip wijzigen met bodyFontFamily, bodyFontSize, bodyFontStyle, en bodyFontColor. De titel en het voetgedeelte van de knopinfo hebben ook extra eigenschappen genaamd titleMarginBottom en footerMarginTop. Ze kunnen worden gebruikt om wat extra ruimte tussen hen en de body van de tooltip toe te voegen. 

Op dezelfde manier kunt u extra vulling toevoegen aan de linker- / rechter- en boven- / onderkant van de tooltip met behulp van de xpadding en ypadding eigenschappen.

U kunt de grootte van de tooltippijl regelen met behulp van de caretSize sleutel. De achtergrond van de tooltips kan worden gewijzigd met behulp van de Achtergrond kleur sleutel.

var barChart = new Chart (popCanvas, type: 'bar', data: data, options: tooltips: cornerRadius: 0, caretSize: 0, xPadding: 16, yPadding: 10, backgroundColor: 'rgba (0, 150, 100, 0.9) ', titleFontStyle:' normaal ', titleMarginBodom: 15);

De bovenstaande opties verbergen de caret als caretSize staat op 0. Hier is een werkende demo die de opties in actie toont. Plaats de muisaanwijzer op de balken om de aangepaste knopinfo te bekijken.

Laatste gedachten

Deze zelfstudie bevatte een basisintroductie van de Chart.js-bibliotheek en liet u zien hoe u deze kunt gebruiken om staafdiagrammen te maken. U hebt ook geleerd over verschillende configuratie-opties die kunnen worden gebruikt om het uiterlijk van verschillende diagrammen te regelen. 

Hoewel we alleen staafdiagrammen in de zelfstudie hebben gebruikt, konden de configuratie-opties op alle diagramtypen worden toegepast. In de volgende zelfstudie leert u meer over lijndiagrammen en staafdiagrammen.

JavaScript is een van de de facto talen geworden om op het web te werken. Het is niet zonder zijn leercurven, en er zijn ook genoeg kaders en bibliotheken om je bezig te houden. 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 je vragen hebt over deze tutorial, laat me dit dan weten in de comments.

Merk op dat de populatiegegevens zijn opgehaald uit deze censusinformatie.