Share
U hebt tot nu toe vier verschillende diagramtypen in Chart.js geleerd. De tweede zelfstudie van de serie behandelde lijn- en staafdiagrammen. In de derde zelfstudie werden radar- en poolgebieddiagrammen besproken. In deze zelfstudie leert u hoe u Chart.js kunt gebruiken om taart-, ringdiagrammen en bellengrafieken te maken.
Cirkeldiagrammen en ringdiagrammen zijn handig als u de verhouding wilt weergeven waarin iets over verschillende entiteiten wordt verdeeld. U kunt bijvoorbeeld cirkeldiagrammen gebruiken om het percentage mannetjes, vrouwtjes en jongen van leeuwen in een dierenpark te laten zien, of het percentage stemmen dat verschillende kandidaten in een verkiezing hebben gekregen.
Cirkeldiagrammen zijn alleen handig als u een specifieke parameter of gegevensset wilt vergelijken. Een belangrijk ding om in gedachten te houden is dat je geen cirkeldiagrammen kunt gebruiken om entiteiten te plotten waarvan de waarden nul zijn, omdat de hoek van de sectoren in een cirkeldiagram afhangt van de grootte van de gegevenspunten.
Dit betekent dat elke entiteit waarvan het aandeel nul is, helemaal niet op de kaart wordt weergegeven. Op dezelfde manier kunt u geen negatieve waarden in een cirkeldiagram plotten. U kunt cirkeldiagrammen maken in Chart.js door de type sleutel tot taart. Op dezelfde manier kunt u ringdiagrammen maken door de type sleutel tot donut. Hier is een voorbeeld van het maken van deze twee diagrammen:
var pieChart = new Chart (votesCanvas, type: 'pie', data: votesData, options: chartOptions); var doughnutChart = new Chart (votesCanvas, type: 'doughnut', data: votesData, options: chartOptions);
Laten we een cirkeldiagram maken met de gegevens van de olie-export van de top vijf van landen in 2015. De gegevens zijn in Amerikaanse dollars.
var data = labels: ["Saoedi-Arabië", "Rusland", "Irak", "Verenigde Arabische Emiraten", "Canada"], datasets: [data: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"]];
U kunt het uiterlijk van de bovenstaande grafiek regelen met verschillende toetsen, zoals cutoutPercentage, die het percentage van de kaart definieert dat uit het midden wordt gesneden. U kunt ook de beginhoek van het diagram opgeven met behulp van de omwenteling sleutel. Op dezelfde manier kunt u ook de hoek opgeven die de grafiek veegt tijdens het plotten van de gegevens met behulp van de omtrek sleutel.
Er zijn twee verschillende animaties die kunnen worden geactiveerd tijdens het tekenen van een grafiek. U kunt opgeven of het diagram een rotatie-animatie moet hebben met behulp van de animateRotate sleutel. Op dezelfde manier kunt u ook opgeven of het ringdiagram uit het midden moet worden geschaald met behulp van de animateScale sleutel. De waarde van animateRotate ingesteld op waar standaard en de waarde voor animateScale ingesteld op vals standaard.
Zoals gewoonlijk kunt u de achtergrondkleur, randkleur en randbreedte van alle gegevenspunten beheren met behulp van de Achtergrond kleur, rand kleur, en grensbreedte toetsen respectievelijk. Evenzo kunnen de zweefwaarden van al deze eigenschappen worden beheerd met behulp van de hoverBackgroundColor, hoverBorderColor, en hoverBorderWidth sleutels.
Hier is de code om een ringdiagram te maken voor de bovenstaande gegevens. De waarde instellen voor omwenteling gelijk aan -Math.PI neemt dat beginpunt 180 graden tegen de klok in in. Vervolgens stelt u de waarde in van omtrek naar Math.PI zorgt ervoor dat de grafiek slechts een halve cirkel beslaat.
var oilData = labels: ["Saudi Arabia", "Russia", "Iraq", "United Arab Emirates", "Canada"], datasets: [data: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"], borderColor: "black", borderWidth: 2]; var chartOptions = rotation: -Math.PI, cutoutPercentage: 30, circumference: Math.PI, legend: position: 'left', animation: animateRotate: false, animateScale: true;
Ballonkaarten worden gebruikt om drie dimensies te plotten of weer te geven (p1, p2, p3) van gegevens in een grafiek. De positie en grootte van de bellen bepaalt de waarde van deze drie gegevenspunten. De horizontale as vertegenwoordigt het eerste gegevenspunt (p1), de verticale as vertegenwoordigt het tweede gegevenspunt (p2) en het gebied van de ballon wordt gebruikt om de waarde van het derde gegevenspunt weer te geven (p3).
Een ding dat u in gedachten moet houden is dat de grootte van het derde datapunt niet wordt weergegeven door de straal van de bubbels maar hun gebied. Het gebied van een cirkel is nu evenredig met het kwadraat van de straal. Dit betekent dat je ervoor moet zorgen dat de straal van de bubbel die je plot evenredig is met de vierkantswortel van de grootte van het derde datapunt.
U kunt bellengrafieken maken in Chart.js door de waarde van de type sleutel tot bubbel. Hier is een voorbeeld van het maken van een bellengrafiek.
var bubbleChart = nieuwe kaart (popCanvas, type: 'bubble', data: popData, options: chartOptions);
Laten we het gewicht van verschillende items in een ruimte plotten met behulp van een ballondiagram. De gegevens voor de grafiek moeten worden doorgegeven in de vorm van een object. Het data-object moet de volgende interface hebben om geplot te kunnen worden.
x:, y: , r:
Een belangrijk verschil tussen bellengrafieken en alle andere diagrammen is dat de bubbelradius niet wordt geschaald met de grafiek.
De breedte van staven in een staafdiagram kan bijvoorbeeld toenemen of afnemen op basis van de diagramgrootte. Hetzelfde gebeurt niet met bellengrafieken. De straal van de bubbels is altijd gelijk aan het exacte aantal pixels dat u hebt opgegeven. Logisch, omdat in dit grafiektype de straal feitelijk wordt gebruikt om echte gegevens weer te geven.
Laten we een bellengrafiek maken om de populatie herten op verschillende plaatsen in een bos uit te zetten.
var popData = datasets: [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"];
Aangezien de straal hier evenredig is met de vierkantswortel van de werkelijke grootte, is het aantal herten bij (80, 80) 100 keer meer dan het aantal herten bij (0, 100).
Net als alle andere diagramtypen, kunt u de achtergrondkleur, randkleur en randbreedte van geplotte punten regelen met behulp van de Achtergrond kleur, rand kleur, en grensbreedte sleutels. U kunt ook de achtergrondkleur van de zweeftekst, de randkleur van de zweeftekst en de breedte van de zweefrand opgeven met behulp van de hoverBackgroundColor, hoverBorderColor, en hoverBorderWidth sleutels.
U kunt ook de extra straal opgeven die u aan de verschillende luchtbellen wilt toevoegen tijdens de zweeftekst met behulp van de hoverRadius sleutel. Onthoud dat deze straal is toegevoegd aan de oorspronkelijke waarde om de zwevende luchtbel te tekenen. Als de oorspronkelijke bubbel een straal van 10 en had hoverRadius is ingesteld op 5, de straal van de bubble on hover is gelijk aan 15.
var popData = datasets: [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];
De bovenstaande parameters zullen het volgende bellengrafiek creëren.
In deze zelfstudie hebt u informatie ontvangen over nog drie diagramtypen die beschikbaar zijn in Chart.js. U moet nu het juiste diagramtype kunnen kiezen om uw gegevens te plotten en specifieke waarden in te stellen voor verschillende sleutels om hun uiterlijk te bepalen. In de volgende zelfstudie leert u hoe u de schalen manipuleert voor verschillende grafiektypen.
Ik hoop dat je deze tutorial leuk vond. Als u vragen heeft, kunt u me dit laten weten in de opmerkingen.
Accentsconagua