Erste Schritte mit Chart.js Einführung

Normalerweise möchten Menschen keine großen Datenmengen durchsehen, die ihnen in Form von Text oder Tabellen präsentiert werden. Meistens deshalb, weil es langweilig ist, aber was noch wichtiger ist, es ist etwas schwieriger, rohe Zahlen zu verarbeiten. 

Hier ist zum Beispiel eine Tabelle der zehn bevölkerungsreichsten Länder der Welt:

Bei nur zehn Ländern in dieser Tabelle besteht immer noch eine sehr gute Chance, dass Sie und andere Leser die Tabelle vollständig überspringen. Normalerweise schauen sich die Leute nur ein oder zwei Länder an, die sie interessieren. Wenn die gleichen Daten in Form eines Balkendiagramms dargestellt worden wären, hätte es für jemanden sehr wenig Zeit gebraucht, eine ungefähre Vorstellung von der Bevölkerung in diesen Ländern zu bekommen. 

Darüber hinaus ist es viel einfacher, Trends oder Fakten zu ermitteln. So sind beispielsweise die Vereinigten Staaten doppelt so stark bevölkert wie Bangladesch, und China hat etwa zehnmal mehr Einwohner als Russland - nur durch die Balkenlänge in der Grafik.

Eine beliebte Bibliothek, mit der Sie verschiedene Arten von Diagrammen erstellen können, ist Chart.js. In dieser Serie lernen Sie alle wichtigen Aspekte dieser Bibliothek kennen. Es kann verwendet werden, um ausgefallene, responsive Diagramme in HTML5 Canvas zu erstellen. 

In der Bibliothek können Sie verschiedene Diagrammtypen mischen und Daten mit Datums-, Logarithmus- oder benutzerdefinierten Skalen auf einfache Weise darstellen. Die Bibliothek verfügt auch über einsatzbereite Animationen, die beim Ändern von Daten oder beim Aktualisieren von Farben angewendet werden können. 

Beginnen wir mit der Installation, und dann gehen wir zu Konfigurationsoptionen und anderen Aspekten über.

Installation und Verwendung

Sie können entweder die neueste Version von Chart.js von GitHub herunterladen oder den CDN-Link verwenden, um sie in Ihre Projekte aufzunehmen. Sie können die Bibliothek auch mit installieren npm oder Laube mit Hilfe der folgenden Befehle:

npm install chart.js --save bower install chart.js --save

Die Bibliothek hat zwei verschiedene Versionen. Die normale Version, aufgerufen Chart.js und Chart.min.js, wird mit der Chart.js-Bibliothek und einem Farbparser geliefert. Wenn Sie diese Version der Bibliothek verwenden möchten und die Zeitachse in Ihren Diagrammen verwenden möchten, müssen Sie die Bibliothek Moment.js vor der Verwendung von Chart.js separat einschließen. 

Die gebündelte Version, die als gekennzeichnet ist Chart.bundle.js  oder Chartbundle.min.js, enthält bereits Moment.js. Auf diese Weise müssen Sie nicht zwei separate Dateien hinzufügen. Eine Sache, die Sie beachten sollten, ist, diese Version nicht zu verwenden, wenn Sie bereits Moment.js in Ihr Projekt aufgenommen haben. Dies kann zu Versionsproblemen führen.

Wenn Sie die gewünschte Bibliotheksversion gefunden haben, können Sie sie in Ihre Projekte einfügen und mit dem Erstellen beeindruckender Diagramme beginnen.

Diagramm erstellen

Lassen Sie uns die in der Einführung dargestellte Grundgesamtheit als Balkendiagramm darstellen. Die y-Achse wird verwendet, um die Bevölkerung darzustellen, und die x-Achse wird verwendet, um die Länder darzustellen. Wir beginnen mit der Erstellung einer Leinwand mit einer ID popChart.

Die Breite und Höhe werden verwendet, um die Abmessungen des Diagramms zu bestimmen. Beim Erstellen von responsiven Diagrammen wird das Seitenverhältnis des Diagramms von der Breite und Höhe der Leinwand bestimmt.

Als nächstes müssen Sie das instanziieren Diagramm Klasse. Dies kann durch Übergeben des Knotens, der jQuery-Instanz oder des 2d-Kontexts der Zeichenfläche erfolgen, auf der Sie das Diagramm zeichnen möchten.

var popCanvas = $ ("# popChart"); var popCanvas = document.getElementById ("popChart"); var popCanvas = document.getElementById ("popChart"). getContext ("2d");

Jetzt müssen Sie nur noch alle Parameter an den Konstruktor übergeben:

var barChart = new Chart (popCanvas, Typ: 'Bar'), Daten: Labels: ["China", "Indien", "Vereinigte Staaten", "Indonesien", "Brasilien", "Pakistan", "Nigeria", "Bangladesch", "Russland", "Japan"], Datensätze: [label: 'Population', Daten: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 142457598], backgroundColor: [ "rgba (255, 99, 132, 0,6)", "rgba (54, 162, 235, 0,6)", "rgba (255, 206, 86, 0,6)", "rgba (75, 192, 192, 0,6) ',' rgba (153, 102, 255, 0,6) ',' rgba (255, 159, 64, 0,6) ',' rgba (255, 99, 132, 0,6) ',' rgba (54, 162, 235) 0,6) ',' rgba (255, 206, 86, 0,6) ',' rgba (75, 192, 192, 0,6) ',' rgba (153, 102, 255, 0,6) ');

Das im zweiten Parameter übergebene Objekt enthält alle Informationen, die Chart.js zum Zeichnen Ihres Diagramms benötigt. Das Art Mit der Taste wird der Diagrammtyp angegeben, den Sie zeichnen möchten. Es kann einen der folgenden Werte annehmen: Linie, Bar, Radar, polarArea, Kuchen, Krapfen, und Blase. In dieser Serie lernen Sie alle diese Diagrammtypen kennen.

Der Datenschlüssel enthält die tatsächlichen Daten, die Sie darstellen möchten. Das Hintergrundfarbe Mit der Taste wird die Farbe der verschiedenen Balken im Diagramm festgelegt. Wenn keine Hintergrundfarbe angegeben wird, der Standardwert 'rgba (0,0,0,0,1)' wird eingesetzt. 

Jedes Diagramm verfügt über eigene Schlüssel, mit denen Sie das Erscheinungsbild steuern können. Hier ist das Diagramm, das mit dem obigen Code erstellt wurde:

In der obigen Demo können Sie über die Balken fahren, um die genaue Bevölkerung in verschiedenen Ländern zu sehen. Bemerkenswert ist auch, dass die Größe des Diagramms nicht den von uns angegebenen Abmessungen entspricht, aber dasselbe Seitenverhältnis hat. 

Wenn die Diagramme auf allen Geräten die gleiche Größe haben sollen, müssen Sie den Wert von einstellen ansprechbar Schlüssel zu falsch.

Einstellmöglichkeiten

In der Chart.js-Bibliothek haben Sie die Möglichkeit, alle Aspekte der von Ihnen erstellten Diagramme anzupassen. Sie können beispielsweise die Farbe und Breite der Ränder der Balken im obigen Diagramm ändern. Sie können die QuickInfos und die Legende auch ändern, indem Sie deren Schriftgröße und Farbe ändern. In diesem Abschnitt lernen Sie verschiedene Schlüssel kennen, mit denen diese Elemente gestaltet werden.

Die Bibliothek verfügt über vier spezielle globale Schlüssel, mit denen alle Schriftarten in einem Diagramm geändert werden können. Diese Schlüssel sind defaultFontFamily, defaultFontSize, defaultFontStyle, und defaultFontColor. Die Schriftgröße wird in Pixel angegeben und gilt nicht für radiallinear Skalenpunktbeschriftungen. Ähnlich, defaultFontStyle gilt nicht für den Tooltip-Titel oder die Fußzeile.

Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'blau';

In der folgenden Tabelle werden die obigen globalen Schriftarteinstellungen verwendet. Wenn Sie das Erscheinungsbild auf diese Weise ändern, können Sie Diagramme erstellen, die im Stil zu Ihrer Website passen.

Sie können auch die Legende ändern, die in einem Diagramm angezeigt wird. Die Konfigurationsoptionen müssen an die übergeben werden options.legend Namespace. Sie können die Legendenoptionen auch global für alle Diagramme angeben Chart.defaults.global.legend. Die Position der Legende wird mit der Taste gesteuert Position Schlüssel, der einen der folgenden vier Werte annehmen kann: oben, links, Unterseite, und Recht. Sie können die Legende auch anzeigen oder ausblenden, indem Sie die verwenden Anzeige Schlüssel.

Neben der Legende können Sie auch das Erscheinungsbild der Beschriftung der Legende steuern. Die Konfigurationsoptionen werden unter der Legendenkonfiguration mithilfe von festgelegt Etikette Schlüssel. Die Breite des Farbfelds kann mit festgelegt werden boxWidth Schlüssel. Wenn kein Wert angegeben ist, wird der Standardwert 40 verwendet. 

Die Werte für Schriftfamilie, Schriftgröße, Schriftfarbe und Schriftstil werden standardmäßig von der globalen Konfiguration übernommen. Sie können jedoch eigene Werte für sie angeben Schriftgröße, Schriftstil, Schriftfamilie, und Schriftfarbe.

var barChart = new Chart (popCanvas, type: 'bar'), data: data, Optionen: legend: display: true, Position: 'bottom', Beschriftungen: boxWidth: 80, fontColor: 'rgb (60, 180 , 100)'    );

Sie können steuern, wie QuickInfos für ein Diagramm lokal gezeichnet werden options.tooltips Namespace. Ähnlich, Chart.defaults.global.tooltips kann verwendet werden, um das Erscheinungsbild von QuickInfos global festzulegen. Um festzulegen, ob dem Benutzer QuickInfos angezeigt werden sollen, können Sie das verwenden aktiviert Schlüssel. Einstellen auf falsch Die Tooltips werden deaktiviert. Der Standardwert dieses Schlüssels ist wahr. 

Sie können das Anzeigen / Ausblenden-Verhalten von QuickInfos auch mithilfe von steuern sich schneiden Schlüssel. Wenn eingestellt auf wahr, Dies ist auch der Standardwert dieser Taste. Die Tooltips werden nur angezeigt, wenn der Mauszeiger tatsächlich mit den Balken interagiert. Wenn eingestellt auf falsch, Die Tooltips werden basierend auf dem von der angegebenen Verhalten angezeigt Modus Schlüssel. 

Das Modus Mit der Taste wird festgelegt, welches Element in der QuickInfo angezeigt wird. Der Standardwert ist nächste. Dies bedeutet, wenn Sie einstellen sich schneiden zu falsch, Der Tooltip wird für die Leiste angezeigt, die dem Mauszeiger am nächsten ist.

Genau wie bei der Legende können Sie auch den Wert verschiedener fontbasierter Eigenschaften für QuickInfos steuern. Der einzige Unterschied besteht darin, dass die Werte diesmal für die Titel-, Haupt- und Fußzeilenelemente des Tooltips individuell festgelegt werden müssen. 

Sie können beispielsweise die Schriftarten-Eigenschaften des Hauptteils der QuickInfo mit ändern bodyFontFamily, bodyFontSize, bodyFontStyle, und bodyFontColor. Der Titel und die Fußzeile des Tooltips enthalten auch zusätzliche Eigenschaften titleMarginBottom und footerMarginTop. Sie können verwendet werden, um etwas zusätzlichen Abstand zwischen ihnen und dem Tooltip-Körper hinzuzufügen. 

In ähnlicher Weise können Sie links / rechts und oben / unten mit der Zusatztaste zusätzliche Auffüllung hinzufügen xPadding und yPadding Eigenschaften.

Sie können die Größe des Tooltip-Pfeils mithilfe von steuern caretSize Schlüssel. Der Hintergrund der Tooltips kann mit dem geändert werden Hintergrundfarbe Schlüssel.

var barChart = new Chart (popCanvas, type: 'bar'), data: data, Optionen: Tooltips: cornerRadius: 0, CaretSize: 0, xPadding: 16, yPadding: 10, backgroundColor: 'rgba (0, 150, 100, 0.9) ', titleFontStyle:' normal ', titleMarginBottom: 15);

Die obigen Optionen verbergen die Einfügemarke als caretSize ist auf 0 gesetzt. Hier ist eine funktionierende Demo, die die Optionen in Aktion zeigt. Bewegen Sie den Mauszeiger über die Balken, um den benutzerdefinierten Tooltip anzuzeigen.

Abschließende Gedanken

Dieses Tutorial bot eine grundlegende Einführung in die Chart.js-Bibliothek und zeigte, wie Sie damit Balkendiagramme erstellen können. Sie haben auch verschiedene Konfigurationsoptionen kennen gelernt, mit denen Sie das Aussehen verschiedener Diagramme steuern können. 

Obwohl wir im Tutorial nur Balkendiagramme verwendet haben, können die Konfigurationsoptionen auf alle Diagrammtypen angewendet werden. Im nächsten Tutorial erfahren Sie mehr über Liniendiagramme und Balkendiagramme.

JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Wenn Sie Fragen zu diesem Tutorial haben, lassen Sie es mich in den Kommentaren wissen.

Beachten Sie, dass die Bevölkerungsdaten aus diesen Zensusinformationen abgerufen wurden.