Hallo daar, grafiekliefhebbers! Bent u het beu om steeds dezelfde saaie grafieken te maken die eruitzien alsof ze rechtstreeks uit een studieboek komen? Geen paniek, vrienden, want vandaag leren we u hoe u grafieken met echte stijl maakt—gradiënten!
Gradiënten zijn de coole jongens van de grafiekenwereld. Ze voegen diepte, dimensie en een vleugje kleur toe die uw grafieken kan veranderen van saai naar spectaculair. Bovendien zijn ze supermakkelijk te maken zodra u weet hoe.
In deze blog laten we je stap voor stap zien hoe je diagrammen met verlopen maakt waar je publiek versteld van zal staan. Of je nu diagrammen maakt voor werk, school of gewoon voor de lol, deze techniek tilt je diagrammen naar een hoger niveau.
Dus zet je grafiekenpet op, en laten we beginnen aan dit avontuur van grafieken maken!
Gradiëntvullingen in de Image Charts-editor
U kunt een of meer verloopvullingen toepassen op grafiekgebieden of achtergronden (voor cirkel alleen achtergronden). Verloopvullingen zijn overgangen van de ene kleur naar de andere. Laten we eens kijken naar de syntaxis die u nodig heeft om prachtige verloopgrafieken op Image Charts te maken:
Syntaxis:
chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>,...,<color_n>,<color_centerpoint_n>
- <fill_type> is ofwel bg achtergrondvulling, c vulling van het grafiekgebied (momenteel hetzelfde als bg, bg heeft voorrang op c), of b<index> gradiëntvullingen (geldig voor staaf-, lijn-, cirkel- en bubbelgrafieken).
- lg is een lineair verloop.
- <angle> is de gradiëntgraad (hoek). 0 is horizontaal en 90 is verticaal.
- <color> in hexadecimaal formaat RRGGBB[AA].
- <color_centerpoint> is het ankerpunt voor de kleur. De kleur begint vanaf dit punt te vervagen naarmate het een ander ankerpunt nadert. Het waardebereik loopt van 0.0 (onder- of linkerrand) tot 1.0 (boven- of rechterrand), gekanteld onder de hoek die is opgegeven door <angle>.
- ps<index>-<sliceIndex> (alleen geldig bij taart-, polaire en bubbelgrafieken) is hetzelfde als b<index>, maar hiermee kunt u een kleurverloop per taartpunt opgeven. Bij taartdiagrammen heeft b<index> voorrang op ps<index>-<sliceIndex>; beide kunnen niet worden gecombineerd, aangezien dat weinig zin zou hebben.
Als al deze technische details je boven de pet gingen, maak je geen zorgen. We leiden je met een paar voorbeelden door het proces.
Gradiënt in een staafdiagram
Laten we dit met een voorbeeld leren. Ga naar de afbeeldingseditor en kies een verticaal gestapeld staafdiagram. Voer je gegevens in en gebruik vervolgens deze instellingen voor het verloop:
chf=b0,lg,90, 00C1B5,1, 8D80EC,0.5
Dit stelt een lineair verloop in lg vanaf 90 graden (van boven naar beneden. Als u een horizontale as selecteert en van links naar rechts wilt gaan, gebruikt u 0 in plaats van 90).
De kleur loopt van #00C1B5 (eiblauw van een roodborstje) naar #8D80EC (lila). U kunt de waarden na de hexcodes wijzigen (00C1B5,1, 8D80EC,0.5) om in te stellen welke kleur u waar en hoeveel wilt tonen.
het resultaat?
Gradiënt op de achtergrond
Stel dat je wat pit wilt toevoegen aan je sparklinegrafiek, die van nature geen legenda's of andere elementen heeft die ruimte innemen. Dus, waarom niet een kleurverloop voor uw achtergrond maken?
Ga ook hier naar de afbeeldingseditor en kies een sparkline-grafiek uit de galerij. Voeg alle relevante gegevens toe. Gebruik voor het verloop vervolgens deze specificaties:
chf= c,lg,0,CEDCFF,0.8,8D80EC,0
Dit stelt een lineair verloop lg in van 0 graden (voor links-rechts). De kleur verandert van #8D80EC (lila) links naar #CEDCFF (bleekblauwpaars) rechts.
En hoe ziet dat eruit? Neem een kijkje!
Leuk, toch?
U kunt ZOVEEL doen met verlopen. Speel met de achtergrond of het grafiekgebied voor gewone grafieken, of maak een gloednieuw staafdiagram (tip: voortgangsbalkdiagram)!
Nu we op dreef zijn, laten we verder verkennen…
Gradiëntvullingen in no-code automatisering
Stel dat je elke maand de voortgang van een project naar je team wilt sturen, zodat iedereen weet waar ze staan. Om dit te doen,
- verbind uw brongegevens (dit kan een spreadsheet zijn, een bijlage van een e-mail, of zelfs een Slack-bericht!) om uw trigger in te stellen, en vervolgens
- verbind met Image Charts en voeg de details toe (hier komen we zo op terug), en vervolgens
- verbind met uw doelkanaal.
Voilà! Het is zo simpel als 1, 2, 3!
Vul voor de details alle relevante informatie in de gegeven velden in.
Maar om een mooi kleurverloop op de balk te krijgen, moet u twee stappen volgen:
Voeg eerst in de optie voor reekskleur de hexcode toe van de neutrale kleur die het “onvoltooide” deel van de voortgangsbalk vertegenwoordigt. Voor dit voorbeeld gebruiken we een lichtblauwgrijs #D7DAE1.
Om vervolgens een mooi kleurverloop op de balk te krijgen, moet je geavanceerde aanpassingen gebruiken. De eerste hiervan is om de voortgangsbalk goed te krijgen door negatieve marges in te stellen met dit:
chma=-10,0,0,-10
Om vervolgens een lineair verloop te maken, voegt u de chf-details toe zoals eerder beschreven. Zorg ervoor dat u het ampersand-teken '&' gebruikt om chma en chf te combineren. Zo zou het er in Zapier uitzien:
het resultaat, vraagt u zich af?
Kijk eens aan!
Best cool, toch?
Ga nu je eigen kleurverlopen maken op de gratis Image Charts-editor!
