Hallo, liebe Diagramm-Fans! Habt ihr es satt, immer wieder dieselben langweiligen Diagramme zu erstellen, die aussehen, als kämen sie direkt aus einem Lehrbuch? Keine Sorge, Freunde, denn heute zeigen wir euch, wie man Diagramme mit richtig viel Stil erstellt—Verläufe!
Verläufe sind die coolen Kids der Diagrammwelt. Sie verleihen Tiefe, Dimension und einen Farbtupfer, der Ihre Diagramme von langweilig zu spektakulär macht. Und sobald man weiß wie, sind sie super einfach zu erstellen.
In diesem Blogbeitrag zeigen wir Ihnen Schritt für Schritt, wie Sie Diagramme mit Farbverläufen erstellen, die Ihr Publikum begeistern werden. Egal, ob Sie Diagramme für die Arbeit, die Schule oder einfach zum Spaß erstellen, diese Technik bringt Ihre Diagramme auf die nächste Stufe.
Also setzen Sie Ihren Diagramm-Hut auf, und los geht's mit diesem Diagrammerstellungs-Abenteuer!
Verlaufsfüllungen im Image Charts-Editor
Sie können eine oder mehrere Verlaufsfüllungen auf Diagrammbereiche oder Hintergründe anwenden (bei Kreisdiagrammen nur Hintergründe). Verlaufsfüllungen sind Übergänge von einer Farbe zur anderen. Sehen wir uns die Syntax an, die Sie benötigen, um auf Image Charts wunderschöne Verlaufsdiagramme zu erstellen:
Syntax:
chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>,...,<color_n>,<color_centerpoint_n>
- <fill_type> ist entweder bg Hintergrundfüllung, c Füllung des Diagrammbereichs (derzeit identisch mit bg, bg hat Vorrang vor c), oder b<index> Verlaufsfüllungen (gültig für Balken-, Linien-, Kreis- und Blasendiagramme).
- lg ist ein linearer Farbverlauf.
- <angle> ist der Grad des Farbverlaufs (Winkel). 0 ist horizontal und 90 ist vertikal.
- <color> in Hexadezimalformat RRGGBB[AA].
- <color_centerpoint> ist der Ankerpunkt für die Farbe. Die Farbe beginnt ab diesem Punkt zu verblassen, wenn sie sich einem anderen Anker nähert. Der Wertebereich reicht von 0.0 (unterer oder linker Rand) bis 1.0 (oberer oder rechter Rand), geneigt im durch <angle> angegebenen Winkel.
- ps<index>-<sliceIndex> (nur gültig bei Kreis-, Polar- und Blasendiagrammen) entspricht b<index>, ermöglicht jedoch die Angabe eines Farbverlaufs pro Kreissegment. Bei Kreisdiagrammen hat b<index> Vorrang vor ps<index>-<sliceIndex>; beide können nicht kombiniert werden, da dies wenig Sinn ergäbe.
Falls diese technischen Details für Sie zu viel waren, keine Sorge. Wir führen Sie anhand einiger Beispiele durch den Prozess.
Verlauf in einem Balkendiagramm
Sehen wir uns das anhand eines Beispiels an. Gehen Sie zum Bildeditor und wählen Sie ein vertikal gestapeltes Balkendiagramm. Geben Sie Ihre Daten ein und verwenden Sie dann diese Angaben für den Farbverlauf:
chf=b0,lg,90, 00C1B5,1, 8D80EC,0.5
Dies legt einen linearen Verlauf fest lg ab 90 Grad (von oben nach unten. Wenn Sie eine horizontale Achse auswählen und von links nach rechts gehen möchten, verwenden Sie 0 statt 90).
Die Farbe reicht von #00C1B5 (Rotkehlchen-Ei-Blau) zu #8D80EC (Lila). Sie können die Werte nach den Hex-Codes ändern (00C1B5,1, 8D80EC,0.5) um festzulegen, welche Farbe wo und in welchem Umfang angezeigt werden soll.
das Ergebnis?
Verlauf im Hintergrund
Angenommen, Sie möchten Ihre Sparkline-Diagramm, das naturgemäß keine Legenden oder andere platzraubende Elemente enthält. Wie wäre es also, einen Farbverlauf für Ihren Hintergrund zu erstellen?
Rufen Sie auch hier den Bildeditor auf und wählen Sie ein Sparkline-Diagramm aus der Galerie. Fügen Sie alle relevanten Daten hinzu. Verwenden Sie für den Farbverlauf dann diese Angaben:
chf= c,lg,0,CEDCFF,0.8,8D80EC,0
Dies legt einen linearen Verlauf lg von 0 Grad fest (für links-rechts). Die Farbe wechselt von #8D80EC (Lila) links zu #CEDCFF (blasses Blauviolett) rechts.
Und wie sieht das aus? Werfen Sie einen Blick darauf!
Macht Spaß, oder?
Sie können mit Verläufen SO VIEL machen. Spielen Sie mit dem Hintergrund oder dem Diagrammbereich bei normalen Diagrammen, oder erstellen Sie ein brandneues Balkendiagramm (Tipp: Fortschrittsbalkendiagramm)!
Jetzt, wo wir in Fahrt sind, schauen wir uns weiter an …
Verlaufsfüllungen in No-Code-Automatisierung
Angenommen, Sie möchten Ihrem Team jeden Monat den Fortschritt eines Projekts mitteilen, damit alle wissen, wo sie stehen. Dazu
- verbinden Sie Ihre Quelldaten (das kann eine Tabelle, ein E-Mail-Anhang oder sogar eine Slack-Nachricht sein!), um Ihren Trigger festzulegen, und dann
- verbinden Sie sich mit Image Charts und fügen Sie die Details hinzu (dazu gleich mehr), und dann
- verbinden Sie sich mit Ihrem Zielkanal.
Voilà! So einfach wie 1, 2, 3!
Füllen Sie für die Details alle relevanten Informationen in den vorgegebenen Feldern aus.
Um jedoch einen schönen Verlauf auf dem Balken zu erhalten, sind zwei Schritte erforderlich:
Fügen Sie zunächst in der Option für die Serienfarbe den Hex-Code der neutralen Farbe hinzu, die den „unvollständigen“ Teil der Fortschrittsleiste darstellt. In diesem Beispiel verwenden wir ein helles Blaugrau #D7DAE1.
Um zweitens einen schönen Farbverlauf auf dem Balken zu erzielen, benötigst du erweiterte Anpassungen. Die erste davon besteht darin, die Fortschrittsleiste durch negative Ränder korrekt einzustellen:
chma=-10,0,0,-10
Um dann einen linearen Verlauf zu erstellen, fügen Sie die chf-Details wie zuvor beschrieben hinzu. Achten Sie darauf, das kaufmännische Und-Zeichen „&“ zu verwenden, um chma und chf zu kombinieren. So würde es in Zapier aussehen:
das Ergebnis, fragen Sie?
Und siehe da!
Ziemlich cool, oder?
Erstellen Sie nun Ihre eigenen Farbverläufe auf der kostenloser Image Charts-Editor!
