Diagramme mit HTML und CSS erstellen
Veröffentlich am: von Andre Lanius
Möchtest du lernen, wie man ein ansprechendes Tortendiagramm mit HTML5 und CSS erstellt? In diesem Tutorial zeige ich dir Schritt für Schritt, wie du mit modernen Webtechnologien ein visuell ansprechendes Diagramm bauen kannst, das ohne zusätzliche Bibliotheken auskommt. Mit einfachen CSS-Techniken wie dem conic-gradient kannst du beeindruckende Grafiken direkt im Browser erzeugen.
Das Beispiel demonstriert, wie du verschiedene Datenanteile durch Farben und Flächen visualisieren kannst. Dank der flexiblen Gestaltungsmöglichkeiten von CSS kannst du die Farben, Größen und Anteile des Tortendiagramms individuell anpassen. Zusätzlich füge ich eine Legende hinzu, die den Farben spezifische Werte zuordnet – ideal, um dein Diagramm verständlicher zu machen.
Am Ende wirst du eine elegante und moderne Lösung haben, die du problemlos in deine eigenen Projekte integrieren kannst. Ob für persönliche Webseiten, Dashboards oder Blogbeiträge – mit dieser Methode kannst du deine Daten auf attraktive Weise präsentieren. Lass uns starten!
Der untenstehende Code erzeugt eine interaktive Darstellung eines Tortendiagramms (siehe Grafik), das die Verteilung verschiedener Anteile visuell zeigt. In diesem Beispiel repräsentieren die Farben Grün, Blau und Orange jeweils 40 %, 30 % und 30 % der Gesamtfläche. Das Diagramm ist kreisförmig gestaltet und enthält einen inneren weißen Kreis, der eine ästhetische Trennung schafft und es wie ein Donut-Diagramm wirken lässt.
Zusätzlich zur Grafik gibt es eine Legende, die den Farben des Diagramms entsprechende Werte zuordnet. Diese sorgt für eine klare und verständliche Zuordnung der Daten, sodass der Betrachter sofort erkennen kann, was die einzelnen Segmente repräsentieren. Diese Struktur macht das Diagramm ideal für die Präsentation von Daten in Dashboards, Berichten oder Webseiten.
Das Design ist nicht nur visuell ansprechend, sondern auch funktional flexibel. Farben, Prozentsätze und Größen können leicht angepasst werden, um unterschiedlichen Anforderungen gerecht zu werden. Dieses Beispiel zeigt dir, wie du mit wenigen Zeilen HTML und CSS effektive Datenvisualisierungen erstellen kannst.
Erst einmal ein minimales HTML um danach mit reinem CSS ein Tortendiagramm zu erstellen.
<div>
<div class="pie-chart"></div>
<div class="legend">
<div><span class="green"></span> 40% Grün</div>
<div><span class="blue"></span> 30% Blau</div>
<div><span class="orange"></span> 30% Orange</div>
</div>
</div>Und jetzt ein wenig CSS um das zuvor erstellte HTML visuell wie ein Diagramm aussehen zu lassen.
.pie-chart {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
#4caf50 0% 40%,
#2196f3 40% 70%,
#ff9800 70% 100%
);
}
.pie-chart::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
}
.legend {
margin-top: 20px;
text-align: center;
}
.legend div {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.legend span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
}
.green { background-color: #4caf50; }
.blue { background-color: #2196f3; }
.orange { background-color: #ff9800; }Dieses Beispiel zeigt eine statische Implementierung eines Tortendiagramms, bei der die Anteile und Farben direkt im CSS-Code festgelegt werden. Für einfache Projekte oder wenn die Daten nicht oft geändert werden, ist diese Methode ausreichend. Allerdings wird es bei dynamischen Daten oder größeren Projekten schnell unpraktisch, jedes Mal den Code manuell anzupassen.
Eine mögliche Erweiterung wäre, die Daten dynamisch aus einer Datenbank zu laden und das Diagramm automatisch zu generieren. Mithilfe von PHP könntest du beispielsweise die benötigten Werte aus einer Datenbank abrufen, Berechnungen durchführen und die entsprechenden CSS-Werte zur Laufzeit erstellen. So würde sich dein Diagramm automatisch anpassen, wenn sich die Daten ändern, ohne dass du manuell eingreifen musst. Diese Methode bietet deutlich mehr Flexibilität und Effizienz für datengetriebene Projekte.
Kommentar schreiben
Anzahl der Kommentare: 0