Verwenden Sie die Diagrammbibliothek von Chart.j, um schöne responsive Formen zu erstellen. Javascript-Tipps

Grundlagen für den Einstieg

Chart.js ist eine auf HTML5 basierende Open-Source-Diagrammbibliothek, mit der sich schöne Diagramme bequem und prägnant zeichnen lassen.

Zu den wichtigsten Funktionen gehören:

1. Unterstützt 6 verschiedene Tabellentypen: Kurvendiagramm, Balkendiagramm, Kreisdiagramm, Radardiagramm, Polarkoordinaten-Flächendiagramm und Ringdiagramm.
2. Basierend auf HTML5 entwickelt und unterstützt alle Browser (einschließlich IE7/8).
3. Es ist nicht von anderen Bibliotheken abhängig, hat nur eine Größe von 4,5 KB und kann angepasst werden.

Chart.js ist eine reaktionsfähige, flexible und leichte Diagrammbibliothek, die auf HTML5-Canvas basiert. In der Bibliothek stehen sechs verschiedene Diagrammtypen mit jeweils einer Reihe von Anpassungsoptionen zur Verfügung. Wem das nicht reicht, der kann auch eigene Diagrammtypen erstellen.

Der Code für die sechs Diagrammtypen von Chart.js ist insgesamt nur 11 KB groß und ist gzip-komprimiert. Darüber hinaus ist die Bibliothek modular, sodass Sie nur die Diagrammtypen verwenden können, die Sie benötigen, was noch mehr Platz spart. Unten finden Sie den cdnjs-Link, der die Bibliothek enthält.

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Verfügbare Einstellungen

Von Tooltips bis hin zu Animationseffekten (Anmerkung des Korrektors: Tooltip bezieht sich auf den Tooltip, der angezeigt wird, wenn die Maus über ein Element bewegt) – mit Chart.js können Sie fast alle Eigenschaften des Diagramms ändern. In diesem Abschnitt ändere ich einige Einstellungen, um zu zeigen, wie Chart.js erstellt wird. Wir beginnen mit dem folgenden HTML-Code:

XHTML

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

Für die erste Präsentation werde ich ein Liniendiagramm erstellen. Damit das Diagramm sinnvoll ist, müssen einige grundlegende Optionen festgelegt werden. Liniendiagramme erfordern eine Reihe von Beschriftungen und einen Datensatz. Auf der X-Achse werden Beschriftungen angezeigt. Ich habe einige Daten für ein Liniendiagramm modelliert, aufgeteilt in ein Array, jedes mit seiner eigenen Füllfarbe, Linie und Punktmenge.

In diesem Beispiel habe ich fillColor auf transparent gesetzt. Wenn Sie keinen fillColor-Wert festlegen, wird standardmäßig Schwarz oder Grau verwendet. Das Gleiche gilt auch für andere Werte. Farben werden mit den Formaten RGBA, RGB, Hex oder HSL definiert, genau wie CSS.

JavaScript

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

Globale Optionen festlegen

Im Code habe ich einige globale Werte festgelegt. animationSteps bestimmt die Dauer der Animation. Bei Bedarf können Sie weitere Optionen ändern, z. B. „scaleLineColor“ und „scaleIntegersOnly“. Ich empfehle, die Chart.js-Dokumentation zu durchsuchen, um zu sehen, welche anderen Optionen in der Bibliothek verfügbar sind.

JavaScript

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

Exklusive Diagrammoptionen festlegen

Zusätzlich zu den globalen Optionen gibt es einige Konfigurationsoptionen für bestimmte Diagrammtypen. In diesem Liniendiagramm werde ich solche Optionen festlegen und hoffe, Sie zu inspirieren:

JavaScript

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

Von Chart.js generierte Diagramme reagieren standardmäßig nicht. Wenn Sie „responsive“ auf „true“ setzen, wird daraus ein responsives Diagramm. Wenn Sie jedes Diagramm responsiv machen müssen, empfehle ich, einen globalen Wert festzulegen, etwa diesen:

JavaScript

Chart.defaults.global.responsive = true;

Unten sehen Sie ein Beispiel dieses Liniendiagramms:

See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.

Dynamische Daten hinzufügen und entfernen

Manchmal müssen Sie Daten anzeigen, die sich ständig ändern. Ein typisches Beispiel für dieses Anwendungsszenario ist die Börse. In diesem Abschnitt erstelle ich ein Säulendiagramm und füge Daten hinzu, während ich Daten dynamisch lösche. In diesem Beispiel verwende ich einige Zufallsdaten und präsentiere die Daten als Säulendiagramm. Der größte Teil des Codes in diesem Beispiel ähnelt dem vorherigen Beispiel. Sobald wir unser HTML haben (wie im vorherigen Beispiel), können wir unser eigenes JavaScript hinzufügen.

Zuerst müssen wir Code schreiben, um das Diagramm mit dynamischen Daten zu füllen. Ich verwende einen Funktionsausdruck, um einen Zufallswert zu generieren und ihn dann einer Variablen dData zuzuweisen. Diese Werte liefern uns zufällige Daten, wenn wir sie ändern müssen. Wie im vorherigen Beispiel habe ich ein Label-Array und einen Datensatz erstellt und eine beliebige FillColor festgelegt.

JavaScript

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

Jetzt ist es an der Zeit, den Code zu schreiben, um Balken in unserem Diagramm zu entfernen und hinzuzufügen. Zu Beginn haben wir den Indexwert auf 11 initialisiert und ich habe zwei Methoden verwendet: removeData() und addData(valuesArray,label). Durch Aufrufen der Methode „removeData()“ der Instanz wird der erste Wert aus allen Datensätzen im Diagramm entfernt. Im barChartDemo-Beispiel wird der erste Wert des Datensatzes entfernt. Der Aufruf von addData() übergibt einen Array-Wert zusammen mit der Beschriftung und fügt am Ende des Diagramms einen neuen Datenknoten hinzu. Der folgende Codeausschnitt aktualisiert das Diagramm alle 3 Sekunden.

JavaScript

var index = 11;
var ctx = document.getElementById('canvas').getContext('2d');
var barDemo = new Chart(ctx).Bar(barData, {
 responsive: true
});
setInterval(function() {
 barDemo.removeData();
 barDemo.addData([dData()], 'dD ' + index);
 index++;
}, 3000);

Eine andere Möglichkeit, Diagrammwerte zu aktualisieren, besteht darin, die Werte direkt festzulegen. Im folgenden Beispiel setzt die erste Zeile den Wert des zweiten Balkens des ersten Datensatzes auf 60. Wenn Sie an dieser Stelle aktualisieren, wird der aktuelle Wert des Balkens auf 60 animiert.

JavaScript

barDemo.datasets[0].bars[2].value = 60;
barDemo.update();

这里是柱形图的示例（由SitePoint在CodePen上创建）：

See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。