Erstellen Sie mit Chart.js ganz einfach beeindruckende animierte Diagramme

Diagramme eignen sich weitaus besser zur visuellen Darstellung von Daten als Tabellen und haben den zusätzlichen Vorteil, dass niemand sie jemals zwangsweise als Layout-Tool verwenden wird. Sie sind einfacher zu betrachten und können Daten schnell übermitteln, aber sie sind nicht immer einfach zu erstellen.

Eine gute Möglichkeit, mit Diagrammen zu beginnen, ist mit Chart.js, ein JavaScript-Plugin, das das Canvas-Element von HTML5 verwendet, um das Diagramm auf der Seite zu zeichnen. Es handelt sich um ein gut dokumentiertes Plugin, das die Verwendung aller Arten von Balkendiagrammen, Liniendiagrammen, Kreisdiagrammen und mehr unglaublich einfach macht.

Um zu sehen, wie man chart.js verwendet, erstellen wir einen Satz von drei Diagrammen. Eines zeigt die Anzahl der Käufer, die ein fiktives Produkt im Laufe von 6 Monaten hat. Dabei handelt es sich um ein Liniendiagramm. das zweite zeigt, aus welchen Ländern die Kunden kommen, das ist das Kreisdiagramm; Schließlich verwenden wir ein Balkendiagramm, um den Gewinn über den Zeitraum darzustellen.

Einrichten

Das erste, was wir tun müssen, ist Laden Sie Chart.js herunter. Kopieren Sie Chart.min.js aus dem entpackten Ordner in das Verzeichnis, in dem Sie arbeiten werden. Erstellen Sie dann eine neue HTML-Seite und importieren Sie das Skript:





Chart.js-Demo




Zeichnen eines Liniendiagramms

Um ein Liniendiagramm zu zeichnen, müssen wir zunächst ein Canvas-Element in unserem HTML erstellen, in dem Chart.js unser Diagramm zeichnen kann. Fügen Sie dies also dem Hauptteil unserer HTML-Seite hinzu:

Als Nächstes müssen wir ein Skript schreiben, das den Kontext der Leinwand abruft. Fügen Sie dies also am Fuß Ihres Body-Elements hinzu:

Lesen:  Wie man mit Online-Bildung Geld verdient


var Käufer = document.getElementById(‘buyers’).getContext(‘2d’);
new Chart(buyers).Line(buyerData);

(Wir können tatsächlich einige Optionen über das Diagramm an das Diagramm übergeben Linie Methode, aber wir bleiben vorerst bei den Daten, um es einfach zu halten.)

Innerhalb derselben Skript-Tags, die wir zum Erstellen unserer Daten benötigen, handelt es sich in diesem Fall um ein Objekt, das Beschriftungen für die Basis unseres Diagramms und Datensätze zur Beschreibung der Werte im Diagramm enthält. Fügen Sie dies direkt über der Zeile hinzu, die mit „var Buyers=” beginnt:

var BuyerData = {
Etiketten: [“January”,”February”,”March”,”April”,”May”,”June”],
Datensätze: [
{
fillColor : “rgba(172,194,132,0.4)”,
strokeColor : “#ACC26D”,
pointColor : “#fff”,
pointStrokeColor : “#9DB86D”,
data : [203,156,99,251,305,247]
}
]
}

Wenn Sie Ihre Datei in einem Browser testen, sehen Sie jetzt ein cooles animiertes Liniendiagramm.

Ein Kreisdiagramm zeichnen

Unser Liniendiagramm ist vollständig. Fahren wir also mit unserem Kreisdiagramm fort. Zuerst benötigen wir das Canvas-Element:

Als nächstes müssen wir den Kontext ermitteln und das Diagramm instanziieren:

var states= document.getElementById(“countries”).getContext(“2d”);
new Chart(countries).Pie(pieData, pieOptions);

Sie werden feststellen, dass wir dieses Mal einige Optionen für das Diagramm bereitstellen werden.

Als nächstes müssen wir die Daten erstellen. Diese Daten unterscheiden sich ein wenig vom Liniendiagramm, da das Kreisdiagramm einfacher ist. Wir müssen lediglich einen Wert und eine Farbe für jeden Abschnitt angeben:

var pieData = [
{
value: 20,
color:”#878BB6″
},
{
value : 40,
color : “#4ACAB4”
},
{
value : 10,
color : “#FF8153”
},
{
value : 30,
color : “#FFEA88”
}
];

Jetzt fügen wir unmittelbar nach den pieData unsere Optionen hinzu:

var pieOptions = { segmentShowStroke: false, animateScale: true}

Diese Optionen bewirken zwei Dinge: Zuerst entfernen sie den Strich aus den Segmenten und dann animieren sie den Maßstab des Kreises, sodass er aus dem Nichts herausgezoomt wird.

Lesen:  Welche Funktionen bieten Cloud-Dienste den Benutzern?

Ein Balkendiagramm zeichnen

Zum Schluss fügen wir unserer Seite ein Balkendiagramm hinzu. Glücklicherweise ist die Syntax für das Balkendiagramm der des Liniendiagramms, das wir bereits hinzugefügt haben, sehr ähnlich. Zuerst fügen wir das Canvas-Element hinzu:

Als nächstes rufen wir das Element ab und erstellen das Diagramm:

var Einkommen = document.getElementById(“Einkommen”).getContext(“2d”);
new Chart(income).Bar(barData);

Und schließlich fügen wir die Daten des Balkendiagramms hinzu:

var barData = { labels : [“January”,”February”,”March”,”April”,”May”,”June”]Datensätze: [
{
fillColor : “#48A497”,
strokeColor : “#48A4D1”,
data : [456,479,324,569,702,600]
}, { fillColor : “rgba(73,188,170,0.4)”, StrokeColor : “rgba(72,174,209,0.4)”, data : [364,504,605,400,345,320]
} ]}

Wie Sie sehen, sind die Daten größtenteils gleich, außer dass wir uns dieses Mal für die Verwendung von RGBA entschieden haben, um unsere Farben anzugeben, wodurch wir Transparenz hinzufügen können.

Abschluss

Sie können a anzeigen Demo davon in Aktion hier, Und wenn Sie lieber kopieren und einfügen möchten, finden Sie hier das vollständige Skript:





Chart.js-Demo











// Liniendiagrammdaten
var BuyerData = {
Etiketten: [“January”,”February”,”March”,”April”,”May”,”June”],
Datensätze: [
{
fillColor : “rgba(172,194,132,0.4)”,
strokeColor : “#ACC26D”,
pointColor : “#fff”,
pointStrokeColor : “#9DB86D”,
data : [203,156,99,251,305,247]
}
]
}
// Liniendiagramm-Leinwand abrufen
var Käufer = document.getElementById(‘buyers’).getContext(‘2d’);
// Liniendiagramm zeichnen
new Chart(buyers).Line(buyerData);
// Kreisdiagrammdaten
var pieData = [
{
value: 20,
color:”#878BB6″
},
{
value : 40,
color : “#4ACAB4”
},
{
value : 10,
color : “#FF8153”
},
{
value : 30,
color : “#FFEA88”
}
];
// Optionen für Kreisdiagramme
var pieOptions = {
segmentShowStroke: false,
animateScale: wahr
}
// Kreisdiagramm-Leinwand abrufen
var states= document.getElementById(“countries”).getContext(“2d”);
// Kreisdiagramm zeichnen
new Chart(countries).Pie(pieData, pieOptions);
// Balkendiagrammdaten
var barData = {
Etiketten: [“January”,”February”,”March”,”April”,”May”,”June”],
Datensätze: [
{
fillColor : “#48A497”,
strokeColor : “#48A4D1”,
data : [456,479,324,569,702,600]
},
{
fillColor: „rgba(73,188,170,0,4)“,
StrokeColor: „rgba(72,174,209,0,4)“,
Daten : [364,504,605,400,345,320]
}
]
}
// Balkendiagramm-Leinwand abrufen
var Einkommen = document.getElementById(“Einkommen”).getContext(“2d”);
// Balkendiagramm zeichnen
new Chart(income).Bar(barData);


Das Tolle an Chart.js ist, dass es einfach zu verwenden und wirklich sehr flexibel ist. Und sobald Sie die Grundlagen beherrschen, werden Sie feststellen, dass es unzählige Optionen gibt in der Dokumentation aufgeführt.

Lesen:  So finden Sie die Schlüsselwörter einer Website mit kostenlosen oder kostenpflichtigen Tools

Haben Sie Chart.js verwendet? Bevorzugen Sie eine andere Lösung? Lass es uns in den Kommentaren wissen.

Aktuelle Artikel:

Empfohlen