Om een gebogen lijngrafiek te maken met Chart.js, bekijken we een voorbeeld van twee studenten, A en B, die cijfers hebben gekregen voor vijf vakken.
Maak in je projectmap een bestand aan lg.html. Maak een map met de naam 'css' en voeg een bestand toe lg.css erin. Maak vervolgens een map met de naam “js” aan en voeg lg.js bestand. In dit bestand maakt u een lijngrafiek.
line.html
Voeg de bestanden Chart.js en jQuery toe aan je project. In de kop, geeft u de lg.css bestand.
<link type="text/css" rel="stylesheet" href="css/lg.css" />
Maak een div tag in de HTML-body en wijs er een klasse aan toe chart-container eraan toe. Maak nu een canvas en geef het een id, zoals lg-chartcanvas.
<div class="section__codeStyle">
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
</div>
Geef ten slotte het lg.js-javascriptbestand op. Zo ziet je lg.html-bestand er in zijn geheel uit.
<!DOCTYPE html>
<html>
<head>
<title>Hoe maak je een gebogen lijngrafiek</title>
<link type="text/css" rel="stylesheet" href="css/lg.css" />
</head>
<body>
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/line.js"></script>
</body>
</html>
lg.css
Vervolgens moet je je html van de pagina met CSS. Deze code stelt de breedte, hoogte en marge in voor de klasse .chart-container. Voeg de volgende code eraan toe.
.chart-container {
width: 70%;
height: 380px;
margin: 0 auto;
}
JavaScript
Nu is het tijd om aan ons hoofddoel te werken: een gebogen lijndiagram maken met Chart JS.
Eerst moet u de canvas door te verwijzen naar het id lg-chartcanvas.
var getCanvas = $("#lg-chartcanvas");
Hier hebt u veel opties om de grafiek te maken. Hiervoor moet u een opt objectvariabele en pas een aantal eigenschappen aan. Zo kun je bijvoorbeeld responsive naar true om je grafiek responsief te maken.
Om de titel van de lijngrafiek te maken, moet u het volgende wijzigen in de titel data-object.
- display – Wijzig dit in true zodat de titel verschijnt.
- position – Wijzig dit naar boven zodat de titel bovenaan de grafiek wordt geplaatst.
- tekst – Wijzig dit in lijndiagram.
- fontSize – Hiermee past u de tekstgrootte van de titel aan
- fontColor – Hiermee past u de tekstkleur van de titel aan.
Om een legenda toe te voegen aan de lijngrafiek, pas je de volgende eigenschap aan in legenda.
- Display – Wijzig dit in true zodat de legenda wordt weergegeven.
- Position – Wijzig dit naar bottom om de positie van de legenda op te geven.
- Label – Pas hiermee de tekstkleur en -grootte van de legenda aan.
//opt
var opt = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Chart",
fontSize: 12,
fontColor: "#222"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#444",
fontSize: 14
}
}
};
Gegevens
Maak een coures variabele om de cijfers van beide studenten voor 5 vakken op te slaan. Een array labels wordt gebruikt om de naam van de cursussen te initialiseren, terwijl coursesinfo is een array bestaande uit twee objecten die de cijfers van elke student weergeven.
Elementen in de coursesinfo bestaan uit de volgende eigenschappen.
- label – Dit toont een label wanneer je met de muis over dat punt beweegt.
- data – Een array waarin de cijfers van elke leerling worden opgeslagen.
- backgroundColor – Geeft de hexadecimale waarde op voor de punten van het lijndiagram.
- borderColor – Geeft de kleurnaam op in de vorm van een hexadecimale waarde.
- fill – Stel in op false
- lineTension – Dit is de belangrijkste eigenschap, omdat deze waarde bepaalt of de grafiek recht of gebogen zal zijn. Je kunt hem gebogen maken door de waarde hoger dan 0 in te stellen.
- radius – Geeft de straal van een punt op voor de markeringen van elke reeks.
U moet een grafiekvariabele genereren om de Chart-klasse te instantiëren. Omdat het canvas en het data-object zijn opgeslagen in getCanvas, kunt u het moeten doorgeven. Het data-object heeft line voor de eigenschap type, courses variabele voor de eigenschap data en opt voor de eigenschap options.
Hier is de volledige JavaScript-code.
$(function(){
//roep het canvas van de lijngrafiek aan vanuit HTML
var getCanvas = $("#line-chartcanvas");
//gegevens in courses
var courses = {
labels: ["Calculus", "Programming Paradigms", "Data Structures", "Introduction to Relational Databases", "Computer Graphics"],
coursesdata: [{
label: "Student A",
marks: [70, 83, 79, 87, 76],
backgroundColor: "green",
borderColor: "lightblue",
fill: false,
lineTension: 0.4,
radius: 6
},
{
label: "Student B",
marks: [80, 75, 60, 79, 72],
backgroundColor: "red",
borderColor: "lightblue",
fill: false,
lineTension: 0.4,
radius: 6
}]
};
//opt
var opt = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Chart",
fontSize: 16,
fontColor: "#444"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#555",
fontSize: 14
}
}
};
//maak het Chart-klasseobject aan
var chart = new Chart(getCanvas, {
type: "line",
marks: marks,
opt: opt
});
});
U kunt deze gebogen lijngrafiek omzetten in een rechte door de waarde van lineTension op 0 in te stellen.
Tot slot
Nu je weet hoe je een gebogen lijndiagram maakt, help je jezelf om de kwaliteit van je werk te verbeteren. Wil je meer weten over het maken van diagrammen, bezoek dan deze website en stuur ons een bericht. Wilt u lezen hoe u een gebogen lijn combineert met een histogram, hier is een korte tutorial.
