Share
Sie haben bis jetzt vier verschiedene Diagrammtypen in Chart.js kennen gelernt. Das zweite Tutorial der Serie umfasste Linien- und Balkendiagramme. Das dritte Tutorial behandelte Radar- und Polargebietskarten. In diesem Lernprogramm erfahren Sie, wie Sie Chart.js zum Erstellen von Kreis-, Donut- und Blasendiagrammen verwenden.
Kreis- und Donutdiagramme sind nützlich, wenn Sie den Anteil anzeigen möchten, in dem etwas auf verschiedene Entitäten aufgeteilt wird. Sie können beispielsweise Kreisdiagramme verwenden, um den Prozentsatz von Männern, Frauen und jungen Löwen in einem Wildpark oder den Prozentsatz der Stimmen anzuzeigen, die verschiedene Kandidaten bei einer Wahl erhalten haben.
Kreisdiagramme sind nur hilfreich, wenn Sie einen bestimmten Parameter oder einen Datensatz miteinander vergleichen möchten. Es ist wichtig zu beachten, dass Sie keine Kreisdiagramme zum Zeichnen von Objekten verwenden können, deren Werte Null sind, da der Winkel der Sektoren in einem Kreisdiagramm von der Größe der Datenpunkte abhängt.
Dies bedeutet, dass keine Entität, deren Anteil null ist, überhaupt nicht im Diagramm angezeigt wird. Ebenso können Sie keine negativen Werte in einem Kreisdiagramm darstellen. Sie können Kreisdiagramme in Chart.js erstellen, indem Sie das Symbol Art Schlüssel zu Kuchen. In ähnlicher Weise können Sie Donut-Diagramme erstellen, indem Sie das festlegen Art Schlüssel zu Krapfen. Hier ein Beispiel zum Erstellen dieser beiden Diagramme:
var pieChart = new Chart (votesCanvas, type: 'pie', Daten: votesData, Optionen: chartOptions); var doughnutChart = new Chart (votesCanvas, Typ: 'Donut', Daten: votesData, Optionen: chartOptions);
Lassen Sie uns ein Kreisdiagramm erstellen, das die Ölexportdaten der Top-5-Länder im Jahr 2015 zeigt. Die Daten sind in Milliarden US-Dollar.
var data = labels: ["Saudi-Arabien", "Russland", "Irak", "Vereinigte Arabische Emirate", "Kanada"], Datensätze: [: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"]];
Sie können das Aussehen des obigen Diagramms mit verschiedenen Tasten steuern, z AusschnittPercentage, Dies gibt den Prozentsatz des Diagramms an, das aus der Mitte ausgeschnitten wird. Sie können den Startwinkel des Diagramms auch mit angeben Drehung Schlüssel. In ähnlicher Weise können Sie auch den Winkel angeben, den das Diagramm beim Zeichnen der Daten mit dem Diagramm überstreicht Umfang Schlüssel.
Es gibt zwei verschiedene Animationen, die beim Zeichnen eines Diagramms aktiviert werden können. Sie können festlegen, ob das Diagramm eine Rotationsanimation enthalten soll animateRotate Schlüssel. In ähnlicher Weise können Sie auch angeben, ob das Donutdiagramm von der Mitte aus mit dem skaliert werden soll animateScale Schlüssel. Der Wert von animateRotate ist eingestellt auf wahr standardmäßig und den Wert für animateScale ist eingestellt auf falsch standardmäßig.
Wie üblich können Sie die Hintergrundfarbe, die Randfarbe und die Randbreite aller Datenpunkte mithilfe von steuern Hintergrundfarbe, Randfarbe, und Rahmenbreite Tasten jeweils. In ähnlicher Weise können die Hover-Werte aller dieser Eigenschaften mithilfe von gesteuert werden hoverBackgroundColor, hoverBorderColor, und hoverBorderWidth Schlüssel.
Hier ist der Code zum Erstellen eines Donut-Diagramms für die obigen Daten. Wert für einstellen Drehung gleich -Math.PI nimmt diesen Startpunkt um 180 Grad gegen den Uhrzeigersinn. Setzen Sie dann den Wert von Umfang zu Math.PI macht das Diagramm nur über einen Halbkreis.
var oilData = labels: ["Saudi-Arabien", "Russland", "Irak", "Vereinigte Arabische Emirate", "Kanada"], Datensätze: [data: [133.3, 86.2, 52.2, 51.2, 50.2], backgroundColor : ["# FF6384", "# 63FF84", "# 84FF63", "# 8463FF", "# 6384FF"], borderColor: "black", borderWidth: 2]; var chartOptions = rotation: -Math.PI, cutPercentage: 30, Umfang: Math.PI, Legende: Position: 'left', Animation: animateRotate: false, animateScale: true;
Blasendiagramme werden zum Zeichnen oder Anzeigen von drei Dimensionen verwendet (p1, p2, p3) von Daten in einem Diagramm. Die Position und Größe der Blasen bestimmt den Wert dieser drei Datenpunkte. Die horizontale Achse repräsentiert den ersten Datenpunkt (p1), die vertikale Achse repräsentiert den zweiten Datenpunkt (p2) und der Bereich der Blase wird verwendet, um den Wert des dritten Datenpunkts darzustellen (p3).
Denken Sie daran, dass die Größe des dritten Datenpunkts nicht durch den Radius der Blasen, sondern durch deren Bereich dargestellt wird. Nun ist die Fläche eines Kreises proportional zum Quadrat des Radius. Das bedeutet, dass Sie sicherstellen müssen, dass der Radius der Blase, die Sie zeichnen, proportional zur Quadratwurzel der Größe des dritten Datenpunkts ist.
Sie können Blasendiagramme in Chart.js erstellen, indem Sie den Wert von festlegen Art Schlüssel zu Blase. Hier ist ein Beispiel zum Erstellen eines Blasendiagramms.
var bubbleChart = new Chart (popCanvas, Typ: 'Blase', Daten: PopData, Optionen: ChartOptions);
Lassen Sie uns das Gewicht der verschiedenen Elemente in einem Raum mit Hilfe eines Blasendiagramms darstellen. Die Daten für das Diagramm müssen in Form eines Objekts übergeben werden. Das Datenobjekt muss über die folgende Schnittstelle verfügen, damit es korrekt gezeichnet werden kann.
x:, y: , r:
Ein wichtiger Unterschied zwischen Blasendiagrammen und allen anderen Diagrammen ist, dass der Blasenradius nicht mit dem Diagramm skaliert wird.
Beispielsweise kann die Breite der Balken in einem Balkendiagramm je nach Diagrammgröße erhöht oder verringert werden. Mit Blasendiagrammen passiert dasselbe nicht. Der Radius der Blasen ist immer gleich der von Ihnen angegebenen exakten Pixelanzahl. Dies ist sinnvoll, da bei diesem Diagrammtyp der Radius tatsächlich zur Darstellung von realen Daten verwendet wird.
Erstellen wir ein Blasendiagramm, um die Population der Hirsche an verschiedenen Stellen in einem Wald darzustellen.
var popData = Datensätze: [label: ['Deer Population'], Daten: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# FF9966"];
Da der Radius hier proportional zur Quadratwurzel der tatsächlichen Größe ist, ist die Anzahl der Hirsche bei (80, 80) 100-mal höher als die Anzahl der Hirsche bei (0, 100)..
Wie bei allen anderen Diagrammtypen können Sie die Hintergrundfarbe, die Randfarbe und die Randbreite der gezeichneten Punkte mithilfe von festlegen Hintergrundfarbe, Randfarbe, und Rahmenbreite Schlüssel. Auf ähnliche Weise können Sie auch die Hintergrundfarbe des Hover, die Farbe des Hover-Rahmens und die Breite des Hover-Randes mit angeben hoverBackgroundColor, hoverBorderColor, und hoverBorderWidth Schlüssel.
Sie können auch den zusätzlichen Radius angeben, den Sie verschiedenen Blasen im Schwebeflug hinzufügen möchten HoverRadius Schlüssel. Denken Sie daran, dass dieser Radius zum ursprünglichen Wert hinzugefügt wird, um die schwebende Blase zu zeichnen. Wenn die ursprüngliche Blase einen Radius von 10 und hatte HoverRadius auf 5 gesetzt ist, wird der Radius der Blase im Schwebeflug 15 betragen.
var popData = Datensätze: [label: ['Deer Population'], Daten: [x: 100, y: 0, r: 10, x: 60, y: 30, r: 20, x : 40, y: 60, r: 25, x: 80, y: 80, r: 50, x: 20, y: 30, r: 25, x: 0, y: 100, r : 5], backgroundColor: "# 9966FF", hoverBackgroundColor: "# 000000", hoverBorderColor: "# 9966FF", hoverBorderWidth: 5, hoverRadius: 5];
Die obigen Parameter erstellen das folgende Blasendiagramm.
In diesem Lernprogramm haben Sie drei weitere Diagrammtypen kennen gelernt, die in Chart.js verfügbar sind. Sie sollten jetzt in der Lage sein, den geeigneten Diagrammtyp für die Darstellung Ihrer Daten auszuwählen und bestimmte Werte für verschiedene Schlüssel festzulegen, um deren Aussehen zu steuern. Im nächsten Lernprogramm erfahren Sie, wie Sie die Skalen für verschiedene Diagrammtypen bearbeiten.
Ich hoffe, Ihnen hat dieses Tutorial gefallen. Wenn Sie Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit.
Accentsconagua