Kreisdiagramme sind eine der beliebtesten Möglichkeiten, Daten zu visualisieren. Sie ermöglichen es Ihnen, das Verhältnis zwischen verschiedenen Kategorien und dem Prozentsatz ihrer Werte deutlich darzustellen. Eine Art von Kreisdiagrammen ist ein Strich-Kreisdiagramm, das zusätzliche Informationen hinzufügt und die Visualisierung verständlicher und attraktiver macht.
Das Erstellen eines Strich-Kreisdiagramms klingt kompliziert, aber tatsächlich besteht der gesamte Prozess aus nur wenigen einfachen Schritten. In diesem Artikel werden wir uns ansehen, wie Sie ein Strich-Kreisdiagramm mit HTML und CSS erstellen.
Schritt 1: Bereiten Sie die Daten für das Diagramm vor. Legen Sie die Kategorien und Werte fest, die im Diagramm angezeigt werden sollen. Wenn Sie beispielsweise ein Diagramm erstellen, um den Umsatz verschiedener Artikel darzustellen, entspricht jedem Artikel ein bestimmter Prozentsatz des Umsatzes.
Schritt 2: Erstellen Sie eine Basis für das Diagramm mit HTML. Verwenden Sie ein Element mit einer eindeutigen ID, die es uns ermöglicht, in CSS darauf zuzugreifen.
Schritt 3: Definieren Sie die Stile für das Diagramm mithilfe von CSS. Legen Sie die Größen, Farben und anderen Eigenschaften fest, die Sie für notwendig halten, um den gewünschten visuellen Effekt zu erzielen. Vergessen Sie nicht, Stile für die Schraffur des Diagramms hinzuzufügen.
Schritt 4: Verwenden Sie die CSS-Eigenschaft "border-radius", um eine kreisförmige Form zu erstellen. Verwenden Sie zum Erstellen einer Schraffur die CSS-Eigenschaft "background-image" in Kombination mit "linear-gradient".
Schritt 5: Verwenden Sie die CSS-Eigenschaft "transform" und die Pseudo-Elemente (::before, ::after), um ein Strichdiagramm in verschiedene Segmente zu unterteilen. Weisen Sie jedem Segment mithilfe der CSS-Eigenschaft "rotate" einen bestimmten Rotationswinkel zu.
Nachdem Sie nun einige einfache Schritte zum Erstellen eines Strich-Kreisdiagramms kennen, können Sie es erstellen und verwenden, um die Daten in Ihren Projekten visuell darzustellen.
Schritte zum Erstellen eines Strich-Kreisdiagramms
Schritt 1: Definieren Sie die Daten, die Sie in Ihrem Diagramm darstellen möchten. Stellen Sie sicher, dass Sie für jede Kategorie oder jeden Sektor, den Sie anzeigen möchten, numerische Werte haben.
Schritt 2: Verwenden Sie das Tag, um eine Leinwand zu erstellen, auf der das Diagramm gezeichnet wird. Legen Sie die Breite und Höhe der Leinwand mithilfe der Attribute width und height fest.
Schritt 3: Rufen Sie den Zeichenkontext der Leinwand mithilfe der getContext() -Methode ab. Geben Sie an, dass Sie einen 2D-Grafikkontext erstellen möchten.
Schritt 4: Berechnen Sie die Winkelwerte für jeden Sektor in Ihrem Diagramm basierend auf den numerischen Werten, die Sie zuvor definiert haben.
Schritt 5: Verwenden Sie die arc() -Methode des Zeichnungskontexts, um jeden Diagrammsektor zu erstellen. Legen Sie den Radius des Diagramms, den Anfangswinkel und den Endwinkel für jeden Sektor fest. Stellen Sie sicher, dass jeder Sektor beginnt und endet, wo er sein sollte, damit das Diagramm kreisförmig ist.
Schritt 6: Verwenden Sie die stroke() -Methode des Zeichnungskontexts, um die Konturen jedes Sektors Ihres Diagramms zu zeichnen. Stellen Sie die Konturfarbe und -dicke Ihrer Wahl ein.
Schritt 7: Fügen Sie jedem Diagrammsektor eine Schraffur hinzu, indem Sie die createPattern() -Methode des Zeichnungskontexts verwenden. Legen Sie die Schraffurgröße und -stil Ihrer Wahl fest. Füllen Sie jeden Sektor des Diagramms mit dem resultierenden Muster aus.
Schritt 8: Zeichnen Sie eine Legende für Ihr Diagramm, indem Sie die Namen jeder Kategorie oder jedes Sektors und die entsprechende Farbe oder das entsprechende Muster angeben.
Schritt 9: Fügen Sie Ihrem Diagramm einen Titel und andere zusätzliche Details hinzu, um es verständlicher und informativer zu machen.
Schritt 10: Bereiten Sie Ihr Diagramm für die Anzeige auf einer Webseite mit einem Tag vor . Legen Sie das src-Attribut fest, um eine Diagrammbilddatei anzugeben.
Programm auswählen
Wenn Sie ein Kreisdiagramm erstellen, müssen Sie ein geeignetes Programm auswählen, das die notwendigen Werkzeuge und Funktionen zum Erstellen des Diagramms bereitstellt.
Es gibt viele Programme und Anwendungen, mit denen Sie grafische Elemente, einschließlich Kreisdiagramme, erstellen und bearbeiten können. Betrachten wir einige beliebte Optionen:
1. Microsoft Excel: Excel ist eines der bekanntesten Softwareprodukte zum Erstellen verschiedener Diagrammtypen, einschließlich kreisförmiger Diagramme. Excel bietet eine breite Palette von Werkzeugen zum einfachen Erstellen und Anpassen von Diagrammen in einer benutzerfreundlichen Oberfläche.
2. Google Sheets: Google Sheets ist eine kostenlose Alternative zu Microsoft Excel und bietet ähnliche Funktionen zum Erstellen von Diagrammen. Es macht es auch einfach, Diagramme in verschiedenen Formaten zu importieren und zu exportieren.
3. Adobe Illustrator: Adobe Illustrator ist ein professionelles Programm zum Erstellen von Grafiken und Vektorgrafiken. Es bietet eine breite Palette von Werkzeugen und Funktionen zum Erstellen komplexer und qualitativ hochwertiger Kreisdiagramme. Dieses Programm ist jedoch schwieriger zu erlernen und kann einige Fähigkeiten im Grafikdesign erfordern.
4. Canva: Canva ist ein praktischer Online-Service zum Erstellen von Designs, einschließlich Diagrammen. Mit Canva können Sie verschiedene Diagrammtypen, einschließlich kreisförmiger Diagramme, einfach mit vorgefertigten Vorlagen und einer intuitiven Benutzeroberfläche erstellen und anpassen.
5. Lucidchart: Lucidchart ist ein Online-Programm zum Erstellen von Diagrammen und Diagrammen, einschließlich Kreisdiagrammen. Es bietet verschiedene Werkzeuge und Funktionen zum Erstellen und Anpassen von Diagrammen und ermöglicht die Zusammenarbeit mit anderen Benutzern.
Bei der Auswahl eines Programms zum Erstellen eines Bar-Kreisdiagramms ist es wichtig, Ihre Bedürfnisse, Ihr Wissen und die Verfügbarkeit der erforderlichen Funktionen zu berücksichtigen. Wenn Sie ein geeignetes Programm auswählen, können Sie Ihr Diagramm einfach erstellen und die Daten visualisieren.
Datenaufbereitung
Listen Sie alle Kategorien oder Werte auf, die Sie im Diagramm anzeigen möchten. Markieren Sie jede Kategorie oder jeden Wert und weisen Sie ihnen einen Prozentsatz zu. Die Summe aller Zinsen sollte 100% betragen.
Angenommen, Sie möchten ein Diagramm erstellen, um die Ausgaben pro Monat darzustellen. Sie haben die folgenden Kategorien: Miete (30%), Essen (20%), Transport (15%), Unterhaltung (10%) und mehr (25%).
Es ist wichtig, den Prozentsatz jeder Kategorie oder jeden Wert richtig zu bewerten, da sonst das Diagramm keine relevanten Informationen anzeigt.
Erstellen eines Kreisdiagramms
Schritt 1: Definieren von Daten
Bevor Sie ein Kreisdiagramm erstellen können, müssen Sie die Daten definieren, die Sie darstellen möchten. Sie können beispielsweise Daten darüber haben, wie viel Zeit Sie für verschiedene Aktivitäten ausgeben: Arbeit, Freizeit, Studium usw. Diese Daten hängen davon ab, wie das Kreisdiagramm aussehen wird.
Schritt 2: Berechnung des Prozentsatzes
Bevor Sie ein Kreisdiagramm erstellen, müssen Sie den Prozentsatz jedes Teils einer ganzen Zahl berechnen. Eine einfache Formel kann verwendet werden: Prozent = (Teil/Ganzzahl) * 100. Wenn Sie beispielsweise 8 Stunden an einem 24-Stunden-Tag bei der Arbeit verbringen, ist der Prozentsatz (8/24) * 100 = 33,33%.
Schritt 3: Erstellen eines Kreisdiagramms mit HTML und CSS
Um ein Kreisdiagramm zu erstellen, können Sie ein HTML-Element verwenden und es mit CSS formatieren. Hier ist ein Beispielcode:
In diesem Beispiel wird ein Kreisdiagramm mit zwei Sektoren erstellt: Grau und rot. Mit dem Code können Sie einen Kreis mit einem bestimmten Radius und einer bestimmten Strich-Dicke zeichnen und einen gestrichelten Stil für den zweiten Sektor festlegen.
Schritt 4: Daten visualisieren
Mithilfe der aus Schritt 2 resultierenden Prozentwerte können Sie die entsprechenden Stroke-Dasharray- und Stroke-dashoffset-Werte für jeden Sektor des Kreisdiagramms festlegen. Zum Beispiel sind für den grauen Sektor die entsprechenden Werte 50 50 und 0 und für den roten Sektor 50 50 und 25.
Schritt 5: Fertigstellen
Nachdem Sie den Code abgeschlossen und die Daten visualisiert haben, erhalten Sie ein Kreisdiagramm, das den Prozentsatz der angegebenen Daten visuell anzeigt. Jetzt können Sie es verwenden, um Informationen zu analysieren oder zu präsentieren.
Hinzufügen von Schraffuren
- Öffnen Sie Ihr HTML-Dokument und suchen Sie nach dem Code, der das Kreisdiagramm erstellt.
- Wählen Sie die Elemente aus, denen Sie eine Schraffur hinzufügen möchten.
- Fügen Sie den folgenden Code vor jedem Element ein, dem Sie eine Schraffur hinzufügen möchten:
Элемент диаграммы Dieser Code verwendet die CSS-Eigenschaft "background" und die Funktion "repeating-linear-gradient", um eine Schraffur zu erstellen. Sie können die Farben und die Größe der Schraffur ändern, indem Sie die Werte im Code ändern.
Nachdem Sie eine Schraffur hinzugefügt haben, werden Ihre Kreisdiagrammelemente attraktiver aussehen und sich voneinander unterscheiden.
Beachten Sie, dass diese Methode nur dem Hintergrund des Kreisdiagrammelements eine Schraffur hinzufügt. Wenn Sie dem Text oder anderen Teilen eines Elements eine Schraffur hinzufügen möchten, müssen Sie andere Methoden oder Bibliotheken verwenden.
