Verwenden Sie chart.js, um Daten in interaktive Diagramme zu drehen

Sep 16, 2025
wie man

Theoretisch ist das Erzeugen von Diagrammen nicht schwierig. Umgang mit der für ein Kreisdiagramm erforderlichen Trigonometrie gehört zu den klassiksten Jobs, die für Trainingsprogrammierer verwendet werden. Es gibt jetzt viele Diagrammbibliotheken, die jetzt für Entwickler aufweisen, aber in diesem Artikel werden wir uns darauf konzentrieren, wie man Open Source Tool Chart.js verwendet.

Wir setzen die Bibliothek über seine Schritte, wodurch ein Satz druckfähiger Diagramme aus zufällig generierten Daten erstellt werden. Chart.js ist ein besonders beliebt Webdesign-Tool Da es einen einzigartigen Kompromiss zwischen Benutzerfreundlichkeit und erweiterten Funktionen bietet, können Sie interaktive Diagramme erstellen Infografiken .

Mit Chart.js können Sie aus acht verschiedenen Diagrammtypen wählen, um Ihren Websites mit minimalem Aufwand hinzuzufügen. Das kürzlich hinzugefügte Animationsmodul bereichert die Diagramme mit Snazzy-Looking-Visuals. Erstellen einer neuen Website, um Ihre Diagramme zu beherbergen? Bekomm dein Web-Hosting Platz auf, und versuche es, ein Top zu versuchen Webseitenersteller . Okay, lass uns anfangen.

Klicken Sie auf das Symbol oben rechts von jedem Bild, um es zu vergrößern.

01. Bereitstellen der Bibliothek

Da die Verwendung von Chart.js weit verbreitet ist, finden Sie seine abgebaute Version von verschiedenen CDNs wie CloudFlare. Laden Sie es einfach mit a & lt; script & gt; Tag und sicherstellen, dass a & lt; canvas & gt; Objekt befindet sich in der Nähe - Chart.js macht seine Magie mit der in diesem Widget bereitgestellten Renderninfrastruktur. 

 & lt; html & gt;
& lt; head & gt;
& lt; Skript SRC = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; Canvas id = "Workarea" & GT;
& lt; / canvas & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Beginnen Sie die Initialisierung

First, load up the framework

Laden Sie zunächst den Rahmen auf

Wenn der Rahmen geladen ist, beinhaltet der nächste Schritt, dass ein Canvas2D-Griff auf die & lt; canvas & gt; Instanz im vorhergehenden Schritt erstellt. Dies kann dann verwendet werden, um eine neue Instanz der Diagramm() Klasse, die für Datenabwicklung, Rendering und Interaktion verantwortlich ist. 

 & lt; script & gt;
(Funktion () {
var ctx = dokument.
getelementbyid ('Workarea'). GetContext ('2D');
Var-Chart = Neues Diagramm (CTX,
{
Typ: 'Zeile',
Optionen: {},
. . .
});
}) ();
& lt; / script & gt;

03. Fügen Sie eine Datenquelle hinzu

line chart

Für unser Leitungsdiagramm ist nur ein Datensatz erforderlich

Diagrammklassen nehmen einen Datenzeiger, der einen oder mehrere enthält Dataset. Objekte mit den tatsächlichen Messinformationen. Bei unserem Leitungsdiagramm ist nur ein Datensatz erforderlich. Es verfügt über das obligatorische Datenelement und ein paar optionale Parameter für den tatsächlichen Anzeigeprozess. 

 VAR-GRATTE = NEUES GRATTE (CTX, {
Typ: 'Zeile',
Optionen: {},
Daten: {
Etiketten: ["Januar",
"Februar", "März", "April", "Mai", "June",
"Juli"],
Datasets: [{{
Label: "Mein erster Datensatz",
Hintergrundfarbe:
        'RGB (255, 99, 132)',
Randfarbe:
'RGB (255, 99, 132)',
Daten: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Halten Sie alle Flackern an

Chart.js verfügt über eine anspruchsvolle Größenänderungslogik, die - leider - neigt, die Bildschirmgrößen von Zeit zu Zeit zu erhalten. Begrenzung der Größe der & lt; canvas & gt; Das Element über CSS tut leider nicht den Trick. Stattdessen müssen beide Aspektverhältnis-Wartung und Responsesivität über das Optionsfeld deaktiviert werden, das den Diagrammklassenkonstruktor begleitet. 

 & lt; Canvas ID = "Workarea" style = "Breite: 800px;
Höhe: 600 px; "& lt; / canvas & gt; & lt; / leinwand & gt;
& lt; script & gt;
(Funktion () {
var ctx = dokument.
getelementbyid ('Workarea'). GetContext ('2D');
Var-Chart = Neues Diagramm (CTX,
{
Typ: 'Zeile',

Optionen: {
Responsive: false, pflegeafectratio:
FALSE},

05. Fügen Sie Layouts hinzu

Um Andrei Tupolev zu paraphrasen: Nun, da das kleine fliegt, lassen Sie uns den größeren aufbringen. Das Gerüppel, das diesen Schritt begleitet " Leider funktioniert dies nicht ganz wie beabsichtigt. 

 & lt; Canvas ID = "Workarea"
style = "Position: absolut; oben: 0%; links: 0%;
Breite: 49%; Höhe: 49%; "& Gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; Canvas-ID = "Workarea2"
style = "Position: absolut; oben: 0%; links: 51%;
Breite: 49%; Höhe: 49%; "& Gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; Canvas-ID = "Workarea3"
style = "Position: absolut; oben: 51%; links: 0%;
Breite: 49%; Höhe: 49%; "& Gt; & lt; / canvas & gt; & lt; / canvas & gt;
& lt; Canvas-ID = "Workarea4"
style = "Position: absolut; oben: 51%; links: 51%;
Breite: 49%; Höhe: 49%; "& lt; / canvas & gt; & lt; / canvas & gt;

06. Zerlegen Sie alle Rendernfehler

Wrapper <div> tags enforce a structure from the outside

Wrapper & lt; div & gt; Tags erzwingen eine Struktur von außen

Der sicherste Weg, um CHART.JS-Diagramme in komplexen Layouts zu handhaben, beinhaltet die Verwendung von Wrapper & lt; div & gt; Stichworte. Sie erzwingen eine Struktur von außen, wodurch sichergestellt wird, dass der interne Layout-Motor nicht mehr schaden kann als nötig. Stellen Sie in diesem Fall jedoch sicher, dass die Response-Funktion erneut aktiviert wird. 

 & lt; div style = "Position: absolut; oben: 0%; links:
0%; Breite: 49%; Höhe: 49%; "& gt;
& lt; Canvas ID = "Workarea" & GT; & lt; / leinwand & gt; & lt; /
leinwand & gt;
& lt; / div & gt;
& lt; div style = "Position: absolut; oben: 0%; links:
51%; Breite: 49%; Höhe: 49%; "& gt;
& lt; Canvas id = "Workarea2" & gt; & lt; / leinwand & gt; & lt; /
leinwand & gt;
& lt; / div & gt;
& lt; div style = "Position: absolut; oben: 51%; links:
0%; Breite: 49%; Höhe: 49%; "& gt;
& lt; leinwand id = "workarea3" & gt; & lt; / leinwand & gt; & lt; /
leinwand & gt;
& lt; / div & gt;
& lt; div style = "Position: absolut; oben: 51%; links:
51%; Breite: 49%; Höhe: 49%; "& gt;
& lt; Canvas ID = "Workarea4" & gt; & lt; / leinwand & gt; & lt; /
leinwand & gt;
& lt; / div & gt;
& lt; script & gt;
document.addeventListener ("domcontentl)
ojadiert ", funktion () {
var ctx = dokument.
getelementbyid ('Workarea'). GetContext ('2D');
Var-Chart = neu
Diagramm (CTX, {
Art:
'Linie',
Optionen:
{},

07. Versuchen Sie Bars.

Creating bar charts is simple

Erstellen von Balkendiagrammen ist einfach

Immer Rendering Line-Charts werden schnell langweilig. Lassen Sie uns Dinge durchstellen, indem Sie die Typeigenschaft in den Balken ändern, wodurch Balkendiagramme wie die in der in diesem Schritt gezeigten Figur ergibt. Wir fördern das Datenfeld "global", um die Wiederverwendung zu beseitigen. 

 & lt; script & gt;
document.adDeventListener ("domcontentladet", funktion () {
var myfield = {
Etiketten: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli"],
Datasets: [{{
Etikette:
"Mein erster Datensatz",

BackgroundColor: 'RGB (255, 99, 132)',

Bordercolor: 'RGB (255, 99, 132)',
Daten: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = Dokument.
getelementbyid ('workarea4'). GetContext ('2D');
Diagramm = Neues Diagramm (CTX, {
Typ: 'bar',
Optionen: { },
Daten: myfield.
});
});
& lt; / script & gt;

08. Vermeiden Sie Pies.

pie charts taking over the screen

Kreisdiagramme erfordern eine spezielle Behandlung, wenn Sie nicht möchten, dass sie Ihren gesamten Bildschirm füllen möchten

Theoretisch kann ein Kreisdiagramm entlang derselben Leitungen gerendert werden. Entfernen Sie die Farbeigenschaften, um ein einheitliches Erscheinungsbild zu verhindern, und legen Sie die Typeigenschaft auf PIE ein. Leider funktioniert dies nicht ganz - wenn er fertig ist, füllt das Kreisdiagramm den gesamten Bildschirm. Dies wird durch eine Spezialität des Pie-Renderers verursacht, das die 'größere' der beiden Eigenschaften verwendet, um den Pie-Radius zu bestimmen. 

 var mypie = {
Etiketten: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli"],
Datasets: [{{
Label: "Mein erster Datensatz",
Daten: [0, 10, 5, 2, 20, 30, 45],
}]
};
ctx = document.getelementById ('workarea2').
GetContext ('2D');
Diagramm = Neues Diagramm (CTX, {
Typ: 'Pie',
Optionen: { },
Daten: mypie.
});

09. Lösen Sie das Problem

Öffnen Sie die Datei 'Index.js'-Datei, die in Schritt 1 erstellt wurde. Beginnen Sie mit der Angabe des Graphyps als Zeile und Hinzufügen der zu visuell dargestellten Daten, wie unten gezeigt. 

& lt; body & gt;
& lt; div style = "Position: absolut; oben: 0%;
links: 0%; Breite: 49%; Höhe: 49%; "& gt;
& lt; Canvas ID = "Workarea" & gt; & lt; /
leinwand & gt; & lt; / canvas & gt;
& lt; / div & gt;
& lt; div style = "Position: absolut; oben: 0%;
links: 51%; Breite: 29%; Höhe: 49%; "& gt;
& lt; Canvas ID = "Workarea2" & gt; & lt; /
leinwand & gt; & lt; / canvas & gt;
& lt; / div & gt;

10. Lassen Sie die Chart.js das Diagramm erneut behindern

Ein weiterer Ansatz zur Lösung des Problems beinhaltet das erneute Deaktivieren der Seitenverhältnis beibehalten Merkmal. Auf diese Weise kann der Diagrammmotor das Diagramm skalieren, wenn er passt, um sicherzustellen, dass der gesamte Kreis auf dem Bildschirm angezeigt wird. 

 ctx = document.getelementById ('workarea2').
GetContext ('2D');
Diagramm = Neues Diagramm (CTX, {
Typ: 'Pie',
Optionen: {pflegtaspectratio: false
},
Daten: mypie.
});

Nächste Seite: Beenden Sie Ihr interaktives Diagramm mit Chart.js

  • 1.
  • 2.

Aktuelle Seite: Verwenden von Chart.js: Schritte 01-10

wie man - Die beliebtesten Artikel

So testen Sie Reaktionsstellen und Apps

wie man Sep 16, 2025

(Bildkredite: Zukunft) Wenn Sie wissen möchten, wie man reagieren soll, sind Sie an der richtigen Stelle. Kennst du ..

Beginnen Sie mit den Vermögenswerten in Affinity Designer

wie man Sep 16, 2025

Bei der Arbeit an Projekten wie App Design oder Branding Collateral ist es wichtig, dass es eine Konsistenz zwischen verschiedene..

Erstellen Sie ein ansprechendes Layout mit CSS-Gitter

wie man Sep 16, 2025

CSS-Gitterlayout. Wächst jeden Tag in der Browserunterstützung, und wir können CSS-Gitter zur Produktion versenden..

4 Tipps zur Verbesserung der Leistung Ihrer Seite

wie man Sep 16, 2025

Web Performance Analyst. Henri Helvetica. Wird seine Pro-Tipps, wie Sie die Leistung Ihre..

Wie kann ich Google-Rankings mit Ihrem Inhalt beeinflussen

wie man Sep 16, 2025

Ihre Inhalte gehen nirgendwohin, wenn Menschen, wenn Personen nicht suchen und feststellen können, sodass der Inhalt mit einem V..

4 einfache Schritte zur Verbesserung Ihres Renders

wie man Sep 16, 2025

Die Verwendung von Dome Lights ist in den letzten Jahrzehnten eine der größten Fortschritte der CGI-Erstellung. Das Baden einer..

So simulieren Sie Explosionen in Maya

wie man Sep 16, 2025

Seite 1 von 2: Seite 1 Seite 1 Seite 2 ..

Beschleunigen Sie Ihren Textur-Workflow

wie man Sep 16, 2025

Der Krieger ist ein persönliches Projekt, an dem ich die Freude an der Bekanntmachung und Entwurf hatte. Ich wollte einen Charak..

Kategorien