Haupt / Wie Man

Verwenden Sie Chart.js, um Daten in interaktive Diagramme umzuwandeln

Seite 1 von 2: Verwenden von Chart.js: Schritte 01-10

Theoretisch ist das Erstellen von Diagrammen nicht schwierig. Die Handhabung der für ein Kreisdiagramm erforderlichen Trigonometrie gehört zu den klassischsten Aufgaben, die für die Schulung von Programmierern verwendet werden. Derzeit gibt es viele Diagrammbibliotheken, die um die Aufmerksamkeit der Entwickler wetteifern. In diesem Artikel konzentrieren wir uns jedoch auf die Verwendung des Open-Source-Tools Chart.js.

Wir werden die Bibliothek auf Herz und Nieren prüfen und aus zufällig generierten Daten eine Reihe druckbarer Diagramme erstellen. Chart.js ist besonders beliebt Webdesign-Tool weil es einen einzigartigen Kompromiss zwischen Benutzerfreundlichkeit und erweiterten Funktionen bietet, mit dem Sie interaktive Diagramme erstellen und ansprechen können Infografiken .

Mit Chart.js können Sie aus acht verschiedenen Diagrammtypen auswählen, die Sie mit minimalem Aufwand zu Ihren Websites hinzufügen möchten. Das kürzlich hinzugefügte Animationsmodul bereichert die Diagramme mit schick aussehenden Grafiken. Lass uns anfangen.

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

01. Stellen Sie die Bibliothek bereit

Da die Verwendung von Chart.js weit verbreitet ist, können Sie die minimierte Version von verschiedenen CDNs wie Cloudflare finden. Laden Sie es einfach mit einem Tag, und stellen Sie sicher, dass a Objekt ist in der Nähe - Chart.js zaubert mithilfe der in diesem Widget bereitgestellten Rendering-Infrastruktur.

02. Initialisierung starten

Laden Sie zunächst das Framework

Wenn das Framework geladen ist, wird im nächsten Schritt ein Canvas2D-Handle angezeigt, das auf das zeigt Instanz im vorherigen Schritt erstellt. Dies kann dann verwendet werden, um eine neue Instanz des zu erstellen Diagramm() Klasse, die für die Datenverarbeitung, das Rendern und die Interaktion verantwortlich ist.

 	(function() { 		var ctx = document. getElementById('workArea').getContext('2d'); 		var chart = new Chart(ctx,  { 			type: 'line', 			options: {}, 			. . . 		}); 	})();

03. Fügen Sie eine Datenquelle hinzu

Für unser Liniendiagramm ist nur ein DataSet erforderlich

Diagrammklassen verwenden einen Datenzeiger, der einen oder mehrere bereitstellt DataSet Objekte, die die tatsächlichen Messinformationen enthalten. Bei unserem Liniendiagramm wird nur ein DataSet benötigt. Es enthält das obligatorische Datenelement und einige optionale Parameter für den tatsächlichen Anzeigeprozess.

var chart = new Chart(ctx, { 	type: 'line', 	options: {}, 	data: { 	labels: ['January',  'February', 'March', 'April', 'May', 'June',  'July'], 	datasets: [{ 	label: 'My First dataset', 	backgroundColor:          'rgb(255, 99, 132)', 	borderColor:  'rgb(255, 99, 132)', 	data: [0, 10, 5,  	2, 20, 30, 45], 		}] 	} });

04. Hör auf zu flackern

Chart.js verfügt über eine ausgefeilte Größenänderungslogik, die - leider - von Zeit zu Zeit zu falschen Bildschirmgrößen führt. Begrenzung der Größe des Element über CSS macht leider nicht den Trick. Stattdessen müssen sowohl die Seitenverhältnispflege als auch die Reaktionsfähigkeit über das Optionsfeld deaktiviert werden, das dem Konstruktor für Diagrammklassen beiliegt.

  	(function() { 		var ctx = document. getElementById('workArea').getContext('2d'); 		var chart = new Chart(ctx,  { 		type: 'line', 		 options: {     responsive: false,maintainAspectRatio:  false},

05. Layouts hinzufügen

Um es mit Andrei Tupolev zu sagen: Jetzt, wo der Kleine fliegt, wollen wir den Größeren ansprechen. Das in diesem Schritt gezeigte Gerüst multipliziert unser Diagramm. Anstatt mit einem Canvas-Element zu arbeiten, erstellen wir jetzt insgesamt vier davon und ordnen sie ähnlich wie bei einem LeCroy-Oszilloskop auf dem Bildschirm an. Leider funktioniert dies nicht ganz wie beabsichtigt.

06. Zähme alle Renderfehler

Tags erzwingen eine Struktur von außen '>

Wrapper-Tags erzwingen eine Struktur von außen

Der sicherste Weg, Chart.js-Diagramme in komplexen Layouts zu verarbeiten, ist die Verwendung eines Wrappers Stichworte. Sie erzwingen eine Struktur von außen und stellen so sicher, dass die interne Layout-Engine nicht mehr Schaden anrichten kann als nötig. Stellen Sie in diesem Fall jedoch sicher, dass die Reaktionsfunktion wieder aktiviert wird.

 document.addEventListener('DOMContentL oaded', function(){ 	var ctx = document. getElementById('workArea').getContext('2d'); 			var chart = new  Chart(ctx, { 				type:  'line', 				options:  { },

07. Versuchen Sie Bars

Das Erstellen von Balkendiagrammen ist einfach

Das ständige Rendern von Liniendiagrammen wird schnell mühsam. Lassen Sie uns die Dinge aufpeppen, indem Sie die type-Eigenschaft in bar ändern und so Balkendiagramme wie das in der Abbildung zu diesem Schritt gezeigte erhalten. Wir fördern das 'globale' Datenfeld, um eine Wiederverwendung zu vermeiden.

 	document.addEventListener('DOMContentLoaded', function(){ 		var myfield = { 			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 			datasets: [{ 				label:  'My First dataset', 				 backgroundColor: 'rgb(255, 99, 132)', 				 borderColor: 'rgb(255, 99, 132)', 				data: [0, 10, 5, 2, 20, 30, 45], 			}] 		};  		. . . 		ctx = document. getElementById('workArea4').getContext('2d'); 		chart = new Chart(ctx, { 			type: 'bar', 			options: { }, 			data: myfield  		}); 	});

08. Vermeiden Sie Kuchen

Kreisdiagramme übernehmen den Bildschirm

Kreisdiagramme erfordern eine besondere Behandlung, wenn Sie nicht möchten, dass sie den gesamten Bildschirm ausfüllen

Theoretisch kann ein Kreisdiagramm entlang derselben Linien gerendert werden. Entfernen Sie die Farbeigenschaften, um ein einheitliches Erscheinungsbild zu verhindern, und setzen Sie die Typeneigenschaft auf pie. Leider funktioniert dies nicht ganz - wenn Sie fertig sind, füllt das Kreisdiagramm den gesamten Bildschirm aus. Dies wird durch eine Spezialität des Tortenrenderers verursacht, die die 'größere' der beiden Eigenschaften verwendet, um den Tortenradius zu bestimmen.

var mypie = { 		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 		datasets: [{ 			label: 'My First dataset', 			data: [0, 10, 5, 2, 20, 30, 45], 		}] 	}; ctx = document.getElementById('workArea2'). getContext('2d'); chart = new Chart(ctx, { 	type: 'pie', 	options: { }, 	data: mypie  });

09. Löse das Problem

Öffnen Sie die in Schritt 1 erstellte Datei 'index.js'. Geben Sie zunächst den Diagrammtyp als Linie an und fügen Sie die Daten hinzu, die wie unten gezeigt visuell dargestellt werden sollen.

10. Lassen Sie Chart.js das Diagramm neu skalieren

Ein anderer Ansatz zur Lösung des Problems besteht darin, das erneut zu deaktivieren Seitenverhältnis beibehalten Merkmal. Auf diese Weise kann die Diagramm-Engine das Diagramm nach Belieben neu skalieren, um sicherzustellen, dass der gesamte Kreis auf dem Bildschirm angezeigt wird.

ctx = document.getElementById('workArea2'). getContext('2d'); chart = new Chart(ctx, { 	type: 'pie', 	options: {maintainAspectRatio:false  }, 	data: mypie  });

Nächste Seite: Beenden Sie die Erstellung Ihres interaktiven Diagramms mit Chart.js