Share
De vorige zelfstudie van deze serie was gericht op het maken van lijn- en staafdiagrammen met Chart.js. Beide diagrammen hebben hun eigen gebruik en configuratie-opties die in de laatste zelfstudie uitvoerig zijn behandeld.
In deze zelfstudie leert u over twee nieuwe diagramtypen die kunnen worden gemaakt met Chart.js: radar- en poolgebieddiagrammen. Net als de vorige zelfstudie beginnen we met een kort overzicht van de diagramtypen en gaan we vervolgens naar een meer gedetailleerde discussie.
Lijn- en staafdiagrammen zijn handig als u slechts één of twee eigenschappen van een groot aantal objecten wilt vergelijken, bijvoorbeeld de populatie van alle Aziatische landen of het aantal verschillende verontreinigende stoffen in de atmosfeer..
Stel dat u de dichtheid, opaciteit, viscositeit, brekingsindex en het kookpunt van slechts drie verschillende vloeistoffen wilt vergelijken. Het maken van een staafdiagram voor deze gegevens is problematisch omdat u voor elke vloeistof vijf verschillende kolommen moet maken. Het zal ook moeilijk zijn om de overeenkomstige eigenschappen van de vloeistoffen te vergelijken.
In situaties waarin u veel eigenschappen van slechts enkele objecten moet vergelijken, is het maken van een radardiagram de meest efficiënte methode om gegevens te visualiseren en te vergelijken. Deze kaarten zijn ook bekend als spider charts.
Van Wikipedia is een radardiagram een grafische methode om multivariate gegevens weer te geven in de vorm van een tweedimensionaal diagram met drie of meer kwantitatieve variabelen die op assen worden weergegeven vanaf hetzelfde punt. De relatieve posities en hoeken van de assen zijn meestal niet-informatief.
Laten we nu onze eerste radardiagram maken. Radardiagrammen worden gemaakt door de type sleutel in Chart.js naar radar. Hier is een heel eenvoudig voorbeeld.
var radarChart = nieuwe kaart (marksCanvas, type: 'radar', data: marksData, options: chartOptions);
Laten we de cijfers van twee studenten van een klas uitzetten in vijf verschillende onderwerpen. Hier is de code om de gegevens te leveren voor het maken van de grafiek.
var marksData = labels: ["Engels", "Maths", "Physics", "Chemistry", "Biology", "History"], datasets: [label: "Student A", backgroundColor: "rgba (200, 0,0,0.2) ", data: [65, 75, 70, 80, 60, 80], label:" Student B ", backgroundColor:" rgba (0,0.200,0.2) ", data: [54 , 65, 60, 70, 70, 75]]; var radarChart = nieuwe kaart (marksCanvas, type: 'radar', data: marksData);
De eerste grafiek die we gewoonlijk maken, heeft geen achtergrondkleur die specifiek door ons is ingesteld. Radardiagrammen kunnen echter veel overlap hebben, waardoor het moeilijk is om de gegevenspunten correct te identificeren zonder enige kleurcodering.
Om deze reden is aan elke dataset een kleur toegewezen met behulp van de Achtergrond kleur sleutel. De volgende demo toont het eindresultaat van onze code. Zoals je ziet, is het nu heel gemakkelijk om de prestaties van beide studenten in verschillende onderwerpen te vergelijken.
Naast de achtergrondkleur kunt u ook de randkleur en randbreedte voor het diagram wijzigen met behulp van de rand kleur en grensbreedte sleutels. Het is ook mogelijk dat u gestreepte randen maakt in plaats van doorlopende lijnen met behulp van de borderDash sleutel. Deze sleutel accepteert een array als zijn waarde.
Het eerste element van de array bepaalt de lengte van de streepjes en het tweede element bepaalt de ruimte daartussen. U kunt ook een offsetwaarde opgeven om de streepjes te tekenen met behulp van de borderDashOffset sleutel.
U kunt ook de randkleur en -breedte voor geplotte punten regelen met behulp van de pointBorderColor en pointBorderWidth. Op dezelfde manier kunt u ook een achtergrondkleur voor verschillende punten instellen met behulp van de pointBackgroundColor sleutel. De grootte van de geplotte punten kan worden opgegeven met behulp van de pointRadius sleutel. U kunt de afstand waarmee de punten interactie met de muis moeten beginnen regelen met behulp van de pointHitRadius sleutel.
U kunt ook het uiterlijk van de geplotte punten op de zweeftekst regelen met behulp van de pointHoverBackgroundColor, pointHoverBorderColor en pointHoverBorderWidth sleutels. Een ding dat je moet onthouden, is dat deze zwevende toetsen niet wachten tot je daadwerkelijk over het element zweeft om getriggerd te worden. De wijzigingen worden van kracht zodra u zich binnen de hierboven aangegeven hitradius bevindt.
Er zijn veel vormen beschikbaar voor geplotte punten. Ze zijn standaard cirkelvormig. U kunt de vorm echter wijzigen in driehoek, rect, rectRounded, rectRot, kruis, crossRot, ster, lijn, en scheutje.
Laten we al deze toetsen gebruiken om het vorige radardiagram opnieuw te tekenen. Hier is de code voor configuratie-opties voor de datasets en de schalen.
var marksData = labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"], datasets: [label: "Student A", backgroundColor: "transparent", borderColor : "rgba (200,0,0,0,6)", vul in: false, radius: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "orange", pointBorderColor: "rgba (200,0,0,0.6)" , pointHoverRadius: 10, data: [65, 75, 70, 80, 60, 80], label: "Student B", backgroundColor: "transparent", borderColor: "rgba (0,0.200,0.6)", vullen : 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 = scale: ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels: fontSize: 18, legend: position: 'left';
Binnen in de chartOptions object, de min en max waarden worden gebruikt om de minimum- en maximumwaarden voor de schaal in te stellen. De stapgrootte sleutel kan worden gebruikt om Chart.js het aantal stappen te geven dat nodig is om vanaf te gaan min naar max. Hier is het eindresultaat van de bovenstaande code.
Grafieken van polaire gebieden zijn vergelijkbaar met cirkeldiagrammen. Twee belangrijke verschillen tussen deze grafieken zijn dat in poolgebiedgrafieken alle sectoren gelijke hoeken hebben en de straal van elke sector afhangt van de geplotte waarde. Deze diagrammen worden gebruikt om cyclische verschijnselen in kaart te brengen. U kunt het bijvoorbeeld gebruiken om het aantal trekvogels van een bepaalde soort in uw gebied uit te zetten in elk seizoen van het jaar.
De straal van elke sector in deze diagrammen is evenredig met de vierkantswortel van het aantal overeenkomstige objecten. In het geval van trekvogels is de straal evenredig met de vierkantswortel van het aantal vogels in uw gebied.
U kunt diagrammen voor poolgebieden maken in Chart.js door de type sleutel tot polarArea. Hier is de basiscode die u nodig hebt om een poolkaart te maken.
var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', data: birdsData, options: chartOptions);
Hier is de code om het aantal trekvogels in een poolgebieddiagram uit te zetten. De enige gegevens die op dit punt worden verstrekt, zijn het aantal vogels en de achtergrondkleur voor verschillende seizoenen.
var birdsData = labels: ["Lente", "Zomer", "Herfst", "Winter"], datasets: [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 = nieuwe kaart (birdsCanvas, type: 'polarArea', data: birdsData);
De bovenstaande code maakt het volgende diagram van het polaire gebied.
De poolgebiedgrafiek biedt de gebruikelijke opties om de Achtergrond kleur, grensbreedte, rand kleur, hoverBackgroundColor, hoverBorderWidth, en hoverBorderColor. Er zijn ook enkele specifieke toetsen in het poolgebied die u kunt gebruiken om hun uiterlijk aan te passen.
U kunt bijvoorbeeld de beginhoek voor de eerste waarde in de gegevensset instellen met behulp van de startAngle sleutel. Evenzo is de lineArc sleutel die te vinden is onder schaal kan worden gebruikt om aan te geven of de getrokken lijnen al dan niet cirkelvormig moeten zijn door de waarde ervan in te stellen waar of vals respectievelijk.
De sectoren in de poolgebiedgrafiek worden standaard geroteerd en geschaald. U kunt de schaalanimatie echter voorkomen door de waarde van de waarde in te stellen animateScale sleutel tot onwaar. Evenzo kan de roterende animatie worden uitgeschakeld door de waarde van de animateRotate sleutel tot onwaar. Beide sleutels zijn beschikbaar onder animatie.
De onderstaande code wijzigt de waarde van een paar toetsen om de grafiek visueel aantrekkelijker te maken.
var birdsData = labels: ["Lente", "Zomer", "Herfst", "Winter"], datasets: [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, 0.8) "]; var chartOptions = startAngle: -Math.PI / 4, legend: position: 'left', animation: animateRotate: false; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', data: birdsData, options: chartOptions);
Naast het roteren van de grafiek en het uitschakelen van de rotatie-animatie, hebben we ook de legenda links van de grafiek verplaatst door de waarde in te stellen positie naar links. Dit laat voldoende ruimte boven aan de kaart om deze correct weer te geven.
In deze tutorial leer je over de toepassingen van radar- en poolgebiedgrafieken. Daarna hebt u geleerd basisgrafieken te maken en deze aan te passen met verschillende configuratieopties die beschikbaar zijn in Chart.js. In het volgende deel van de serie leert u meer over taart- en bubbeldiagrammen.
Als u met internet werkt, vooral aan de voorkant, is JavaScript belangrijk om te weten. Natuurlijk, het is niet zonder zijn leercurves, en er zijn genoeg kaders en bibliotheken om je ook 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 u vragen over deze zelfstudie hebt, kunt u me dit laten weten in de opmerkingen.
Accentsconagua