Na tej stronie opisujemy, jak tworzyć różne objaśnienia, dymki, pinezki i inne elementy graficzne, których może używać adres URL lub które można dodawać jako znaczniki nad innymi wykresami.
Spis treści
Wprowadzenie
Interfejs Chart API umożliwia tworzenie różnych interesujących objaśnień, pinezek lub dymków, które łączą tekst z obrazami. Takie elementy są nazywane ikonami dynamicznymi.
Możesz utworzyć wolnostojący dynamiczny obraz ikony lub za pomocą parametru chem
umieścić na wykresie ikonę dynamiczną jako typ znacznika. Na tej stronie opisujemy sposób tworzenia ikon dynamicznych jako wolnostojących obrazów lub znaczników na innych wykresach. Na stronie z informacjami o ikonach dynamicznych infografiki opisujemy wszystkie dostępne typy znaczników dynamicznych.
Składnia tworzenia ikony dynamicznej zależy od tego, czy chcesz użyć ikony wolnostojącej, czy też dynamicznego znacznika na innym wykresie.
Ikony wolnostojące
Dynamiczny obraz ikon możesz zażądać w taki sam sposób jak dowolnego innego wykresu. Wolnostojąca ikona dynamiczna obsługuje inny zestaw parametrów niż pozostałe wykresy:
Parametr | Wymagany czy opcjonalny | Opis |
---|---|---|
chst=<icon_string_constant> |
Wymagany | Opisuje rodzaj ikony do utworzenia.
|
chld=<icon_data> |
Wymagany | Konkretne dane używane do opisania rozmiaru ikony, jej obrotu, tekstu i innych wymaganych danych.
|
cht |
NIE WYKORZYSTANA | Wolnostojące dynamiczne wykresy ikon nie korzystają z parametru cht . |
chs |
NIE WYKORZYSTANA | Wolnostojące dynamiczne wykresy ikon nie korzystają z parametru chs . |
chd |
NIE WYKORZYSTANA | Parametr chld służy do przekazywania danych do wolnostojącej ikony dynamicznej. |
Przykład
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Znaczniki dynamiczne
Parametr chem
pozwala umieścić ikonę dynamiczną jako typ znacznika na kilku różnych typach wykresów. Odpowiednie instrukcje znajdziesz w dokumentacji usługi chem
.
Przykład
https://chart.googleapis.com/chart?
chs=300x140
cht=lc&chco=FF9900,224499
chd=t:75,74,66,30,10,5,3,1
chls=1|1
chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=2;ds=0
chm=v,ccccFF,0,::.2,2
Typowe funkcje ikon
Z większością ikon mogą być powiązane ciągi tekstowe lub cienie.
Ciągi tekstowe
Cały wyświetlany tekst przekazywany do interfejsu Chart API musi być zakodowany w standardzie UTF-8, a następnie zakodowany na potrzeby adresu URL.
Dotyczy to tylko znaków, które nie są bezpieczne w adresie URL (znaki przeznaczone do adresów URL to głównie litery alfabetu angielskiego (wielkie i małe litery) plus niewielki zestaw znaków interpunkcyjnych). Na przykład wartością zakodowaną w formacie UTF-8 i adresem URL litery „è” jest „%C3%A8
”, a chiński znak 駅 to „%E9%A7%85
”. Większość przeglądarek pozwala na użycie niezakodowanej wartości w ciągu adresu URL (np. 駅) i zakoduje ją za kulisami.
Istnieje jednak możliwość, że osoba wyświetlająca URL wykresu używa przeglądarki, która tego nie zrobi, więc najlepiej jest zakodować wszystkie znaki spoza zestawu ASCII w ciągach tekstowych w formacie UTF-8 i zakodować adresy URL. Pamiętaj, że dotyczy to tylko tekstu wyświetlanego w dymkach lub pinezkach, a nie znaków „&”, „|” ani innych znaków, które stanowią część składni adresu URL.
Gdy używasz parametru chem
do określania dynamicznych znaczników ikon, musisz też zmieniać znaczenie niektórych znaków w tekście, zgodnie z opisem w dokumentacji chem
.
Cienie
Możesz dodać cienie do wielu ikon, a nawet rysować cienie niektórych ikon bez samej ikony.
Powielane ikony
Wiele z tych ikon można rysować z cieniem lub bez niego. Jeśli istnieje opcja obsługi przez obserwację, nazwa ikony będzie miała wersję kończącą się na _withshadow
i inną wersję bez tego rozszerzenia. Możesz dodać ikonę z dowolnym zakończeniem w zależności od tego, czy chcesz widzieć cień.
Oto przykład średniego tekstu w dymku oraz pinezki z cieniami i bez nich:
chst=d_bubble_icon_text_big |
chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon |
chst=d_map_pin_icon_withshadow |
Cienie wolnostojące
Niektóre typy ikon umożliwiają samo korzystanie z cienia. Może to być przydatne, jeśli na grafice używasz kilku nakładających się, powielanych ikon, które są tak blisko, że cień jednej z nich pada na drugą. Oto na przykład dwa cieniowane bąbelki – najpierw Robert, a potem Alicja:
Zwróć uwagę, jak cień Alicji częściowo pokrywa Roberta. Aby rozwiązać ten problem, możesz najpierw narysować cień Alicji, potem bąbelek Roberta, na końcu Alicję bez cienia. Być może nie jest to bardzo realistyczne, jeśli chodzi o światło i cienie, ale pozwala uniknąć zasłaniania jednego bąbelka cieniem innego:
chem=
y;s=bubble_text_small_shadow;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice, no shadow
y;s=bubble_text_small_withshadow;d=bbtr,Robert,FF8,000;ds=0;dp=3.5;py=1 // Robert with shadow
y;s=bubble_text_small;d=bb,Alice,FF8,000;ds=0;dp=1;py=1 // Alice shadow
Wszystkie znaczniki mają tę samą kolejność Z równym 1 (py=1
), więc są rysowane w podanej kolejności, nad elementami wykresu (linią wykresu). Najpierw narysowany jest cień Alicji, potem na nim bańka Roberta, a na końcu bąbelek Alicji.
Sprawdź dokumentację konkretnego typu ikony, aby dowiedzieć się, czy potrafisz narysować jego cień samodzielnie.
Ikony kontekstowe
Możesz określić ikonę o różnym kolorze, rozmiarze lub nałożeniu na siebie w zależności od punktu, do którego została przypisana. Te typy ikon są dostępne tylko jako dynamiczne znaczniki ikon (parametr chem
), a nie wolnostojące.
Te ikony mogą być renderowane na serii innych niż seria, które określają ich kolor, rozmiar lub informacje dotyczące nakładania się. Oznacza to, że wartość ds
parametru chem
określa serię, w której ma być renderowana ikona, ale wartości określające rozmiar lub kolor ikony są określone w parametrach podanych poniżej. Można z tego skorzystać w przypadku danych ikon za pomocą ukrytej serii danych, ale renderuj ikony na widocznej linii lub pasku. Oto przykłady:
Ikona wyrenderowana w serii źródłowej | Ikona wyrenderowana w serii niebędącej źródłem | Ikona wykorzystująca ukryte serie |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
Typy znaczników kontekstu
Typ znacznika | Wartość chem s |
Przykład |
---|---|---|
Odmiana koloru | s=cm_color |
|
Odmiana rozmiaru | s=cm_size |
|
Różne kolory i rozmiary | s=cm_color_size |
|
Odmiana ułożenia | s=cm_repeat |
|
Nakładanie i różne kolory | s=cm_repeat_color |
Ciągi wyrównywania dla ikon kontekstowych
Ikony kontekstowe obsługują opcjonalny ciąg wyrównania pozwalający określić wyrównanie i odsunięcie ikony do punktu danych. Ten ciąg ma taką składnię:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- Dwie litery opisujące umiejscowienie ikony do punktu. Na przykład
tl
(w lewym górnym rogu) irb
(w prawym dolnym rogu). Pełną listę i opis znajdziesz w opisie parametru alignment_stringchem
. - h_anchor_offset
- [Opcjonalne] Przesunięcie punktu zakotwiczenia w poziomie w pikselach. Wartości w tym 0 muszą być poprzedzone znakiem + lub -. Ważne: musisz zakodować w adresie URL + jako %2B.
- v_anchor_offset
- [Opcjonalne] Przesunięcie w pionie punktu zakotwiczenia w pikselach. Wartości w tym 0 muszą być poprzedzone znakiem + lub -. Ważne: musisz zakodować w adresie URL + jako %2B.
Pamiętaj, że do określania odsunięć w poziomie i w pionie możesz też używać komponentu of
parametru chem
. Jeśli podasz zarówno komponent of
, jak i wartości h_anchor_offset v_anchor_offset
, do ikony zostaną zastosowane wszystkie przesunięcia.
Przykłady:
hb-0-0 Poziomo: środek dolny Bez odsunięć |
lb-0-0 Lewy dolny róg Bez przesunięć |
rb-0-0 prawy dolny róg Bez przesunięć |
ht-0-0 Góra w poziomie Bez przesunięć |
hb-20-0 Poziomo – na środku u dołu –20 w poziomie 0 w pionie |
hb%2b20-0 Poziomo – na środku u dołu +20 w poziomie 0 w pionie |
hb-0%2b10 Poziomo – na środku u dołu 0 w poziomie +10 w pionie |
hb-0-20 Poziomo – na środku u dołu 0 w poziomie –20 w pionie |
Odmiana koloru (cm_color
)
Kolor znacznika wykresu kontekstowego może się zmieniać w zależności od punktu, który reprezentuje. Musisz określić zakres kolorów, a wartość danych zostanie przeskalowana do odpowiadającego mu koloru z tego zakresu.
Składnia
chem=y;s=cm_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<icon_size>,<outline_color>,<alignment>
- <icon_shape>
- Ikona, która ma być używana. Określ ciąg identyfikatora identyfikujący jeden z obrazów wymienionych na końcu strony.
- <color_data_series>
- Od zera liczony od zera indeks serii danych używany do zmieniania koloru ikon.
- <low_color>
- Dolna wartość koloru z zakresu w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku). Jest to związane z najniższą możliwą wartością w dostępnym zakresie danych.
- <middle_color>
- Środkowa wartość koloru z zakresu, jako 3- lub 6-cyfrowy szesnastkowy kod HTML (bez # znaku). Jest ona powiązana ze średnią wartością w dostępnym zakresie danych.
- <high_color>
- Wysoka wartość koloru z zakresu w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku). Jest to związane z najwyższą możliwą wartością w dostępnym zakresie danych.
- <icon_size>
- Rozmiar ikony w pikselach. Obsługiwane wartości: 12, 16 i 24.
- <outline_color>
- Kolor konturu ikony w postaci 3- lub 6-cyfrowego koloru w formacie szesnastkowym HTML (bez znaku #).
- <alignment>
- Opcjonalny ciąg znaków opisujący wyrównanie i przesunięcie ikony.
Przykład
|
chem=y;s=cm_color; |
Odmiana rozmiaru (cm_size
)
Rozmiar znacznika wykresu kontekstowego może się zmieniać w zależności od wybranej serii danych.
Składnia
chem=y;s=cm_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<fill_color>,<alignment>
- <icon_type>
- Kształt ikony. Wybierz jedną z tych wartości:
maps_pin
,disk
lubsquare
. - <size_data_series>
- Od zera liczony od zera indeks serii danych używany do zmieniania rozmiaru ikon.
- <zero_value_size>
- Podstawowy rozmiar ikony przy minimalnej wartości danych serii.
- <size_multiplier>
- Współczynnik skalowania rozmiaru Wartość ta jest mnożona przez różnicę między wartością danych każdej ikony a minimalną wartością serii, aby obliczyć ostateczny rozmiar ikon. Dlatego mnożnik nie będzie miał wpływu na ikonę o wartości danych 0.
- <min_size>
- Minimalny rozmiar każdej ikony w pikselach.
- <outline_color>
- Kolor konturu ikony w postaci 3- lub 6-cyfrowego koloru w formacie szesnastkowym HTML (bez znaku #).
- <fill_color>
- Kolor wypełnienia ikony jako 3- lub 6-cyfrowy szesnastkowy kod HTML (bez znaku #).
- <alignment>
- Opcjonalny ciąg znaków opisujący wyrównanie i przesunięcie ikony.
Przykłady
Podstawowy przykład. Ikona o wartości zerowej jest renderowana z wartością zerową, czyli 30 pikseli. Rozmiary rosną wraz z danymi. | chd=t:0,10,20,30,40,50,60,70 |
W tym przykładzie dane o rozmiarze ikon pochodzą z żółtej linii, ale są renderowane na niebieskiej linii.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Odmiana koloru i rozmiaru (cm_color_size
)
Kolor i rozmiar znacznika wykresu kontekstowego może się zmieniać w zależności od wybranej serii danych.
Składnia
chem=y;s=cm_color_size;ds=<series_rendering_index>; ...other_values... ; d=<icon_type>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<size_data_series>,<zero_value_size>,<size_multiplier>,<min_size>,<outline_color>,<alignment>
- <icon_type>
- Kształt ikony. Wybierz jedną z tych wartości:
maps_pin
,disk
lubsquare
. - <color_data_series>
- Od zera liczony od zera indeks serii danych używany do zmieniania koloru ikon.
- <low_color>
- Dolna wartość koloru z zakresu w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku). Jest to związane z najniższą możliwą wartością w dostępnym zakresie danych.
- <middle_color>
- Środkowa wartość koloru z zakresu, jako 3- lub 6-cyfrowy szesnastkowy kod HTML (bez # znaku). Jest ona powiązana ze średnią wartością w dostępnym zakresie danych.
- <high_color>
- Wysoka wartość koloru z zakresu w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku). Jest to związane z najwyższą możliwą wartością w dostępnym zakresie danych.
- <size_data_series>
- Od zera liczony od zera indeks serii danych używany do zmieniania rozmiaru ikon.
- <zero_value_size>
- Podstawowy rozmiar ikony przy minimalnej wartości danych serii.
- <size_multiplier>
- Współczynnik skalowania rozmiaru Wartość ta jest mnożona przez różnicę między wartością danych każdej ikony a minimalną wartością serii, aby obliczyć ostateczny rozmiar ikon. Dlatego mnożnik nie będzie miał wpływu na ikonę o wartości danych 0.
- <min_size>
- Minimalny rozmiar każdej ikony w pikselach.
- <outline_color>
- Kolor konturu ikony w postaci 3- lub 6-cyfrowego koloru w formacie szesnastkowym HTML (bez znaku #).
- <alignment>
- Opcjonalny ciąg znaków opisujący wyrównanie i przesunięcie ikony.
Przykłady
W tym przykładzie użyto 2 wierszy. Pinezki korzystają z danych o kolorach z serii, w której są renderowane, ale używają danych o rozmiarze z innych serii.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
Odmiana skumulowania (cm_repeat
)
Wysokość stosu ikon może się zmieniać w zależności od wartości danych w określonym punkcie.
Składnia
chem=y;s=cm_repeat;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<fill_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- Ikona, która ma być używana. Określ ciąg identyfikatora identyfikujący jeden z obrazów wymienionych na końcu strony.
- <repeat_series_index>
- Liczący od zera indeks serii danych używany do obliczania liczby ikon do umieszczenia w danym punkcie.
- <scaling_factor>
- Wartość źródłowych serii danych jest skalowana do wartości od 0 do 1 i mnożona przez tę wartość w celu określenia, ile znaczników należy umieścić w tym punkcie. Częściowe wartości są obcinane.
- <stacking_direction>
- Kierunek nakładania: litera „h” (małymi literami) lub „V” (wielkie litery) w przypadku pionowego.
- <icon_size>
- Rozmiar każdego znacznika w pikselach. Obsługiwane wartości: 12, 16 i 24.
- <fill_color>
- Kolor wypełnienia ikony jako 3- lub 6-cyfrowy szesnastkowy kod HTML (bez znaku #).
- <outline_color>
- Kolor konturu ikony w postaci 3- lub 6-cyfrowego koloru w formacie szesnastkowym HTML (bez znaku #).
- <spacing>
- Ile miejsca w pikselach należy umieścić między znacznikami w stosie.
- <alignment>
- Opcjonalny ciąg znaków opisujący wyrównanie i przesunięcie ikony.
Przykład
W tym przykładzie użyto drugiej przykładowej serii danych. Nie jest renderowany na wykresie, ale służy do równomiernego rozmieszczenia wszystkich stosów, zaczynając od dołu wykresu.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Nakładanie i odmiany koloru (cm_repeat_color
)
Możesz zmieniać zarówno wysokość, jak i kolor stosu ikon w zależności od wartości danych w określonym punkcie.
Składnia
chem=y;s=cm_repeat_color;ds=<series_rendering_index>; ...other_values... ; d=<icon_shape>,<repeat_series_index>,<scaling_factor>,<stacking_direction>,<icon_size>,<color_data_series>,<low_color>,<middle_color>,<high_color>,<outline_color>,<spacing>,<alignment>
- <icon_shape>
- Ikona, która ma być używana. Określ ciąg identyfikatora identyfikujący jeden z obrazów wymienionych na końcu strony.
- <repeat_series_index>
- Liczący od zera indeks serii danych używany do obliczania liczby ikon do umieszczenia w danym punkcie.
- <scaling_factor>
- Wartość źródłowych serii danych jest skalowana do wartości od 0 do 1 i mnożona przez tę wartość w celu określenia, ile znaczników należy umieścić w tym punkcie. Częściowe wartości są obcinane.
- <stacking_direction>
- Kierunek nakładania: litera „h” (małymi literami) lub „V” (wielkie litery) w przypadku pionowego.
- <icon_size>
- Rozmiar każdego znacznika w pikselach. Obsługiwane wartości: 12, 16 i 24.
- <color_data_series>
- Od zera liczony od zera indeks serii danych używany do zmieniania koloru ikon.
- <low_color>
- Dolna wartość koloru z zakresu w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku). Jest to związane z najniższą możliwą wartością w dostępnym zakresie danych.
- <middle_color>
- Środkowa wartość koloru z zakresu, jako 3- lub 6-cyfrowy szesnastkowy kod HTML (bez # znaku). Jest ona powiązana ze średnią wartością w dostępnym zakresie danych.
- <high_color>
- Wysoka wartość koloru z zakresu w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku). Jest to związane z najwyższą możliwą wartością w dostępnym zakresie danych.
- <outline_color>
- Kolor konturu ikony w postaci 3- lub 6-cyfrowego koloru w formacie szesnastkowym HTML (bez znaku #).
- <spacing>
- Ile miejsca w pikselach należy umieścić między znacznikami w stosie.
- <alignment>
- Opcjonalny ciąg znaków opisujący wyrównanie i przesunięcie ikony.
Przykład
|
chem= |