CSS -Kreisdiagramm
Beispiel 01:
Beginnen wir mit dem grundlegendsten Beispiel für das HTML -Styling, um ein Kreisdiagramm auf unserer HTML -Webseite zu erstellen. Dieses Beispiel beginnt mit den grundlegenden HTML -Tags - HTML, Kopf, Stil und Körper. Vor dem Stylen der HTML -Seite müssen wir uns alle Elemente über das Body -Tag ansehen. Der Körper unserer HTML -Seite enthält eine einzige Überschrift der größten Größe, ich.e. H1. Die Überschrift folgt dem Element „Div“, um einen neuen Abschnitt auf unserer Seite zu erstellen. Das DIV -Element wird mit einer Klassenklasse „piechartContainer“ angegeben und danach geschlossen. Der Körper dieser HTML -Seite ist hier abgeschlossen.
Jetzt haben wir einen Kopf, der dem Tag "Titel" folgt, um unserer Webseite einen Namen zu geben. Innerhalb des CSS -Styling -Tags dieses Code verwenden wir das „Körper“ -Element, um alle seine Elemente zuerst kombiniert zu stylen. Alle Körper enthalten die graue Hintergrundfarbe. Jetzt verwenden wir die Klasse „PieChartContainer“ mit dem Punkt (.) Charakter, um ein Kreisdiagramm zu erstellen. Das DIV -Element, das diese Klasse enthält.
Dabei verwenden wir die Eigenschaft von Hintergrundbild, um ein Kreisdiagramm mit seinem "Conic-Gradient" -Tribut zu erstellen. Wir müssen die unterschiedlichen Werte und Farben für drei Konic -Abschnitte des Kreisdiagramms für die Anweisungen X, Y und Z angeben. Der Gesamtwert von 3 Kegelschnitten mit drei Achsen - x, y und z - definiert die Fläche für jeden Abschnitt unterschiedlich. Lassen Sie uns das Style -Tag schließen, den Code speichern und diesen Code im Visual Studio -Code ausführen.
Die Ausgabe dieses HTML -Codes zeigt eine einzelne Überschrift und ein Kreisdiagramm, das auf der HTML -Webseite Bildschirm angezeigt wird. Das Kreisdiagramm zeigt 3 konische Abschnitte mit unterschiedlichen Farben und Prozentsätzen an.
Beispiel 02:
Beginnen wir mit einem weiteren Beispiel für HTML, um ein Kreisdiagramm eines neuen Stils zu erstellen. Das gleiche HTML -Format wird in dieser Datei verwendet. Wir werfen einen Blick auf den Körperbereich zusammen mit seinem Styling für jedes Element aus dem Style -Tag unseres Codes. Die gesamte Körperhintergrundfarbe wird über die für die “verwendete Eigenschaft„ Hintergrund “auf Grau eingestellt.Körperelement. Der Körper dieser HTML. Die Überschrift hat kein Styling, während dieses Container -Display gebeugt ist und die Elemente auf die Mitte ausgerichtet sind.
Innerhalb dieses Hauptbehälters erstellen wir zwei weitere Container mit dem „Div“ -Element. Die erste "Div" wird durch die ID "my-pie-chart" klassifiziert und die zweite "Div" wird durch die ID "Container" klassifiziert. Der erste „Div“ -Container mit dem „My-Pie-Chart“ wird verwendet, um ein Kreisdiagramm in einer Kreisform zu erstellen. Verwenden Sie dafür seine "My-Pie-Chart" -Klasse mit der Eigenschaft "Hintergrund" in einem Style-Tag. Das Attribut „Conic-Gradient“ wird mit unterschiedlichen Farben und deren Seitenverhältnis innerhalb von Prozent an die Hintergrundeigenschaft übergeben, um jede Farbe im Kreisdiagramm mit ausgewählten Prozentsatz und Fläche anzuzeigen. Die Border-Radius-Eigenschaft für dieses Kreisdiagramm ist auf 50% mit der Breite und der Höhe von 200px festgelegt.
Unser Kreisdiagramm wird in einer Kreisform erstellt. Die zweite DIV mit der ID „Container“ verwendet 8 weitere Container darin. Der "Div" -Container mit der ID "Container" enthält einen 30px linken Rand, Tee -Pink -Hintergrund und 5px -Polsterung. Die 8 Container in diesem Abschnitt „DIV“ werden durch die "Eintrags" -Klasse klassifiziert, die mit den Elementen Flex Display und Center ausgerichtet ist. Jedes "Div" -Element dieser 8 Container enthält 2 weitere Container darin. Der erste Container in jedem wird mit der Klassenklasse „Einstiegsfarbe“ und Inline-Styling klassifiziert. Die "Einstiegsfarbe" -Klasse für dieses erste "Div" wird verwendet, um die Breite und Höhe für alle 8 Abschnitte festzulegen, ich.e. 15px Breite und Höhe für jeden.
Der zweite DIV-Container wird zusammen mit dem Titel eines Kreisdiagramms für jeden Sektionsbereich mit dem „Einstiegstitle“ klassifiziert. Die oberen und linken Ränder für diesen Abschnitt sind auf 5px bzw. 3px eingestellt. Alle 4 Hauptelemente "Div" sind hier geschlossen. Lassen Sie uns diesen Code speichern und ausführen, um das Kreisdiagrammergebnis zu sehen.
Die Ausgabe zeigt 1 Überschrift und 1 Kreisdiagramm mit einem Container auf der linken Seite, in dem die Titel jeder Farbe des Kreisdiagramms angezeigt werden.
Beispiel 03:
Es beginnt mit der Überschrift 1 der größten Größe in HTML. Dann haben wir 5 „Div“ -Anlemente, die für die 5 Kreisdiagrammerstellung verwendet werden. Wir verwenden den gleichen Namen für alle 5 Divelemente, ich.e. Klasse = "Kuchen". Wir verwenden das Styling innerhalb jedes Div-Abschnitts, um den prozentualen Wert für jedes Kreisdiagramm mit der Verwendung des „-p“ -Scharakters auf 20, 40, 95, 80 und 75 festzulegen. Zusammen mit der Eigenschaft "-Col" wird die Farbe für jedes Kreisdiagramm mit Ausnahme der ersten festgelegt, ich.e. dunkelblau, lila, grün und gelb. Die X-, Y- und Z -Achsen sind für alle 4 Kreisdiagramme als die ersten festgelegt.
Schauen wir uns das Style -Tag dieser HTML -Seite an. Wir verwenden die Kuchenklasse, um das erste DIV -Element mit einem Prozentsatz von 20 mit der dunkelroten Farbe zu stylen. Auch „-B“ -Regranddicke, Breite, Seitenverhältnis, Anzeigestil, Ränder und unterschiedliche Schrift im Zusammenhang mit Schriftarten werden verwendet, um eine Standardkartendiagrammform zu erstellen. Die Vor- und Nachher -Sets werden verwendet, um keinen Inhalt hinzuzufügen und den Position und den Grenzradius für das Element vor und nach dem Kuchenklassenelement anzugeben. Einige andere Übergangs-, Transformations- und Übersetzungseigenschaften werden verwendet, um die Kreisdiagramme zu stylen.
Die Ausgabe für alle 5 Kreisdiagramme wird mit 5 verschiedenen Farben und Prozentsätzen angezeigt.
Abschluss
Dieser Artikel zeigt die immense Verwendung von Diagrammen und Diagrammen in verschiedenen Bereichen des Computer- und Lebensbereichs im Allgemeinen wie industrieller, wirtschaftlicher, Online -Internetbanking, E -Commerce und vielem mehr. Wir haben die verschiedenen HTML -Beispiele besprochen, um die Verwendung verschiedener und Standard -CSS -Styling -Eigenschaften zu veranschaulichen, die zum Erstellen von Kreisdiagrammen verwendet werden. Alle Beispiele zeigen sehr unterschiedliche Eigenschaften und doch ganz andere Kreisdiagramme für die HTML -Seiten.