Baue ein CSS-Balkendiagramm
Baue ein CSS-Balkendiagramm
Nicht jede Visualisierung braucht eine schwere Chart-Bibliothek. Für viele Dashboards ergeben ein paar gestylte divs ein gestochen scharfes, schnell ladendes Balkendiagramm, das du komplett unter Kontrolle hast.
In dieser Lektion baust du ein vertikales Balkendiagramm aus reinem HTML und Tailwind. Jeder Balken ist nur ein farbiges div, dessen Höhe seinem Wert entspricht, und eine Legende verknüpft die Farben mit ihrer Bedeutung.
Für Analysten ist diese Technik Gold wert: Du kannst ein sauberes Diagramm ohne Abhängigkeiten in jeden Bericht einbauen und verstehst genau, wie jeder Pixel auf deine Daten abbildet. Zeichnen wir ein paar Balken.
Anweisungen
Füge einen h1-Diagrammtitel „Quartalsumsatz“ hinzu, damit Betrachter wissen, was die Balken darstellen.
Tipp: Nutze: `<h1 class="text-3xl font-bold mb-2">Quartalsumsatz</h1>`.
Wo kommt das hin?
<!-- Baue hier deine Balkendiagramm-Visualisierung -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Erstelle die Zeichenfläche des Diagramms als Flex-Zeile, deren Balken mit items-end auf einer Grundlinie sitzen.
Füge farbige Balken als divs mit einem Inline-height-Style hinzu und nutze die Farbe bg-purple-500.
Füge eine Legende hinzu, die die Farben erklärt, inklusive des Labels „Rekordquartal“.
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge einen h1-Diagrammtitel „Quartalsumsatz“ hinzu, damit Betrachter wissen, was die Balken darstellen.