Ikony dynamiczne

   

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

1. Wprowadzenie
   1. Ikony wolnostojące
   2. Znaczniki dynamiczne
2. Typowe funkcje ikon
   1. Ciągi tekstowe
   2. Cienie
3. Ikony kontekstowe

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. icon_string_constant – stały ciąg tekstowy opisujący typ ikony do utworzenia. Informacje o tym, jak wybrać ikonę, znajdziesz poniżej w sekcji Wybór ikon.
chld=<icon_data>	Wymagany	Konkretne dane używane do opisania rozmiaru ikony, jej obrotu, tekstu i innych wymaganych danych. icon_data – zestaw wartości rozdzielonych pionową kreską odpowiednich dla ikony. W dokumentacji na tej stronie znajdziesz informacje o wartościach wymaganych przez poszczególne typy ikon.
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=   y;s=cm_size;ds=0;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=0 – renderowanie w serii 0 (czerwona linia) d=maps_pin,0,... – dane z serii 0	chem=   y;s=cm_size;ds=1;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=1 – Renderuj w serii 1 (niebieska linia) d=maps_pin,0,... – dane z serii 0	chd=t1:   10,20,30,5,10,60   10,20,30,70,60,5 chem=   y;s=cm_size;ds=0;dp=all;   d=disk,1,5,20,5,FFFF10,000 t1: – wyświetla się pierwsza seria i używane są dane linii. Wszystkie późniejsze serie są ukryte. ds=0 – znaczniki renderowane w serii 0. d=disk,1,... – dane na dysku pochodzą z ukrytej serii 1.

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

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

s=cm_color – ikona odmiany koloru ds=0 – renderuj je na serii danych 0 dp=all – umieszcza ikonę na wszystkich punktach. wartości d: petrol – identyfikator ikony 0 – kolor z serii danych 0 000,0FF,F55 – definicja skali kolorów 24 – rozmiar ikony 000 – czarne kontury hv – wyrównaj ikony na środku z punktem zarówno w poziomie, jak i w pionie.

chem=y;s=cm_color;   ds=0;   dp=all;   d=petrol,0,000,0FF,F55,24,000,hv

Powrót do góry

 

 

---

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 lub square.

<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 chem=y;s=cm_size;ds=0;dp=all;py=-1;d=maps_pin,0,30,100,10,8F8,000,hb

W tym przykładzie dane o rozmiarze ikon pochodzą z żółtej linii, ale są renderowane na niebieskiej linii. chem=y – znacznik dynamiczny s=cm_size – wariancja rozmiaru ds=1 – wyrenderowano na podstawie serii danych 1 (niebieska linia) dp=all – wyrenderowano we wszystkich punktach. d= maps_pin – użycie ikony pinezki na mapie 0 – przeskaluj rozmiar zgodnie z serią danych 0 (żółta linia) 10 – rozmiar kodu PIN dla wartości 0 90 – mnożnik rozmiaru 10 – minimalny rozmiar 8F8 – kolor wypełnienia 000 – kolor konturu hb – umieść je na środku w poziomie u dołu pinezki.

chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb

Powrót do góry

 

 

---

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 lub square.

<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 – pierwsza seria służy do wyznaczenia żółtej linii i określania koloru pinezki. Druga seria jest używana przez niebieską linię i rozmiar pinezki. chem=y – renderuj ikonę dynamiczną. s=cm_color_size – kliknij ikonę kontekstu odmiany koloru i rozmiaru. ds=1 – Renderuj elementy w serii danych 1 (niebieskiej linii). dp=all – umieść ikonę we wszystkich punktach. d= maps_pin – użyj symbolu pinezki na mapie. 1 – jako kolor pinezki użyj serii danych 1. 000,0FF,F55 – niski, średni i wysoki kolor. 0 – określa rozmiar kodu PIN z serii danych 0. 10 – pinezka ma 10 pikseli dla wartości 0. 90 – mnożnik rozmiaru wynoszący 90. 10 – minimalny rozmiar pinezki: 10 pikseli. 000 – czarny kolor konturu. hb – wyśrodkuj szpilki poziomo wzdłuż dolnej krawędzi do każdego punktu danych.

chd=s:0akAZtnkmi,nbMPJOKXXS chem=y;s=cm_color_size;ds=1;dp=all;d=maps_pin,1,000,0FF,F55,0,10,90,10,000,hb

Powrót do góry

 

 

---

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 – pierwsza seria służy do narysowania linii i określenia wysokości stosu. Drugie ustawienie jest używane do określania podstawy każdego stosu ikon na poziomie 0. chem=y – renderuj ikonę dynamiczną. s=cm_repeat – kliknij ikonę kontekstu odmiany w nakładaniu. ds=1 – wyrenderuj elementy w serii danych 1. dp=all – umieść ikonę we wszystkich punktach. d= d=petrol – użyj symbolu benzyny. 0 – do określenia liczby powtórzeń użyj serii danych 0. 9 – użyj współczynnika skalowania wynoszącego 6. V – stos w pionie. 16 – każdy znacznik powinien mieć wysokość 16 pikseli. F00 – kolor wypełnienia ikony; 000 – kolor konturu ikony. 2 – 2 piksele między każdą ikoną w stosie. hb – wyśrodkuj stosy na dole

chd=s1:0akAZtnkmi,AAAAAAAAAA chem=   y;s=cm_repeat;ds=1;dp=all;   d=petrol,0,9,V,16,F00,000,2,hb

Powrót do góry

 




---

 

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=y – renderuj ikonę dynamiczną. s=cm_repeat_color – kliknij ikonę kontekstu nakładania i odmianach kolorów. ds=0 – wyrenderuj elementy na serii danych 0. dp=all – umieść ikonę we wszystkich punktach. d= petrol – użyj symbolu benzyny. 0 – do określenia liczby powtórzeń użyj serii danych 0. 6 – użyj współczynnika skalowania wynoszącego 6. V – stos w pionie. 12 – każdy znacznik powinien mieć wysokość 12 pikseli. 0 – do określenia koloru użyj serii 0. F00,0F0,00F – dolna, środkowa i wysoka wartość koloru. 000 – kolor konturu ikony. 2 – 2 piksele między każdą ikoną w stosie. hv – wyśrodkuj stosy w pionie i poziomie w każdym punkcie danych.

chem=   y;s=cm_repeat_color;ds=0;dp=all;   d=petrol,0,6,V,12,0,F00,0F0,00F,000,2,hv

Powrót do góry