Gepaartes Säulendiagrammv1.0.3
Nutze diesen Skill für: Infografik erstellen.
Im Kommen
5.034 Downloads0 Likes0-mal gemerkt
$4.99
Was bekomme ich, wenn ich diesen Skill kaufe?Gepaartes Säulendiagramm: einfügefertige Datenvisualisierung als bearbeitbarer Quellcode mit Anwendungsbeispiel. Enthält Diagramme aus einer Charting-Ebene statt handgebautem SVG und einem Canvas-Hintergrund ohne WebGL-Bibliothek. Farben, Typografie und Eckenradien liegen als Tokens vor, die du einmal für den ganzen Block anpasst.
Am häufigsten gewählt von
Aktualisiert am 31. Aug. 2026
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehen
Das bekommst du
- Der vollständige Quellcode von „Gepaartes Säulendiagramm“ – die Komponentendatei plus ein lauffähiges Anwendungsbeispiel, bereit zum Einfügen und Bearbeiten.
- Ein schriftlicher visueller Vertrag: Farbpalette, Schriftskala, Eckenradius, Icon-Strichstärke und Animations-Timings, alles als Tokens, die du an einer Stelle bearbeitest.
- Die Diagrammkonfiguration als einfache Daten – setz deine eigenen Reihen ein, den Rest übernimmt die Charting-Ebene.
Passt gut für
- Du brauchst eine Datenvisualisierung auf einer Seite und willst keine Charting-Bibliothek verdrahten.
- Palette und Abstände des Diagramms sollen zum Rest der Seite passen.
- Du willst lesbaren, bearbeitbaren Quellcode statt einer weiteren Abhängigkeit, die du aktuell halten musst.
Nicht geeignet für
- Teams mit einem ausgereiften Designsystem – diese Palette und Schriftskala würden mit deinen kollidieren.
- Alle, die ein versioniertes npm-Paket wollen; du bekommst Quellcode, den du selbst pflegst.
- Diagramme, die Live-Streaming-Daten oder virtualisiertes Scrollen über sehr große Datenmengen brauchen.
Kunden- & Management-ReportingWissenschafts- & TechnikkommunikationWebdesign & digitale ErlebnisseInfografik erstellenUI-Visuals erstellenWebseite erstellenBearbeitbares ErgebnisVisuell ausgefeiltEinsteigerfreundlichWarm-neutralPetrol-AkzentGenerativer Hintergrund
Über diesen Skill
Du fügst einen Block ein, und auf der Seite erscheint eine echte Datenvisualisierung – sauber gezeichnet statt in SVG skizziert. Setz deine Zahlen ein, und die Formen zeichnen sich neu.
Das bekommst du
- Der vollständige Quellcode von „Gepaartes Säulendiagramm“ – die Komponentendatei plus ein lauffähiges Anwendungsbeispiel, bereit zum Einfügen und Bearbeiten.
- Ein schriftlicher visueller Vertrag: Farbpalette, Schriftskala, Eckenradius, Icon-Strichstärke und Animations-Timings, alles als Tokens, die du an einer Stelle bearbeitest.
- Die Diagrammkonfiguration als einfache Daten – setz deine eigenen Reihen ein, den Rest übernimmt die Charting-Ebene.
So nutzt du es
- Sag deinem Assistenten, wo der Abschnitt hin soll: Er liest zuerst dein Projekt und schreibt den Block dann so, wie dieses Projekt bereits geschrieben ist.
- Ersetze die Texte durch deine eigenen. Schriftgrößen und Abstände halten von selbst.
- Tausch die Zahlen gegen deine eigenen Reihen – das Diagramm zeichnet sich neu, Farben und Achsen bleiben einheitlich.
- Sieh es dir vor dem Livegang auf dem Smartphone an. Es ist bereits so gebaut, dass es dort funktioniert.
Was du vorab brauchst
- Abhängigkeiten
- ECharts – erforderlich
- Zuletzt getestet
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …