donut-chart

Szablon obrazka OG: Wykres pierścieniowy

Dwubarwny wykres pierścieniowy na stronie raportu, liczba w środku i uszeregowana legenda z paskiem dla każdego udziału.

Użyj tego szablonu — zacznij za darmo Dokumentacja
Szablon obrazka Open Graph „Wykres pierścieniowy” wyrenderowany przez Shareglint
Szablon Wykres pierścieniowy w rozmiarze square (1080×1080)
Szablon Wykres pierścieniowy w rozmiarze portrait (1080×1350)
Szablon Wykres pierścieniowy w rozmiarze story (1080×1920)
Szablon Wykres pierścieniowy w rozmiarze pinterest (1000×1500)
Szablon Wykres pierścieniowy w rozmiarze youtube (1280×720)

To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.

Do udziałów w rynku, podziału budżetu, źródeł ruchu i wyników ankiet. Wartości mogą być procentami, liczbami albo kwotami: karta przelicza je na udziały w sumie, sortuje i rysuje sześć największych, a resztę zostawia jako szary łuk. Bez liczby w środku pokazuje największy udział. W kadrach poziomych pierścień stoi obok tytułu i legendy, w kwadratowych pod tytułem, w pionowych tytuł, pierścień i legenda idą jedno pod drugim.

Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

Pole Typ Opis Przykład
title tekst Tytuł wykresu. domyślnie: Chart title Where our new signups came from in Q3
segments tekst Wycinki jako pary etykieta:wartość oddzielone przecinkami, średnikami albo nowymi liniami, np. Wyszukiwarka:42, Bezpośrednio:23. Kolor #hex w wycinku ustawia jego barwę; pozostałe dostają odcienie akcentu i czerni. Rysowanych jest najwyżej sześć. domyślnie: A:50, B:30, C:20 Search:42, Direct:23, Social:16, Referral:11, Email:8
center_value tekst Liczba w środku pierścienia, np. 12,4 tys. Puste pole = największy udział. 12.4k
center_label tekst Mały podpis pod liczbą w środku. new signups
eyebrow tekst Nadtytuł nad górną linią, np. III kw. 2026 · Pozyskanie. Q3 2026 · Acquisition
source tekst Źródło danych na dole. Source: Northwind product analytics, July–September 2026
site tekst Strona albo marka w prawym górnym rogu. northwind.dev
logo adres obrazka Logo obok strony. https://example.com/images/logo-northwind.png
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #ea580c #ea580c
theme dark | light Schemat kolorów: dark albo light. domyślnie: light —

Wyrenderuj go jednym żądaniem

Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.

curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "donut-chart",
    "modifications": {
        "title": "Where our new signups came from in Q3",
        "segments": "Search:42, Direct:23, Social:16, Referral:11, Email:8",
        "center_value": "12.4k",
        "center_label": "new signups",
        "eyebrow": "Q3 2026 · Acquisition",
        "source": "Source: Northwind product analytics, July–September 2026",
        "site": "northwind.dev",
        "logo": "https://example.com/images/logo-northwind.png"
    }
}'

Albo wklej podpisany adres w og:image

Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.

<meta property="og:image" content="https://shareglint.com/i/acc_YOUR_ACCOUNT_ID/donut-chart.png?center_label=new%20signups&center_value=12.4k&eyebrow=Q3%202026%20%C2%B7%20Acquisition&segments=Search%3A42%2C%20Direct%3A23%2C%20Social%3A16%2C%20Referral%3A11%2C%20Email%3A8&site=northwind.dev&source=Source%3A%20Northwind%20product%20analytics%2C%20July%E2%80%93September%202026&title=Where%20our%20new%20signups%20came%20from%20in%20Q3&s=YOUR_SIGNATURE">

Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

curl -X POST "https://shareglint.com/v1/templates/library/donut-chart/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"
Użyj tego szablonu — zacznij za darmo

Więcej szablonów: Dane, wykresy i kamienie milowe

Szablon obrazka Open Graph „wyróżniona liczba” wyrenderowany przez Shareglint Wyróżniona liczba Szablon obrazka Open Graph „Zbiórka” wyrenderowany przez Shareglint Zbiórka Szablon obrazka Open Graph „Siatka wskaźników” wyrenderowany przez Shareglint Siatka wskaźników Szablon obrazka Open Graph „Wykres słupkowy” wyrenderowany przez Shareglint Wykres słupkowy Szablon obrazka Open Graph „Kamień milowy” wyrenderowany przez Shareglint Kamień milowy Szablon obrazka Open Graph „Podsumowanie roku” wyrenderowany przez Shareglint Podsumowanie roku Szablon obrazka Open Graph „Osiągnięcie z aplikacji” wyrenderowany przez Shareglint Osiągnięcie z aplikacji Szablon obrazka Open Graph „Wykres liniowy” wyrenderowany przez Shareglint Wykres liniowy Szablon obrazka Open Graph „Wyniki ankiety” wyrenderowany przez Shareglint Wyniki ankiety

Wszystkie szablony w kategorii Dane, wykresy i kamienie milowe (14) →  ·  Wszystkie szablony →