Ausgefallene, reaktionsschnelle Diagramme mit Diagramm.js

Daten sind überall um uns herum. Während Suchmaschinen und andere Anwendungen am optimalsten mit der textbasierten Darstellung von Daten funktionieren, finden die Personen, die visuell dargestellt werden, als leicht zu verstehen. Anfang dieses Jahres veröffentlichte SitePoint den Artikel von Aurelio mit einer Einführung in Diagramm.js. Dieses Tutorial bietet eine kurze Zusammenfassung dieser Einführung, gefolgt von einem tieferen Einblick in die Merkmale von chart.js.

Key Takeaways

• chart.js ist eine HTML5-Canvas-basierte reaktionsschnelle, leichte Diagrammbibliothek, die sechs verschiedene Diagrammtypen mit zahlreichen Anpassungsoptionen unterstützt. Es ist modular und ermöglicht es Entwicklern, nur die von ihnen benötigten Diagrammtypen einzubeziehen, wodurch die Dateigröße minimal bleibt.
• Die Bibliothek ermöglicht eine umfassende Anpassung von Diagrammen, einschließlich Tool -Tipps, Animation und sogar die Erstellung von benutzerdefinierten Diagrammtypen. Dies schließt sowohl globale Einstellungen als auch dabellspezifische Optionen ein, mit der die Möglichkeit werden, die Diagramme reaktionsschnell zu machen, indem die Option Responsive Konfiguration auf true festgelegt wird.
• chart.js unterstützt auch die dynamische Addition und Entfernung von Daten und macht es ideal für Situationen, in denen sich die Daten im Laufe der Zeit ändern, wie z. B. Börsenmärkte. Dies kann durch Methoden wie entfernteata () und adddata (valuesArray, label) oder durch direkte Einstellung der Werte in einem Diagramm erreicht werden.

Erste Schritte

chart.js ist eine HTML5-Canvas-basierte reaktionsschnelle, flexible Charting-Bibliothek. Die Bibliothek unterstützt sechs verschiedene Diagrammtypen, wobei jeder dieser Diagrammtypen mit einer Last von Anpassungsoptionen geliefert wird. Wenn das nicht ausreicht, können Sie auch Ihre eigenen benutzerdefinierten Diagrammtypen erstellen.

Alle sechs Kerndiagrammtypen in Diagramm.js sind nur 11 KB Minified und GZIP'D und die Bibliothek ist modular, sodass Sie die Anforderungsgröße für die Datei weiter reduzieren können, indem Sie nur den tatsächlich benötigten Diagrammtyp einbeziehen. Unten finden Sie den CDNJS -Link, um ihn einzuschließen:

<span><script></script></span>

verfügbare Konfigurationsoptionen

Mit

chart.js können Sie fast jeden Aspekt Ihrer Diagramme ändern - von Tool -Tipps bis hin zu Animation. In diesem Abschnitt werde ich einige Einstellungen ändern, um zu demonstrieren, was Diagramme.js erstellen kann. Hier ist der HTML, mit dem wir beginnen werden:

<span><canvas id="canvas"></canvas></span>

Für die erste Demonstration werde ich ein Zeilendiagramm erstellen. Es gibt einige grundlegende Optionen, die Sie für die Diagramme festlegen müssen, um Sinn zu machen. Das Zeilendiagramm erwartet eine Reihe von Beschriftungen und Datensätzen. Die Etiketten erscheinen auf der X -Achse. Ich habe das Zeilendiagramm mit einigen Dummy -Daten gefüllt. Die Daten werden in eine Reihe von Datensätzen unterteilt. Jeder Datensatz hat eine Farbe für die Füllung, die Linie und die Punkte.

Ich habe in diesem Fall FillColor auf transparent gesetzt. Wenn Sie keinen Wert von FillColor festlegen, wird er stattdessen auf schwarz oder grau eingestellt. Gleiches gilt für andere Werte. Die Farben werden mit RGBA-, RGB-, HEX- oder HSL -Format definiert, ähnlich wie CSS.

<span><script src="https://img.php.cn/upload/article/000/000/000/174049952240765.jpg"></script></span>

Globale Optionen einstellen

Ich habe den Code eingeschlossen, der einige globale Werte festlegt. AnimationSteps bestimmt die Animationsdauer. Es gibt viele weitere Optionen, die Sie entsprechend Ihren Bedürfnissen ändern können, z. Ich schlage vor, dass Sie die Dokumentation von Chart.js durchlaufen, um zu sehen, was diese Bibliothek noch zu bieten hat.

<span><canvas id="canvas"></canvas></span>

Einstellungsdiagrammspezifische Optionen

Einstellen

Neben globalen Optionen stehen Konfigurationsoptionen für einzelne Diagrammtypen zur Verfügung. Ich werde einige dieser Optionen in diesem Zeilendiagramm festlegen, um Ihnen eine Idee zu geben:

<span>var lineData = {
</span>  <span>labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
</span>           <span>'Data 5', 'Data 6', 'Data 7'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(220,180,0,1)',
</span>    <span>pointColor: 'rgba(220,180,0,1)',
</span>    <span>data: [20, 30, 80, 20, 40, 10, 60]
</span>  <span>}, {
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(151,187,205,1)',
</span>    <span>pointColor: 'rgba(151,187,205,1)',
</span>    <span>data: [60, 10, 40, 30, 80, 30, 20]
</span>  <span>}]
</span><span>}</span>

-Andiagramme, die durch chart.js generiert wurden, reagieren standardmäßig nicht. Wenn Sie auf True reagieren (wie oben), reagieren sie reaktionsschnell. Wenn Sie jedes Diagramm reaktionsschnell machen müssen, empfehle ich Ihnen, dies stattdessen global festzulegen, wie folgt:

<span>Chart.defaults.global = {
</span>  <span>animationSteps : 50,
</span>  <span>tooltipYPadding : 16,
</span>  <span>tooltipCornerRadius : 0,
</span>  <span>tooltipTitleFontStyle : 'normal',
</span>  <span>tooltipFillColor : 'rgba(0,160,0,0.8)',
</span>  <span>animationEasing : 'easeOutBounce',
</span>  <span>scaleLineColor : 'black',
</span>  <span>scaleFontSize : 16
</span><span>}</span>

unten sehen Sie die Demo des Zeilendiagramms:

Siehe die Demo von SitePoint (@sinePoint) auf CodePen.

Daten hinzufügen und entfernen dynamisch

Manchmal müssen Sie Daten anzeigen, die sich im Laufe der Zeit ändern. Ein klassisches Beispiel für dieses Szenario ist der Aktienmarkt. In diesem Abschnitt erstelle ich ein Balkendiagramm und entfernen und füge Daten dynamisch hinzu. Ich werde einige zufällige Daten verwenden und habe beschlossen, in diesem Fall Daten mit einem Balkendiagramm darzustellen. Der größte Teil des Codes in diesem Beispiel ähnelt dem vorherigen Beispiel. Sobald wir unser HTML (wie zuvor) haben, können wir unser JavaScript hinzufügen.

Zuerst schreiben wir Code, um unser Diagramm mit Dummy -Daten auszufüllen. Ich verwende einen Funktionsausdruck, um zufällige Werte zu erzeugen und dann in einer variablen ddata zu speichern. Diese Werte werden dann verwendet, um uns zufällige Daten zu liefern, wenn die Notwendigkeit entsteht. Wie im vorherigen Beispiel erstelle ich eine Reihe von Beschriftungen und Datensätzen und legte ein willkürliches FillColor.

<span>var ctx = document.getElementById('canvas').getContext('2d');
</span><span>var lineDemo = new Chart(ctx).<span>Line</span>(lineData, {
</span>  <span>responsive: true,
</span>  <span>pointDotRadius: 10,
</span>  <span>bezierCurve: false,
</span>  <span>scaleShowVerticalLines: false,
</span>  <span>scaleGridLineColor: 'black'
</span><span>});</span>

Jetzt ist es Zeit, den Code zu schreiben, der unser Diagramm beseitigt und hinzufügt. Ich beginne mit der Initialisierung der Indexvariablen zu einem Wert von 11. Ich verwende zwei Methoden: Remedata () und Adddata (ValuesArray, Label). Das Aufrufen von Remedata () in einer Diagramminstanz beseitigt den ersten Wert für alle Datensätze in diesem bestimmten Diagramm. Im Falle von Barchartdemo wird der erste Wert des Datensatzes entfernt. Das Aufrufen von adddata () Das Bestehen eines Arrays von Werten zusammen mit Beschriftungen fügt am Ende des Diagramms einen neuen Datenpunkt hinzu. Der Code -Snippet unten aktualisiert das Diagramm alle 3 Sekunden.

<span>Chart.defaults.global.responsive = true;</span>

Eine alternative Methode zum Aktualisieren von Werten in einem Diagramm besteht darin, die Werte direkt festzulegen. Im folgenden Beispiel legt die erste Zeile den Wert der zweiten Balken des ersten Datensatzes auf 60 fest. Wenn Sie zu diesem Zeitpunkt Update aufrufen, wird die Leiste von ihrem aktuellen Wert auf 60 animieren.

<span>var dData = function() {
</span>  <span>return Math.round(Math.random() * 90) + 10;
</span><span>};
</span>
<span>var barData = {
</span>  <span>labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
</span>           <span>'dD 5', 'dD 6', 'dD 7', 'dD 8'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,60,100,1)',
</span>    <span>strokeColor: 'black',
</span>    <span>data: [dData(), dData(), dData(), dData(),
</span>           <span>dData(), dData(), dData(), dData()]
</span>  <span>}]
</span><span>}</span>

Und hier ist die Balkendiagramm -Demo:

Siehe den Pen -Diagramm.js Responsive Balkendiagramm -Demo von SitePoint (@sinepoint) auf CodePen.

Schlussfolgerung

Dieses Tutorial umfasste einige wichtige Merkmale von chart.js. Das erste Beispiel demonstrierte die Verwendung einiger globaler Einstellungen. Chart.js bietet jedoch auch Anpassungsoptionen, die für einen Diagrammtyp spezifisch sind. Mit der Bibliothek können Sie Ihre eigenen Diagrammtypen erstellen, wenn bereits verfügbare Diagramme Ihren Anforderungen nicht erfüllen. Ich empfehle Ihnen, die Dokumentation zu durchlaufen, damit Sie ein gutes Verständnis dafür erhalten, was Sie mit dieser Bibliothek tun können und was nicht.

häufig gestellte Fragen (FAQs) zu ausgefallenen Responsive -Diagrammen mit Diagramm.js

Wie kann ich mein Diagramm.js -Diagramm vollständig reaktionsschnell machen? Dadurch kann sich das Diagramm ändern, wenn sich die Fenstergröße ändert. Sie können dies tun, indem Sie Ihre Diagrammkonfiguration den folgenden Code hinzufügen:

var mychart = new Diagramm (CTX, {
Typ: 'Bar',
Daten: Daten,
Optionen: Oder Design.

Warum wird mein Diagramm.js -Diagramm nicht richtig angepasst? Ein häufiges Problem ist, dass das Canvas -Element, das das Diagramm enthält, nicht korrekt geändert wird. Stellen Sie sicher, dass das Canvas -Element eine relative Position sowie eine Breite und Höhe von 100%aufweist. Ein weiteres Problem könnte sein, dass die Reaktionsoption in der Diagrammkonfiguration nicht auf true eingestellt ist. Überprüfen Sie Ihre Diagrammkonfiguration, um sicherzustellen, dass die Ansprechoption korrekt eingestellt ist.

Wie kann ich das Erscheinungsbild meines Diagramms anpassen. Das Erscheinen Ihrer Diagramme. Sie können die Farben, Etiketten, Tooltips und vieles mehr anpassen. Um beispielsweise die Farbe der Balken in einem Balkendiagramm anzupassen : {
Datensätze: [{
HintergrundColor: 'RGBA (75, 192, 192, 0,2)'

}]

}

});

Dieser Code setzt die Hintergrundfarbe der Balken auf hellblaue Farbe. Sie können viele andere Aspekte des Diagramms mit ähnlichen Optionen anpassen.

Wie kann ich meinem Diagramm Tooltips hinzufügen. Sie können das Aussehen und das Verhalten von Tooltips mit der Option "Tooltips" anpassen. Um beispielsweise die Hintergrundfarbe von Tooltips zu ändern, können Sie den folgenden Code verwenden:

var myChart = neues Diagramm (CTX, {
Typ: 'Bar',
Daten: Daten,
Optionen: {
tooltips: {
HintergrundColor: 'RGBA (0, 0, 0, 0,8)'
}
}
});
Dieser Code setzt die Hintergrundfarbe von Tooltips auf eine halbtransparente schwarze Farbe. Sie können viele andere Aspekte von Tooltips mit ähnlichen Optionen anpassen. . Sie können die Dauer, die Lockerungsfunktion und andere Aspekte von Animationen mithilfe der Option Animationskonfiguration steuern. Zum Beispiel können Sie den folgenden Code verwenden, um das Diagramm mit einer Dauer von 2000 Millisekunden und einer Lockerungsfunktion von 'EasyOutBounce' zu verwenden:

var myChart = neues Diagramm (CTX, {

Typ: 'Typ:' bar ',

Daten: Daten,

Optionen: {

Animation: {
Dauer: 2000,
Lockerung: 'EaseOutBounce'
}
}
})
Dieser Code animiert das Diagramm mit einem springenden Effekt über eine Dauer von 2 Sekunden. Sie können viele andere Aspekte von Animationen mit ähnlichen Optionen anpassen.

Das obige ist der detaillierte Inhalt vonAusgefallene, reaktionsschnelle Diagramme mit Diagramm.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!