Share
Das vorherige Tutorial dieser Serie konzentrierte sich auf das Erstellen von Linien- und Balkendiagrammen mit Chart.js. Beide Diagramme haben ihre eigenen Verwendungen und Konfigurationsoptionen, die im letzten Tutorial ausführlich behandelt wurden.
In diesem Lernprogramm lernen Sie zwei neue Diagrammtypen kennen, die mit Chart.js erstellt werden können: Radar- und Polardiagramme. Wie im vorherigen Tutorial beginnen wir mit einem kurzen Überblick über die Diagrammtypen und gehen dann zu einer ausführlicheren Diskussion über.
Linien- und Balkendiagramme sind nützlich, wenn Sie nur eine oder zwei Eigenschaften einer großen Anzahl von Objekten vergleichen möchten, z. B. die Bevölkerungszahl aller Länder in Asien oder die Anzahl der verschiedenen Schadstoffe in der Atmosphäre.
Angenommen, Sie möchten Dichte, Opazität, Viskosität, Brechungsindex und Siedepunkt von nur drei verschiedenen Flüssigkeiten vergleichen. Das Erstellen eines Balkendiagramms für diese Daten ist problematisch, da Sie für jede Flüssigkeit fünf verschiedene Spalten erstellen müssen. Es wird auch schwierig sein, die entsprechenden Eigenschaften der Flüssigkeiten zu vergleichen.
In Situationen, in denen viele Eigenschaften von wenigen Objekten verglichen werden müssen, ist das Erstellen eines Radardiagramms die effizienteste Methode zum Visualisieren und Vergleichen von Daten. Diese Diagramme werden auch als Spinnendiagramme bezeichnet.
Von Wikipedia aus ist ein Radardiagramm eine grafische Methode zur Anzeige multivariater Daten in Form eines zweidimensionalen Diagramms mit drei oder mehr quantitativen Variablen, die auf Achsen dargestellt werden, die vom selben Punkt aus beginnen. Die relativen Positionen und Winkel der Achsen sind normalerweise nicht informativ.
Lassen Sie uns jetzt unser erstes Radardiagramm erstellen. Radardiagramme werden durch Einstellen von erstellt Art Geben Sie Chart.js ein Radar. Hier ist ein sehr einfaches Beispiel.
var radarChart = new Chart (marksCanvas, type: 'radar', data: marksData, Optionen: chartOptions);
Lassen Sie uns die Noten von zwei Schülern einer Klasse in fünf verschiedenen Fächern darstellen. Hier ist der Code zum Bereitstellen der Daten zum Erstellen des Diagramms.
var marksData = labels: ["Englisch", "Maths", "Physics", "Chemistry", "Biology", "History"], Datensätze: [label: "Student A", backgroundColor: "rgba (200, 0,0,0.2) ", Daten: [65, 75, 70, 80, 60, 80], Label:" Student B ", Hintergrundfarbe:" rgba (0,0,200,0,2) ", Daten: [54 65, 60, 70, 70, 75]]; var radarChart = new Chart (marksCanvas, type: 'radar', data: marksData);
Das erste Diagramm, das wir normalerweise erstellen, hat keine speziell von uns festgelegte Hintergrundfarbe. Radardiagramme können sich jedoch stark überlappen, so dass es schwierig ist, die Datenpunkte ohne Farbcodierung richtig zu identifizieren.
Aus diesem Grund wurde jedem Datensatz mit der Farbe eine Farbe zugewiesen Hintergrundfarbe Schlüssel. Die folgende Demo zeigt das Endergebnis unseres Codes. Wie Sie sehen, ist es jetzt sehr einfach, die Leistung beider Schüler in verschiedenen Fächern zu vergleichen.
Neben der Hintergrundfarbe können Sie auch die Randfarbe und die Randbreite für das Diagramm mit ändern Randfarbe und Rahmenbreite Schlüssel. Es ist auch möglich, gestrichelte Rahmen anstelle von durchgezogenen Linien mithilfe von zu erstellen borderDash Schlüssel. Dieser Schlüssel akzeptiert ein Array als Wert.
Das erste Element des Arrays bestimmt die Länge der Striche und das zweite Element den Abstand zwischen ihnen. Sie können auch einen Versatzwert für das Zeichnen der Striche mithilfe von angeben borderDashOffset Schlüssel.
Sie können die Randfarbe und -breite für geplottete Punkte auch mit steuern pointBorderColor und pointBorderWidth. Auf ähnliche Weise können Sie auch eine Hintergrundfarbe für verschiedene Punkte festlegen pointBackgroundColor Schlüssel. Die Größe der gezeichneten Punkte kann mit festgelegt werden pointRadius Schlüssel. Sie können die Entfernung, in der die Punkte mit der Maus interagieren sollen, mit der Taste steuern pointHitRadius Schlüssel.
Sie können auch die Darstellung der gezeichneten Punkte im Schwebeflug mit der Taste steuern pointHoverBackgroundColor, pointHoverBorderColor und pointHoverBorderWidth Schlüssel. Eine Sache, die Sie beachten müssen, ist, dass diese Hover-Tasten nicht darauf warten, dass Sie tatsächlich über dem Element schweben, um ausgelöst zu werden. Die Änderungen werden wirksam, sobald Sie sich innerhalb des oben festgelegten Trefferradius befinden.
Für gezeichnete Punkte stehen viele Formen zur Verfügung. Sie sind standardmäßig zirkulär. Sie können jedoch die Form in ändern Dreieck, Rect, rectRounded, rectRot, Kreuz, crossRot, Star, Linie, und Strich.
Verwenden Sie alle diese Tasten, um das vorherige Radardiagramm neu zu zeichnen. Hier finden Sie den Code, um Konfigurationsoptionen für die Datensätze und die Skalen bereitzustellen.
var marksData = labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"], Datensätze: [label: "Student A", backgroundColor: "transparent", borderColor : "rgba (200,0,0,0.6)", Füllung: falsch, Radius: 6, pointRadius: 6, pointBorderWidth: 3, pointBackgroundColor: "orange", pointBorderColor: "rgba (200,0,0,0.6)" , pointHoverRadius: 10, Daten: [65, 75, 70, 80, 60, 80], label: "Student B", backgroundColor: "transparent", borderColor: "rgba (0,0,200,0,6)", füllen : false, Radius: 6, PunktRadius: 6, PunktBorderWidth: 3, PunktHintergrundFarbe: "cornflowerblue", PunktBorderColor: "rgba (0,0,200,0,6)", PunktHoverRadius: 10, Daten: [54, 65, 60, 70, 70 , 75]]; var chartOptions = scale: ticks: beginAtZero: true, min: 0, max: 100, stepSize: 20, pointLabels: fontSize: 18, Legende: Position: 'left';
In der chartOptions Objekt, das Mindest und max Werte werden verwendet, um die Minimal- und Maximalwerte für die Waage festzulegen. Das Schrittlänge Mit der Taste kann Chart.js die Anzahl der Schritte angegeben werden, die ausgeführt werden müssen Mindest zu max. Hier ist das Endergebnis des obigen Codes.
Polare Flächendiagramme ähneln Kreisdiagrammen. Zwei Hauptunterschiede zwischen diesen Diagrammen sind, dass in Sektorbereichen alle Sektoren gleiche Winkel haben und der Radius jedes Sektors von dem aufgezeichneten Wert abhängt. Diese Diagramme werden verwendet, um zyklische Phänomene abzubilden. Sie können es beispielsweise verwenden, um die Anzahl der Zugvögel einer bestimmten Art in Ihrer Region zu jeder Jahreszeit zu zeichnen.
Der Radius jedes Sektors in diesen Diagrammen ist proportional zur Quadratwurzel der Anzahl der entsprechenden Objekte. Bei Zugvögeln ist der Radius proportional zur Quadratwurzel der Anzahl der Vögel in Ihrem Gebiet.
Sie können Polardiagramme in Chart.js erstellen, indem Sie die Option Art Schlüssel zu polarArea. Hier ist der grundlegende Code, den Sie zum Erstellen eines Polardiagramms benötigen.
var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', data: birdsData, Optionen: chartOptions);
Hier ist der Code, um die Anzahl der Zugvögel in einem Polarflächen-Diagramm darzustellen. An dieser Stelle werden nur die Anzahl der Vögel und die Hintergrundfarbe für die verschiedenen Jahreszeiten angegeben.
var birdsData = labels: ["Frühling", "Sommer", "Herbst", "Winter"], Datensätze: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0,5), rgba (100, 255, 0, 0,5), rgba (200, 50, 255, 0,5), rgba (0, 100, 255, 0,5)]; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', data: birdsData);
Der obige Code erstellt das folgende Polardiagramm.
Das Polarflächen-Diagramm bietet die üblichen Optionen zur Einstellung von Hintergrundfarbe, Rahmenbreite, Randfarbe, hoverBackgroundColor, hoverBorderWidth, und hoverBorderColor. Es gibt auch einige Polardiagramm-spezifische Schlüssel, mit denen Sie deren Aussehen anpassen können.
Sie können zum Beispiel den Startwinkel für den ersten Wert im Datensatz mit der Taste festlegen startAngle Schlüssel. Ebenso die lineArc Schlüssel, der unter zu finden ist Rahmen kann verwendet werden, um festzulegen, ob die gezeichneten Linien kreisförmig sein sollen oder nicht, indem der Wert auf festgelegt wird wahr oder falsch beziehungsweise.
Die im Polardiagramm gezeichneten Sektoren sind standardmäßig gedreht und skaliert. Sie können die Skalierungsanimation jedoch verhindern, indem Sie den Wert von festlegen animateScale Schlüssel zu falsch. In ähnlicher Weise kann die rotierende Animation durch Einstellen des Werts von deaktiviert werden animateRotate Schlüssel zu falsch. Diese beiden Tasten sind unter verfügbar Animation.
Der folgende Code ändert den Wert einiger Tasten, um das Diagramm optisch ansprechender zu machen.
var birdsData = labels: ["Frühling", "Sommer", "Herbst", "Winter"], Datensätze: [data: [1200, 1700, 800, 200], backgroundColor: ["rgba (255, 0, 0, 0,6), rgba (0, 255, 200, 0,6), rgba (200, 0, 200, 0,6), rgba (0, 255, 0, 0,6)], borderColor: rgba (0 0, 0, 0,8) "]; var chartOptions = startAngle: -Math.PI / 4, Legende: position: 'left', Animation: animateRotate: false; var polarAreaChart = new Chart (birdsCanvas, type: 'polarArea', data: birdsData, Optionen: chartOptions);
Neben dem Drehen des Diagramms und dem Deaktivieren der Rotationsanimation haben wir die Legende auch durch Setzen des Werts von links nach links verschoben Position zu links. Dadurch bleibt am oberen Rand des Diagramms genügend Platz, um es richtig anzuzeigen.
In diesem Lernprogramm haben Sie die Anwendungen von Radar- und Polargebietskarten kennen gelernt. Anschließend haben Sie gelernt, wie Sie grundlegende Diagramme erstellen und mit verschiedenen Konfigurationsoptionen in Chart.js anpassen. Im nächsten Teil der Serie erfahren Sie mehr über Kreis- und Blasendiagramme.
Wenn Sie mit dem Web arbeiten, insbesondere im Frontend, ist JavaScript wichtig zu wissen. Natürlich ist es 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, teilen Sie mir dies bitte in den Kommentaren mit.
Accentsconagua