Die Chart.js-Bibliothek vereinfacht das Hinzufügen von Diagrammen zu Webanwendungen

Wenn es um die Darstellung von Daten geht, fällt mir das alte Sprichwort "Ein Bild sagt mehr als tausend Worte" ein. Ein schönes Liniendiagramm oder Kreisdiagramm teilt in Sekunden mit, was es eine Stunde dauern kann, um es mit Worten zu erklären.

Desktop-Benutzer haben viele Optionen zum Arbeiten mit Daten und zum Erstellen von Diagrammen, z. B. Microsoft Excel und ähnliche Angebote in LibreOffice und OpenOffice.org. Für Webpräsentationen stehen Plug-Ins zur Verfügung. Diese können jedoch problematisch sein, wenn sie außerhalb einer kleinen Gruppe geteilt werden. Technologische Fortschritte mit HTML5 und JavaScript ermöglichen jedoch ein Paket wie Chart.js.

Die leere Leinwand

Das Erstellen von Diagrammen im Browser war schon immer erforderlich, war jedoch nicht immer ein einfacher oder konsistenter Prozess. In der Vergangenheit wurden Technologien wie ActiveX oder sogar Flash verwendet, aber die Reifung von Webtechnologien mit HTML5, CSS3 und JavaScript macht es im Browser viel möglicher. Insbesondere öffnet die Canvas-Funktion von HTML5 die Tür für umfangreichere grafische Elemente auf einer Webseite.

Grundsätzlich wird das Canvas-Element verwendet, um Grafiken im laufenden Betrieb zu zeichnen, normalerweise mit JavaScript. Das eigentliche Canvas-Element () ist der Container - ein Rechteckbereich. Es gibt verschiedene Methoden zum Erstellen von Formen und Text sowie zum Hinzufügen von Bildern. Im folgenden Beispiel wird ein schwarzes 300 x 300-Rechteck mit weißem Text erstellt.

 TechRepublic.com - HTML Canvas-Beispielfunktion createCanvas () {var cvs = document.getElementById ('exampleCanvas'); var ctx = cvs.getContext ('2d'); ctext.fillStyle = '# 000'; ctext.fillRect (0, 0, 300, 300); ctext.fillStyle = '#fff'; ctext.font = 'fett 20px serifenlos'; ctext.fillText ('TechRepublic.com Rules!', 20, 50); }} 

Die Chart.js-Bibliothek verwendet das Canvas-Element als Startrampe für ein Paket mit allen Funktionen zum Erstellen und Präsentieren von Diagrammen im Web.

Wählen Sie Ihren Diagrammtyp

Chart.js ist eine frei verfügbare (vollständig erweiterbare / anpassbare) Bibliothek, die auf GitHub gehostet wird. Die vollständige Quelldatei ist 44 KB groß. die minimierte Version ist nur 20 kb; und es fällt auf 4, 5k, wenn es komprimiert wird. Es ist nicht von einer anderen Bibliothek abhängig. Es verwendet das HTML Canvas-Element, sodass die Browserunterstützung auf seiner Website als moderne Browser aufgeführt wird. Ältere Browser werden jedoch über Polyfills unterstützt. Hierbei handelt es sich um herunterladbaren Code, der Funktionen bietet, die nicht in einen Webbrowser integriert sind.

Sie können die Chart.js-Bibliothek anpassen, um das von Ihnen visualisierte Diagramm zu erstellen. Die Bibliothek bietet standardmäßig sechs grundlegende Designs.

  • Linie: Zeigen Sie Ihre Daten als Spitzen und Täler eines Liniendiagramms an.
  • Balken : Demonstrieren Sie Trends mit vielen unterschiedlich geformten Balken.
  • Radar: Präsentieren Sie Daten genau wie Ihren lokalen Meteorologen.
  • Torte: Präsentieren Sie Daten als Scheiben des Gesamtkreises.
  • Polarbereich: Es ist einfacher, die Dokumentation in diesem Diagramm zu zitieren, da sie Kreisdiagrammen ähnelt. Die Variable ist nicht der Umfang des Segments, sondern der Radius.
  • Donut: Stellen Sie sich ein Kreisdiagramm vor, das in Donutform dargestellt wird. Der innere Kreis oder das Loch in der Mitte ist anpassbar.

Die Basis von allem ist das Diagrammobjekt, das Methoden zum Erstellen und Bearbeiten der Diagrammtypen enthält. Die Verwendung des Diagrammobjekts ist ein einfacher Vorgang. Die folgenden Schritte bieten den grundlegenden Ansatz zum Erstellen von Diagrammen mithilfe der Bibliothek.

  1. Fügen Sie die Bibliothek Chart.js in die Webseite ein.
  2. Erstellen Sie ein Canvas-Element auf der Webseite.
  3. Rufen Sie im Skript den Kontext des Canvas-Elements ab.
  4. Stellen Sie Daten zusammen, die zum Füllen des Diagramms verwendet werden sollen.
  5. Erstellen Sie das Diagramm über ein Skript. Übergeben Sie das Kontextelement an das Diagramm und einzelne Methoden, um den Diagrammtyp zu erstellen (Daten und Optionen, die über die Methode übergeben werden).

Das Chart-Objekt verfügt über Methoden für jeden Diagrammtyp mit leicht zu merkenden Namen wie Bar, Donut, Line, Pie, PolarArea und Radar - Syntax, die nicht einfacher sein kann. Die einzige Einschränkung ist, dass die Daten als Array an jeden der Diagrammtypen übergeben werden, wobei das Format vom Typ abhängt. Im folgenden Beispiel wird ein Balkendiagramm erstellt, das den Abwärtstrend der Gewinne für die Philadelphia Phillies von 2010 bis 2012 zeigt.

 TechRepublic.com Beispielfunktion createChart () {var data = {labels: "Apr", "May", "Jun", "Jul", "Aug", "Sep", Datensätze: {fillColor: "rgba ( 225, 0, 0, 1), stroColor: rgba (225, 0, 0, 1), Daten: 12, 16, 13, 15, 18, 21}, {fillColor: rgba (0, 26, 225, 1), stroColor: rgba (0, 26, 225, 1), Daten: 18, 16, 17, 17, 18, 16}, {fillColor: rgba (24, 31, 28, 0, 5) ", StrokeColor:" rgba (24, 31, 28, 0, 5) ", Daten: 11, 16, 9, 10, 17, 17}} var cht = document.getElementById ('trChart'); var ctx = cht.getContext ('2d'); var barChart = neues Diagramm (ctx) .Bar (Daten); }} 

Wie das Beispiel zeigt, akzeptiert das Balkendiagramm zwei Arrays für die Beschriftungen und Datensätze. Die Daten haben viele Optionen (in der Dokumentation behandelt), aber wir verwenden nur die Füllfarbe (für tatsächliche Balken) und die Daten. Abbildung A zeigt das in Chrome geladene Diagramm.

Abbildung A.

Ein Beispiel für die Verwendung des Balkendiagramms "Chart.js".

Der Konstruktor für jeden Diagrammtyp akzeptiert einen zweiten optionalen Parameter, mit dem die verschiedenen Formatierungsoptionen angegeben werden können. Mit diesen können Sie Eigenschaften wie Skalierung, Farben, Schriftart usw. ändern.

Das nächste Code-Snippet ändert unser vorheriges Beispiel, um einige der verfügbaren Optionen zum Ändern der Präsentation zu verwenden. Abbildung B zeigt das mit diesen Optionen dargestellte Diagramm.

 Funktion createChart () {var data = {Beschriftungen: "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", Datensätze: {fillColor: "rgba (225, 0, 0, 1) ", Daten: 12, 16, 13, 15, 18, 21}, {fillColor:" rgba (0, 26, 225, 1) ", Daten: 18, 16, 17, 17, 18, 16}, {fillColor: "rgba (24, 31, 28, 0, 5)", Daten: 11, 16, 9, 10, 17, 17}} var options = {scaleOverlay: true, scaleShowGridLines: true, scaleOverride: true, scaleSteps: 4, scaleStepWidth: 5, scaleStartValue: 0, scaleLineColor: "rgba (0, 0, 0, .1)", scaleLineWidth: 1, scaleShowLabels: true, scaleFontSize: 16, scaleFontColor: "# 000", barDatasetSpacing: 2, barStrokeWidth: 2}; var cht = document.getElementById ('trChart'); var ctx = cht.getContext ('2d'); var barChart = neues Diagramm (ctx) .Bar (Daten, Optionen); }} 

Abbildung B.

Balkendiagramm mit verschiedenen Optionen.

In der Dokumentation zu Chart.js wird angegeben, dass es mit modernen Browsern funktioniert. Bei älteren Browsern wie Internet Explorer 7 oder 8 können jedoch Probleme auftreten. Die Dokumentation enthält Informationen zu Problemumgehungen zur Unterstützung älterer Browser.

Sehen heißt glauben

Ich bin auf die Chart.js-Bibliothek gestoßen, als ich nach einer Lösung für eine andere Entwicklungsherausforderung gesucht habe, aber ich habe sie für ein anderes Projekt im Hinterkopf behalten, bei dem der Kunde Diagramme in seine Site aufnehmen wollte. Da es sich um eine Intranetlösung handelte, war der Browser etwas kontrolliert, obwohl ich viele Probleme mit älteren Browsern nicht lösen musste. Die Bibliothek hat gute Leistungen erbracht und alles für das Projekt bereitgestellt.

Mit Chart.js können Sie schnell grundlegende Diagramme erstellen und bereitstellen. Es wird interessant sein zu sehen, ob oder wie sich die Bibliothek entwickelt. Derzeit erfüllt die Chart.js-Bibliothek einen Bedarf.

© Copyright 2021 | mobilegn.com