Um ein Liniendiagramm mit Kurven mit Chart.js zu erstellen, betrachten wir ein Beispiel von zwei Schülern A und B, die Noten für fünf Fächer erhalten haben.
Erstellen Sie in Ihrem Projektordner eine Datei lg.html. Erstellen Sie einen Ordner mit dem Namen „css" und fügen Sie eine Datei hinzu lg.css darin. Erstellen Sie als Nächstes einen Ordner mit dem Namen „js“ und fügen Sie lg.js Datei. In dieser Datei erstellen Sie ein Liniendiagramm.
line.html
Fügen Sie die Dateien Chart.js und jQuery zu Ihrem Projekt hinzu. Im Kopf, geben Sie den lg.css Datei.
<link type="text/css" rel="stylesheet" href="css/lg.css" />
Erstellen Sie ein div Tag im HTML-Body und weisen Sie ihm eine Klasse zu chart-container hinzu. Erstellen Sie nun ein canvas und benennen Sie es mit einer ID, zum Beispiel lg-chartcanvas.
<div class="section__codeStyle">
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
</div>
Geben Sie abschließend die JavaScript-Datei lg.js an. So sieht Ihre lg.html-Datei insgesamt aus.
<!DOCTYPE html>
<html>
<head>
<title>So erstellen Sie ein gebogenes Liniendiagramm</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
Als Nächstes müssen Sie Ihr html der Seite mit CSS. Dieser Code legt die Breite, Höhe und den Abstand für die Klasse .chart-container fest. Fügen Sie den folgenden Code hinzu.
.chart-container {
width: 70%;
height: 380px;
margin: 0 auto;
}
JavaScript
Jetzt ist es Zeit, uns unserem Hauptziel zu widmen – ein Liniendiagramm mit geschwungenen Linien mit Chart JS zu erstellen.
Zuerst müssen Sie den canvas durch Verweis auf seine ID lg-chartcanvas.
var getCanvas = $("#lg-chartcanvas");
Hier haben Sie viele Optionen zum Erstellen des Diagramms. Dazu müssen Sie ein opt Objektvariable und ändern Sie eine Reihe von Eigenschaften. Sie können beispielsweise responsive zu true um Ihre Grafik responsiv zu machen.
Um den Titel des Liniendiagramms zu erstellen, müssen Sie Folgendes ändern in Titel Datenobjekt.
- display – Ändern Sie dies in true damit der Titel angezeigt wird.
- position – Ändern Sie dies zu oben damit der Titel im oberen Bereich des Diagramms positioniert wird.
- Text – Ändern Sie ihn in Liniendiagramm.
- fontSize – Damit passen Sie die Schriftgröße des Titels an
- fontColor – Damit passen Sie die Schriftfarbe des Titels an.
Um dem Liniendiagramm eine Legende hinzuzufügen, passen Sie die folgende Eigenschaft an in Legende.
- Display – Setzen Sie den Wert auf true, damit die Legende angezeigt wird.
- Position – Ändern Sie dies zu bottom, um die Position der Legende festzulegen.
- Beschriftung – Passen Sie damit Schriftfarbe und -größe der Legende an.
//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
}
}
};
Daten
Erstellen Sie ein coures Variable zum Speichern der Noten beider Studenten für 5 Kurse. Ein Array Beschriftungen wird verwendet, um den Namen der Kurse zu initialisieren, während coursesinfo ist ein Array aus zwei Objekten, das die Noten jedes Schülers zeigt.
Elemente im coursesinfo bestehen aus den folgenden Eigenschaften.
- Beschriftung – Zeigt eine Beschriftung an, wenn Sie mit der Maus über diesen Punkt fahren.
- data – Ein Array, das die Noten jedes Schülers speichert.
- backgroundColor – Legt den Hex-Wert für die Punkte des Liniendiagramms fest.
- borderColor – Legt den Farbnamen als Hex-Wert fest.
- fill – Setzen Sie auf false
- lineTension – Dies ist die wichtigste Eigenschaft, da dieser Wert bestimmt, ob das Diagramm gerade oder gebogen ist. Sie können es gebogen darstellen, indem Sie einen Wert größer als 0 festlegen.
- radius – Legt den Radius eines Punkts für die Markierungen jeder Serie fest.
Sie müssen eine Diagrammvariable erzeugen, um die Chart-Klasse zu instanziieren. Da das Canvas und das data-Objekt gespeichert sind in getCanvas, müssen Sie es möglicherweise übergeben. Das data-Objekt hat line für die Eigenschaft type, courses Variable für die Eigenschaft data und opt für die Eigenschaft options.
Hier ist der vollständige JavaScript-Code.
$(function(){
//Canvas des Liniendiagramms aus HTML aufrufen
var getCanvas = $("#line-chartcanvas");
//Daten 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
}
}
};
//Chart-Klassenobjekt erstellen
var chart = new Chart(getCanvas, {
type: "line",
marks: marks,
opt: opt
});
});
Sie können dieses gekrümmte Liniendiagramm in ein gerades umwandeln, indem Sie den Wert von lineTension auf 0 setzen.
Fazit
Da Sie nun wissen, wie man ein Liniendiagramm mit geschwungenen Linien erstellt, verbessert das die Qualität Ihrer Arbeit. Um mehr über die Erstellung von Diagrammen zu erfahren, besuchen Sie diese Website und senden Sie uns eine Nachricht. Um zu erfahren, wie man eine Kurve mit einem Histogramm kombiniert, hier eine kurze Tutorial.
