Ikony dynamiczne

Ważne:Chociaż dynamiczne i interaktywne Wykresy Google są aktywnie utrzymywane, automatycznie wycofaliśmyStatyczny wykres obrazów Google2. Została wyłączona 18 marca 2019 r.

Z tego artykułu dowiesz się, jak utworzyć różne objaśnienia, dymki, pinezki i inne elementy graficzne, które można utworzyć za pomocą adresu URL.

https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000

1. Wprowadzenie
2. Składnia
3. Typy ikon
4. Dymki
5. Przypinki
6. Zabawne notatki
7. Uwagi dotyczące prognozy pogody
8. Bloki tekstu czcionek z obrysem (tylko tekst)
9. Bloki tekstu czcionki z obrysem (tekst + ikona)
10. Lista dostępnych flag i ikon
11. Ciągi tekstowe
12. Cienie

Wprowadzenie

Możesz tworzyć różne ciekawe objaśnienia, pinezki lub dymki, które będą łączyć tekst z obrazami. Są to tzw. ikony dynamiczne.

Składnia

Główny adres URL: https://chart.googleapis.com/chart?

Ikony dynamiczne obsługują następujące parametry po znaku ? w głównym adresie URL:

Typy ikon

Typ	Przykłady
Dymki – wybierz małe lub duże dymki tekstowe z ikonami lub bez nich.
Pionki – mogą być zwykłe, oznaczone gwiazdką lub skośne i mogą mieć ikonę, pojedynczą literę lub dłuższe ciągi tekstowe.
Ciekawe notatki z tekstem i opcjonalnym tytułem
Notatki dotyczące prognozy pogody z tytułem, tekstem i ikoną pogody
Blok tekstowy z wieloma liniami, bez ikony
Pojedynczy wiersz z obrysem bloku tekstowego z ikoną

Powrót do góry

Dymki

Dymki występują w różnych kombinacjach funkcji: dużych i małych, z ikoną lub bez, oraz w jednym wierszu i w wielu wierszach. W tabeli poniżej opisano typy bąbelków i składnię każdego z nich. Opisy poszczególnych wartości parametru zostały opisane pod tabelą.

Kilka dodatkowych uwag:

• Wszystkie dymki zmieniają rozmiar, aby dopasować się do szerokości i wysokości wprowadzanego tekstu.
• Stała dymek obsługuje odmianę o numerze kończącym się cyframi _withshadow. Jeśli używasz odmiany _withshadow, pod bąbelkiem dodaje się cień.

Tekst	Ikona	Składnia	Tylko cień	Przykład
Pojedynczy wiersz	No	chst=   d_bubble_text_small[_withshadow] chld=   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_text_small_shadow chld=   <frame_style>|   <text>	chst=d_bubble_text_small chld=   bb|   Launch+site|   C6EF8C|   000000
Pojedynczy wiersz	Yes	chst=   d_bubble_icon_text_small[_withshadow] chld=   <icon_string>|   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_icon_text_small_shadow chld=   <icon_string>|   <frame_style>|   <text>	chst=d_bubble_icon_text_small chld=   wc|   bb|   Pay+Toilets|   C6EF8C|   000000
Pojedynczy wiersz	Yes	chst=   d_bubble_icon_text_big[_withshadow] chld=   <icon_string>|   <frame_style>|   <text>|   <fill_color>|   <text_color>	chst=   [d_]bubble_icon_text_big_shadow chld=   <icon_string>|   <frame_style>|   <text>	chst=d_bubble_icon_text_big chld=   snack|   bb|   $2.99+!|   FFBB00|   000000
Wielowierszowy	No	chst=   d_bubble_texts_big[_withshadow] chld=   <frame_style>|   <fill_color>|   <text_color>|   <text_line_1>    |...|   <text_line_n>	chst=   [d_]bubble_texts_big_shadow chld=   <frame_style>|   <text_line_1>    |...|   <text_line_n>	chst=d_bubble_texts_big chld=   bb|   FFB573|   000000|   Help+Wanted|   Hours:+Midnight+to+3:00+AM|   Good+pay,+interesting+work|   Contact+V.+Helsing
Wielowierszowy	Yes	chst=d_bubble_icon_texts_big[_withshadow] chld=   <icon_string>|   <frame_style>|   <fill_color>|   <text_color>|   <text_line_1>    |...|   <text_line_n>	chst=   [d_]bubble_icon_texts_big_shadow chld=   <icon_string>|   <frame_style>|   <text_line_1>    |...|   <text_line_n>	chst=d_bubble_icon_texts_big chld=   home|   bb|   FFB573|   000000|   Haunted+House|   Hours:+Midnight+to+3:00+AM|   Ghouls,+Goblins,+and+Vampires|   Bring+your+own+wooden+stake

Składnia

<icon_string>

Ciąg znaków określający jedną z ikony opisanych na końcu tego dokumentu.

 

<frame_style>

Kierunek ogona. Do wyboru masz te stałe kierunku ogona:

• bb – ramka z balonem, ogon w lewym dolnym rogu
  
  
• bbtl – ramka z balonem, ogon w lewym górnym rogu
  
  
• bbtr – ramka z balonem, ogon w prawym górnym rogu
  
  
• bbbr – ramka z balonem, ogon w prawym dolnym rogu
  
  
• bbT – ramka z balonem, bez ogona
  
  
• edge_bl – ramka krawędzi, koniec u dołu, lewy koniec
  
  
• edge_bc – ramka krawędzi, koniec u dołu, wyśrodkowanie
  
  
• edge_br – ramka brzegowa, koniec u dołu, na prawym końcu
  
  
• edge_tl – ramka krawędzi, ogon na górnej krawędzi, lewy koniec
  
  
• edge_tc – ramka krawędzi, koniec przy górnej krawędzi, wyśrodkowany
  
  
• edge_tr – ramka brzegowa, koniec na górnej krawędzi, na prawym końcu
  
  
• edge_lt – ramka krawędzi, ogon na lewej krawędzi, na końcu u góry
  
  
• edge_lc – ramka krawędzi, koniec przy lewej krawędzi, wyśrodkowanie
  
  
• edge_lb – ramka krawędzi, ogon na lewej krawędzi, a dolny koniec
  
  
• edge_rt – ramka brzegowa, koniec przy prawej krawędzi, na końcu u góry
  
  
• edge_rc – ramka krawędzi, koniec przy prawej krawędzi, wyśrodkowanie
  
  
• edge_rb – ramka krawędzi, ogon przy prawej krawędzi, na dole

<fill_color>

Kolor wypełnienia bąbelków w postaci 6-cyfrowego szesnastkowego koloru HTML.

<text_color>

Kolor tekstu w postaci 6-cyfrowego kodu szesnastkowego HTML.

<text>

Pojedynczy wiersz tekstu bąbelka. Spacje muszą mieć znak „+”.

<text_line_1>|...|<text_line_n>

Co najmniej jeden wiersz tekstu na potrzeby wielowierszowych dymków. Każdy wiersz jest oddzielony znakiem | (|). Pierwszy wiersz będzie większy i pogrubiony. Spacje należy zastąpić znakiem +.

Tylko cień

W przypadku bąbelków możesz też rysować wolnostojący cień, korzystając ze składni przedstawionej w tabeli powyżej. Przykłady:

chst=   d_bubble_text_small_shadow chld=   bb|Launch+site

chst=   d_bubble_icon_text_small_shadow chld=   wc|bb|Pay+Toilets

chst=   d_bubble_icon_text_big_shadow chld=   snack|bb|$2.99+!

chst=   d_bubble_texts_big_shadow chld=   bb|Help+Wanted|   Hours:+Midnight+to+3:00+AM|   Good+pay,+interesting+work|   Contact+V.+Helsing

chst=   d_bubble_icon_texts_big_shadow chld=   home|bb|Haunted+House|   Hours:+Midnight+to+3:00+AM|   Ghouls,+Goblins,+and+Vampires|   Bring+your+own+wooden+stake

Powrót do góry

Przypinki

Możesz utworzyć różne pinezki z ikonami lub krótkimi ciągami tekstowymi. Oto dostępne typy pinezek.

Typ pinezki	Stała bąbelków	Przykłady
Zwykła pinezka z jedną literą lub ikoną	chst=d_map_pin_letter[_withshadow] chst=d_map_pin_icon[_withshadow]
Ukośna/oznaczona gwiazdką pinezka z pojedynczą literą lub ikoną	chst=d_map_xpin_letter[_withshadow] chst=d_map_xpin_icon[_withshadow]
Skalowalny, obrotowy, wielowierszowy pin	chst=d_map_spin

Zwykła pinezka z jedną literą lub ikoną

To mała, pionowa pinezka, która może zawierać małą ikonę lub jedną literę.

Składnia liter

chst=d_map_pin_letter[_withshadow]
chld=<character>|<fill_color>|<text_color>

Składnia ikony

chst=d_map_pin_icon[_withshadow]
chld=<icon_string>|<fill_color>

<znak>

[Tylko pinezki tekstowe] Pojedynczy znak tekstowy.

<icon_string>

[Icon pins only] Ciąg znaków określający jedną z ikony opisanych na końcu tego dokumentu.

<fill_color>

Kolor wypełnienia bąbelków w postaci 6-cyfrowego szesnastkowego koloru HTML.

<text_color>

[Text pins only] Kolor tekstu w postaci 6-cyfrowego kodu szesnastkowego HTML.

Tylko cień

Aby narysować cień tylko dla tego typu pinezki, użyj tej składni:

chst=d_map_pin_shadow

Parametr chld nie jest wymagany tylko w przypadku cienia.

Przykłady

chst=d_map_pin_letter_withshadow chld=A|FF0000|0000FF

chst=d_map_pin_letter chld=%E5%8D%B1|FF0000|000000

chst=d_map_pin_icon chld=camping|ADDE63

chst=d_map_pin_shadow

Powrót do góry

Ukośna lub oznaczona gwiazdką pinezka z jedną literą lub ikoną

To mały styk, który można przechylać w lewo lub w prawo albo w formie nakładającej się gwiazdy. Treść pinezki może być tylko pojedynczym znakiem lub małą ikoną.

Składnia liter

chst=d_map_xpin_letter[_withshadow]
chld=<pin_style>|<character>|<fill_color>|<text_color>|<star_fill_color>

Składnia ikony

chst=d_map_xpin_icon[_withshadow]
chld=<pin_style>|<icon_string>|<fill_color>|<star_fill_color>

<pin_style>

Styl pinezki. Wybierz jedną z tych stałych:

• pin
• pin_star
• pin_sleft
• pin_sright

<icon_string>

[Ikony pinezek] Ciąg znaków określający jedną z ikon opisanych na końcu tego dokumentu.

<znak>

[Tekstowe pinezki] Pojedynczy znak tekstowy.

<fill_color>

Kolor wypełnienia bąbelków w postaci 6-cyfrowego szesnastkowego koloru HTML.

<text_color>

[Tekstowe pinezki]: kolor tekstu w postaci 6-cyfrowego kodu szesnastkowego HTML.

<star_fill_color>

[Pinezka z gwiazdką]: kolor wypełnienia gwiazdki w postaci 6-cyfrowego kodu HTML w formacie szesnastkowym.

Tylko cień

Aby narysować cień tylko dla tego typu pinezki, użyj tej składni:

chst=d_map_xpin_shadow

chld=<pin_style>

Przykłady

chst=d_map_xpin_letter chld=pin_star|A|FF0000|000000

chst=d_map_xpin_letter chld=pin_sleft|A|FF0000|000000

chst=d_map_xpin_icon chld=pin_sleft|bank-dollar|52B552

chst=d_map_xpin_shadow chld=pin_sleft

Powrót do góry

Piina tekstowa ze skalowaniem i obrotem

To pinezka, którą możesz ręcznie skalować, aby uwzględnić dłuższe ciągi tekstowe. Możesz też obrócić pinezkę o niestandardową wartość oraz określić rozmiar i kolor czcionki.

Składnia

chst=d_map_spin
chld=<scale_factor>|<rotation_deg>|<fill_color>|<font_size>|<font_style>|<text_line_1>|...|<text_line_n>

<scale_factor>

Współczynnik skalowania określający rozmiar pinezki. Jest to dodatnia liczba zmiennoprzecinkowa, gdzie 0,5 to rozmiar nieskalowanych pinezek. 0,25 to połowa tego rozmiaru, 1 będzie 2 razy większe i tak dalej.

<rotation_deg>

Obrót pinezki w stopniach. Dozwolone są wartości dodatnie i ujemne. W przypadku pionowej pinezki wpisz 0.

<fill_color>

Kolor wypełnienia bąbelków w postaci 6-cyfrowego szesnastkowego koloru HTML.

<font_size>

Rozmiar czcionki tekstu w pikselach.

<font_style>

„_” (podkreślenie) dla zwykłego tekstu lub „b” dla pogrubionego tekstu.

<text_line_1>...<text_line_n>

Co najmniej jeden wiersz tekstu rozdzielony znakami |.

Przykłady

chst=d_map_spin chld=1.7|180|C6E7DE|11|_|Raindrop

chst=d_map_spin chld=2.1|0|FFFF42|13|b|Kumquats

chst=d_map_spin chld=3|45|FFFF42|11|_|First+line|Second+line

Powrót do góry

Zabawne notatki stylistyczne

Za pomocą różnych szablonów, takich jak notatki czy dymki, możesz tworzyć różne notatki tekstowe. W notatce możesz opcjonalnie dodać wiersz tytułu.

Te notatki mają stały rozmiar – nie powiększają się ani nie zmniejszają w celu dostosowania do rozmiaru tekstu.

Składnia

chst=d_fnote_title OR chst=d_fnote
chld=<note_type>|<note_size>|<text_color>|<text_alignment>|<text_line_1>|...|<text_line_n>

klatka piersiowa

Podaj d_fnote_title dla notatki z tytułem lub d_fnote dla notatki bez tytułu. W notatce z tytułem pierwszy wiersz tekstu zostanie sformatowany jako tytuł (większy i pogrubiony).

<note_type>

Ciąg tekstowy opisujący kształt notatki. Wybierz jeden z typów notatek z tabeli poniżej.

<note_size>

1 (1) – duża notatka lub 2 – mała. Rozmiary szablonów są stałe. Szablony nie powiększają się ani nie zmniejszają, aby dopasować się do tekstu. Eksperymentuj z obydwoma rozmiarami, aby sprawdzić, który lepiej pasuje do tekstu.

<text_color>

Kolor tekstu w postaci 6-cyfrowego kodu szesnastkowego; wartości alfa nie są akceptowane.

<text_alignment>

Wyrównanie całego tekstu, w tym nagłówka. Wybierz jedną z tych wartości:

• l – („L”) Wyrównane do lewej
• h – wyśrodkowane
• R – wyrównane do prawej

<text_line_1>| ...|<text_line_n>

Tekst notatki. Aby wskazać nowy wiersz, użyj znaku |. Gdy chst=d_fnote_title, pierwszy wiersz tekstu jest sformatowany jako tytuł.

Szablony typów notatek

Poniższe szablony są obsługiwane w przypadku szablonów notatek. Ciąg znaków note_type każdej z nich jest widoczny pod szablonem.

Uwaga: w ciągach tekstowych wielkość liter ma znaczenie.

arrow_d

balloon

pinned_c

sticky_y

taped_y

thought

Przykłady

Opis	Przykład
Notatka o tytule: chst=d_fnote_title. Jako tytuł zostanie użyty pierwszy wiersz tekstu. Rozmiar jest duży (1).	chst=d_fnote_title chld=pinned_c|1|004400|l|Joe's|Today+2-for-1+!|555-1234
Notatka bez tytułu: chst=d_fnote.tekst jest wyśrodkowany.	chst=d_fnote chld=thought|1|0088FF|h|Why+am+I+here?
Przydatny szablon na stary dowcip.	chst=d_fnote chld=arrow_d|1|000000|h|Your|shoe's|untied

Powrót do góry

Notatki do prognozy pogody

Możesz utworzyć notatkę z ikoną wskaźnika pogody. Układ jest podobny do ciekawych notatek, ale tekst jest zawsze czarny, tekst jest wyrównany do lewej i może się składać z maksymalnie 3 wierszy.

Te notatki mają stały rozmiar – nie powiększają się ani nie zmniejszają w celu dostosowania do rozmiaru tekstu.

Składnia

chst=d_weather
chld=<note_type>|<weather_icon>|<title>|<line_2>|<line_3>

klatka piersiowa

d_weather oznacza notatkę pogodową.

<note_type>

Szablon, którego chcesz użyć w tej notatce. Użyj jednego z ciągów notatek wymienionych na liście ciekawych stylów powyżej.

<weather_icon>

Jeden z ciągów znaków ikon pogody w tabeli poniżej. Notatka może mieć jedną ikonę pogody.

<title>|<line_2>|<line_3>

Tytuł oraz maksymalnie 2 wiersze tekstu (te dodatkowe wiersze są opcjonalne). Tytuł jest większy i pogrubiony.

Ikony pogody

Oto lista ikon pogody, w których każdej z nich wyświetla się ciąg znaków weather_icon.

Uwaga: w ciągach tekstowych wielkość liter ma znaczenie.

clear-night-moon	cloudy-heavy	cloudy-sunny	cloudy	rain
rainy-sunny	snow	snowflake	snowy-sunny	sunny-cloudy
sunny	thermometer-cold	thermometer-hot	thunder	windy

Przykłady

Powrót do góry

Bloki tekstu czcionek z obrysem (tylko tekst)

Możesz utworzyć blok tekstu z obrysem na białym tle. Jeśli chcesz utworzyć ikonę z tekstem +, użyj wersji jednowierszowej, która obsługuje ikonę.

Składnia

chst=d_text_outline
chld=<text_fill_color>|<font_size>|<text_alignment>|<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>

<text_fill_color>

Kolor wypełnienia tekstu. Sześciocyfrowy szesnastkowy kod koloru. Wartości alfa nie są akceptowane.

<font_size>

Liczba określająca rozmiar czcionki w pikselach.

<text_alignment>

Wyrównanie całego tekstu, w tym nagłówka. Wybierz jedną z tych wartości:

• l – („L”) wyrównane do lewej
• h – wyśrodkowane
• R – wyrównane do prawej

<outline_color>

Kolor konturu tekstu. Sześciocyfrowy szesnastkowy kod koloru. Wartości alfa nie są akceptowane.

<font_weight>

Zwykły lub pogrubiony tekst. Podkreśl „_” w przypadku zwykłego tekstu i „b” dla pogrubionego tekstu.

<text_line_1>| ...|<text_line_n>

Tekst notatki. Aby wskazać nowy wiersz, użyj znaku |. Gdy chst=d_fnote_title, pierwszy wiersz tekstu jest sformatowany jako tytuł.

Przykłady

chst=d_text_outline chld=FFCC33|16|h|FF0000|b|Mad+Scientist|Boo

chst=d_text_outline chld=FF65BB|20|h|00FF00|_|Freshly+Made+Pie

Powrót do góry

Bloki tekstu czcionki z konturem (tekst + ikona)

Możesz utworzyć jedną linię tekstu z konturem oraz ikonę u góry, po lewej, u dołu lub po prawej stronie bryły. Jeśli nie potrzebujesz ikony, użyj bloku tekstu czcionki z konturem.

Składnia

chst=<icon_position_string>
chld=<text>|<font_size>|<font_fill_color>|<icon_name>|<icon_size>|<icon_fill_color>|<icon_and_text_border_color>

<icon_position_string>

Określa miejsce, w którym ikona ma się pojawić w polu tekstowym. Wybierz jedną z tych wartości:

• d_simple_text_icon_below – umieszcza ikonę na dole pola:
• d_simple_text_icon_above – umieszcza ikonę u góry pola:
• d_simple_text_icon_left – umieszcza ikonę po lewej stronie pola:
• d_simple_text_icon_right – umieszcza ikonę po prawej stronie pola:

<text>

Tekst do wyświetlenia. Tylko jeden wiersz. Spacje wpisz +.

<font_size>

Liczba określająca rozmiar czcionki w pikselach.

<font_fill_color>

Kolor wypełnienia tekstu w postaci 6-cyfrowego ciągu znaków. Wartości alfa nie są obsługiwane.

<icon_name>

Jedna z nazw ikon wymienionych u dołu dokumentu.

<icon_size>

Wysokość ikony w pikselach. Obsługiwane wartości: 12, 16, 24.

<icon_fill_color>

Kolor ikony w postaci 6-cyfrowego ciągu. Wartości alfa nie są obsługiwane.

<icon_and_text_border_color>

Kolor obramowania wokół ikony i tekstu w postaci 6-cyfrowego ciągu znaków. Wartości alfa nie są obsługiwane.

Powrót do góry

Lista dostępnych flag i ikon

Poniższe obrazy mogą być używane w dynamicznych ikonach przy użyciu odpowiedniego parametru.

Uwaga: w ciągach tekstowych wielkość liter ma znaczenie

Uwaga: ikony są dostępne tylko w tych rozmiarach: 12, 16, 24.

Ikony podstawowe

Ikony z Glyphish.com

Ikony autorstwa Josepha Waina / glyphish.com. Ta praca jest objęta licencją Creative Commons Uznanie autorstwa 3.0 Stany Zjednoczone.

Flagi

Oto flagi niektórych krajów i terytoriów.

Powrót do góry

Ciągi tekstowe

Cały wyświetlany tekst wysłany w żądaniu musi być zakodowany w formacie UTF-8, a następnie musi być zakodowany na potrzeby adresu URL. Dotyczy to tylko znaków, które nie są bezpieczne w adresie URL (znaki w adresach URL to przeważnie litery alfabetu łacińskiego (a–z) oraz małe i wielkie litery oraz mały zestaw znaków interpunkcyjnych). Na przykład UTF-8 i zakodowana w adresie URL wartość litery „è” to „%C3%A8”, a chińskiego znaku 駅 to „%E9%A7%85”. Większość przeglądarek umożliwia użycie niezakodowanej wartości w ciągu adresu URL (np. 駅) i zakoduje ją za kulisami. Istnieje jednak możliwość, że osoba, która wyświetla adres URL obrazu, korzysta z przeglądarki, która nie obsługuje tej funkcji, dlatego zwykle najlepiej jest zakodować kod UTF-8 i zakodować w adresie URL wszystkie znaki spoza zestawu ASCII w ciągach tekstowych. Pamiętaj, że dotyczy to tylko tekstu wyświetlanego w dymkach lub pinezkach, a nie znaków &, | ani innych znaków wchodzących w skład składni adresu URL.

Cienie

Do wielu ikon możesz dodać cienie, a w przypadku niektórych ikon bez samej ikony – cienie.

Powielone ikony

Wiele z tych ikon można rysować z cieniami lub bez nich. Jeśli dostępna jest opcja powielania, nazwa ikony będzie zawierać wersję kończącą się na _withshadow i drugą wersję bez tego rozszerzenia. Możesz określić ikonę z dowolnym zakończeniem w zależności od tego, czy chcesz zastosować cień.

Oto przykład średniego dymka z tekstem oraz pinezki z cieniem i bez cienia:

chst=d_bubble_icon_text_big	chst=d_bubble_icon_text_big_withshadow
chst=d_map_pin_icon	chst=d_map_pin_icon_withshadow

Wolnostojące cienie

Niektóre typy ikon umożliwiają rysowanie cienia. Może to być przydatne, jeśli na grafice używasz kilku nakładających się zacienionych ikon, które są tak blisko siebie, że cień jednej z nich pada na drugą. Zapoznaj się z dokumentacją konkretnego typu ikony, aby dowiedzieć się, czy możesz narysować tylko cień.

Powrót do góry