Share
In de eerste inleidende Chart.js-zelfstudie van de serie, hebt u geleerd hoe u Chart.js in een project kunt installeren en gebruiken. U hebt ook informatie ontvangen over enkele algemene configuratie-opties die kunnen worden gebruikt om de lettertypen en tooltips van verschillende diagrammen te wijzigen. In deze zelfstudie leert u hoe u lijn- en staafdiagrammen maakt in Chart.js.
Lijndiagrammen zijn handig als u de waardewijzigingen van een bepaalde variabele wilt weergeven met betrekking tot de wijzigingen in een andere variabele. De andere variabele is meestal tijd. Lijndiagrammen kunnen bijvoorbeeld worden gebruikt om de snelheid van een voertuig tijdens specifieke tijdsintervallen weer te geven.
Met Chart.js kunt u lijndiagrammen maken door de type sleutel tot lijn. Hier is een voorbeeld:
var lineChart = new Chart (speedCanvas, type: 'line', data: speedData, options: chartOptions);
We zullen nu de gegevens leveren, evenals de configuratie-opties die we nodig hebben om het lijndiagram uit te zetten.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [label: "Car Speed", data: [ 0, 59, 75, 20, 20, 55, 40],]; var chartOptions = legend: display: true, position: 'top', labels: boxWidth: 80, fontColor: 'black';
Omdat we geen kleur voor het lijndiagram hebben opgegeven, de standaardkleur RGBA (0,0,0,0.1) zal gebruikt worden. We hebben geen wijzigingen aangebracht in de tooltip of de legenda. U kunt meer lezen over het wijzigen van de kratgrootte, de tooltip of de legenda in het eerste deel van de serie.
In dit deel zullen we ons concentreren op verschillende opties die specifiek beschikbaar zijn voor het wijzigen van lijndiagrammen. Alle opties en gegevens die we hierboven hebben verstrekt, maken de volgende grafiek.
De kleur van het gebied onder de curve wordt bepaald door de Achtergrond kleur sleutel. Alle lijndiagrammen die met deze methode zijn getekend, worden gevuld met de opgegeven kleur. U kunt de waarde van de instellen vullen sleutel tot vals als je alleen een lijn wilt tekenen en deze niet met een kleur wilt vullen.
Nog een ding dat je misschien gemerkt hebt, is dat we discrete gegevenspunten gebruiken om de grafiek uit te zetten. De bibliotheek interpoleert automatisch de waarden van alle andere punten met behulp van ingebouwde algoritmen.
Standaard worden de punten geplot met behulp van een aangepaste gewogen kubieke interpolatie. U kunt echter ook de waarde van de cubicInterpolationMode sleutel tot monotoon om punten nauwkeuriger uit te lijnen wanneer de grafiek die u berekent, wordt gedefinieerd door de vergelijking y = f (x). De spanning van de geplotte Bezier-curve wordt bepaald door de lineTension sleutel. U kunt de waarde op nul instellen om rechte lijnen te tekenen. Houd er rekening mee dat deze sleutel wordt genegeerd wanneer de waarde van cubicInterpolationMode is al opgegeven.
U kunt ook de waarde van de randkleur en de breedte instellen met behulp van de rand kleur en grensbreedte sleutels. Als u de grafiek wilt plotten met een stippellijn in plaats van een ononderbroken lijn, kunt u de borderDash sleutel. Het accepteert een array als de waarde waarvan de elementen respectievelijk de lengte en spatiëring van de streepjes bepalen.
Het uiterlijk van de uitgezette punten kan worden geregeld met behulp van de pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, en pointHoverRadius eigenschappen. Er is ook een pointHitRadius toets, die de afstand bepaalt waarmee de geplotte punten met de muis gaan interageren.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [label: "Car Speed", data: [ 0, 59, 75, 20, 20, 55, 40], lineTension: 0, opvulling: false, borderColor: 'orange', backgroundColor: 'transparent', borderDash: [5, 5], pointBorderColor: 'orange', pointBackgroundColor : 'rgba (255,150,0,0.5)', pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: 'rectRounded'];
Bovenstaande speedData object plot dezelfde gegevenspunten als de vorige grafiek, maar met aangepaste waarden ingesteld voor alle eigenschappen.
U kunt ook meerdere lijnen in één grafiek plotten en verschillende opties bieden om ze allemaal als volgt te tekenen:
var dataFirst = label: "Car A - Speed (mph)", data: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Set More Options; var dataSecond = label: "Auto B - snelheid (mph)", gegevens: [20, 15, 60, 60, 65, 30, 70], // Meer opties instellen; var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [dataFirst, dataSecond]; var lineChart = new Chart (speedCanvas, type: 'line', data: speedData);
Staafdiagrammen zijn handig als u een enkele statistiek voor verschillende entiteiten wilt vergelijken, bijvoorbeeld het aantal auto's dat door verschillende bedrijven wordt verkocht of het aantal mensen in bepaalde leeftijdsgroepen in een stad. U kunt staafdiagrammen maken in Chart.js door het type sleutel tot bar. Standaard maakt dit diagrammen met verticale balken. Als u diagrammen met horizontale balken wilt maken, moet u de type naar horizontale balk.
var barChart = new Chart (densityCanvas, type: 'bar', data: densityData, options: chartOptions);
Laten we een staafdiagram maken dat de dichtheid van alle planeten in ons zonnestelsel berekent. De dichtheidsgegevens zijn overgenomen van het Planetaire Informatieblad van de NASA.
var densityData = label: 'Density of Planets (kg / m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]; var barChart = new Chart (densityCanvas, type: 'bar', data: labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", " Neptune "], datasets: [densityData]);
De bovenstaande parameters zullen de volgende grafiek creëren:
Net als het lijndiagram zijn de balken deze keer ook gevuld met een lichtgrijze kleur. U kunt de kleur van de balken wijzigen met behulp van de Achtergrond kleur sleutel. Evenzo kunnen de kleur en breedte van de randen van verschillende balken worden opgegeven met behulp van de rand kleur en grensbreedte sleutels.
Als u wilt dat de bibliotheek het tekenen van de rand voor een bepaalde rand overslaat, kunt u die rand opgeven als een waarde van de borderSkipped sleutel. U kunt de waarde ervan instellen op top, links, bodem, of rechts. U kunt ook de rand- en achtergrondkleur van verschillende balken wijzigen wanneer ze zweven met behulp van de hoverBorderColor en hoverBackgroundColor sleutel.
De balken in het staafdiagram hierboven werden automatisch aangepast. U kunt echter de breedte van afzonderlijke balken regelen met behulp van de barThickness en barPercentage eigenschappen. De barThickness toets wordt gebruikt om de dikte van staven in pixels in te stellen, en barPercentage wordt gebruikt om de dikte in te stellen als een percentage van de beschikbare categoriebreedte.
U kunt ook een bepaalde as weergeven of verbergen met behulp van zijn tonen sleutel. De waarde van instellen tonen naar vals zal die specifieke as verbergen. U kunt meer over al deze opties lezen op de documentatiepagina.
Laten we de dichtheidstabel interessanter maken door de standaardwaarden voor staafdiagrammen te negeren met behulp van de volgende code.
var densityData = label: 'Density of Planets (kg / m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: ['rgba (0, 99, 132, 0.6 ) ',' rgba (30, 99, 132, 0.6) ',' rgba (60, 99, 132, 0.6) ',' rgba (90, 99, 132, 0.6) ',' rgba (120, 99, 132 , 0.6) ',' rgba (150, 99, 132, 0.6) ',' rgba (180, 99, 132, 0.6) ',' rgba (210, 99, 132, 0.6) ',' rgba (240, 99 , 132, 0.6) '], borderColor: [' rgba (0, 99, 132, 1) ',' rgba (30, 99, 132, 1) ',' rgba (60, 99, 132, 1) ', 'rgba (90, 99, 132, 1)', 'rgba (120, 99, 132, 1)', 'rgba (150, 99, 132, 1)', 'rgba (180, 99, 132, 1) ',' rgba (210, 99, 132, 1) ',' rgba (240, 99, 132, 1) '], borderWidth: 2, hoverBorderWidth: 0; var chartOptions = scale: yAxes: [barPercentage: 0.5], elements: rectangle: borderSkipped: 'left',; var barChart = new Chart (densityCanvas, type: 'horizontalBar', data: labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturnus", "Uranus", " Neptune "], datasets: [densityData],, options: chartOptions);
De densityData object wordt gebruikt om de rand en de achtergrondkleur van de balken in te stellen. Er zijn twee dingen die het vermelden waard zijn in de bovenstaande code. Ten eerste, de waarden van de barPercentage en borderSkipped eigenschappen zijn ingesteld in de chartOptions object in plaats van de dataDensity voorwerp.
Ten tweede, de grafiek type is ingesteld op horizontale balk deze keer. Dit betekent ook dat u de waarde van moet wijzigen barThickness en barPercentage voor de y-as in plaats van de x-as zodat ze een effect hebben op de balken.
De bovenstaande parameters zullen het volgende staafdiagram maken.
U kunt ook meerdere gegevensreeksen op dezelfde grafiek plotten door een ID kaart van de overeenkomstige as naar een bepaalde dataset. De xAxisID toets wordt gebruikt om de. toe te wijzen ID kaart van elke x-as naar uw dataset. Evenzo is de yAxisID toets wordt gebruikt om de. toe te wijzen ID kaart van elke y-as naar uw dataset. Beide assen hebben ook een ID kaart sleutel die u kunt gebruiken om unieke ID's aan hen toe te wijzen.
Als de laatste alinea een beetje verwarrend was, helpt het volgende voorbeeld dingen op te helderen.
var densityData = label: 'Density of Planet (kg / m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: 'rgba (0, 99, 132, 0.6) ', borderColor:' rgba (0, 99, 132, 1) ', yAxisID: "y-axis-density"; var gravityData = label: 'Gravity of Planet (m / s2)', data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0], backgroundColor: 'rgba (99, 132, 0, 0.6) ', borderColor:' rgba (99, 132, 0, 1) ', yAxisID: "y-axis-gravity"; var planetData = labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturnus", "Uranus", "Neptune"], datasets: [densityData, gravityData]; var chartOptions = scale: xAxes: [barPercentage: 1, categoryPercentage: 0.6], yAxes: [id: "y-axis-density", id: "y-axis-gravity"] ; var barChart = new Chart (densityCanvas, type: 'bar', data: planetData, options: chartOptions);
Hier hebben we twee y-assen gemaakt met unieke ID's en deze zijn toegewezen aan individuele gegevenssets met behulp van de yAxisID sleutel. De barPercentage en categoryPercentage hier zijn sleutels gebruikt om de staven voor afzonderlijke planeten samen te groeperen. omgeving categoryPercentage naar een lagere waarde vergroot de ruimte tussen de staven van verschillende planeten. Op dezelfde manier, instellen barPercentage naar een hogere waarde vermindert de ruimte tussen staven van dezelfde planeet.
In deze zelfstudie hebben we alle aspecten van lijndiagrammen en staafdiagrammen behandeld in Chart.js. U zou nu in staat moeten zijn om standaarddiagrammen te maken, hun uiterlijk aan te passen en meerdere gegevensreeksen op dezelfde grafiek uit te zetten zonder problemen. In het volgende deel van de serie leert u meer over de radar- en poolgebieddiagrammen in Chart.js.
Ik hoop dat je deze tutorial leuk vond. Als u vragen heeft, kunt u me dit laten weten in de opmerkingen.
Accentsconagua