Ikony dynamiczne

   

Z tego artykułu dowiesz się, jak tworzyć różne objaśnienia, dymki, pinezki i inne grafiki, których adres URL może prosić o podanie adresu URL lub które można dodawać jako znaczniki na innych wykresach.

Spis treści

1. Wprowadzenie
   1. Ikony wolnostojące
   2. Znaczniki dynamiczne
2. Wspólne 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. Są to tzw. ikony dynamiczne. Możesz utworzyć niezależną dynamiczną ikonę lub umieścić ją na wykresie jako typ znacznika za pomocą parametru chem. Na tej stronie opisujemy, jak tworzyć ikony dynamiczne jako niezależne obrazy lub znaczniki na innych wykresach. Na stronie z informacjami o ikonach dynamicznych infografiki znajdziesz wszystkie typy dostępnych typów znaczników dynamicznych.

Składnia tworzenia ikony dynamicznej zależy od tego, czy chcesz używać ikony samodzielnie, czy jako znacznika dynamicznego na innym wykresie.

Ikony wolnostojące

Możesz zażądać dynamicznego obrazu ikony w taki sam sposób jak w przypadku innych wykresów. Wolnostojąca ikona dynamiczna obsługuje inny zestaw parametrów niż inne wykresy:

Parametr	Wymagany czy opcjonalny	Opis
chst=<icon_string_constant>	Wymagane	Opisuje, jaki rodzaj ikony ma zostać utworzony. icon_string_constant – stała ciągu znaków opisująca typ ikony do utworzenia. Zapoznaj się z informacjami o wyborze poniżej, aby wybrać ikonę.
chld=<icon_data>	Wymagane	Określone dane używane do opisania rozmiaru ikony, obrotu, tekstu i innych wymaganych informacji. icon_data – zbiór wartości rozdzielonych pionową kreską odpowiednią dla ikony. Dokumentacja na tej stronie zawiera informacje o tym, jakie wartości są wymagane dla poszczególnych typów ikon.
cht	NIEUŻYTKOWANE	Wolnostojące dynamiczne wykresy ikon nie używają parametru cht.
chs	NIEUŻYTKOWANE	Wolnostojące dynamiczne wykresy ikon nie używają parametru chs.
chd	NIEUŻYTKOWANE	Parametr chld służy do przekazywania danych do niezależnej ikony dynamicznej.

Przykład

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

Znaczniki dynamiczne

Korzystając z parametru chem, możesz umieścić ikonę dynamiczną jako typ znacznika na kilku różnych typach wykresów. Aby dowiedzieć się, jak to zrobić, zapoznaj się z dokumentacją 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 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. Możliwe jest jednak, że osoba wyświetlająca adres URL wykresu 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.

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

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ą. Na przykład mamy dwa bąbelki cieniowane, najpierw narysowane przez Roberta, a potem Alicja:

Zwróć uwagę, jak cień Alicji częściowo zasłania Roberta. Aby rozwiązać ten problem, możesz najpierw narysować cień Alicji, następnie dymek Roberta, a następnie Alicję bez cienia. Może nie jest to zbyt realistyczne pod względem oświetlenia i cieni, ale pozwala uniknąć zasłonięcia 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ść nakładania elementów równą 1 (py=1), więc są rysowane w podanej kolejności nad elementami wykresu (linia wykresu). Najpierw rysowany jest cień Alicji, później bańka Roberta na nim i bąbelek Alicji na górze.

Zapoznaj się z dokumentacją konkretnego typu ikony, aby dowiedzieć się, czy możesz narysować tylko cień.

Ikony kontekstowe

Możesz określić ikonę o różnym kolorze, rozmiarze lub ułożeniu w stosunku do miejsca, do którego zostały przypisane. Te typy ikon są dostępne tylko jako dynamiczne znaczniki ikon (parametr chem), a nie jako ikony wolnostojące.

Te ikony można renderować w serii innej niż seria, która określa ich kolor, rozmiar lub informacje o układzie. Oznacza to, że wartość ds parametru chem określa serię, w której ma zostać wyrenderowana ikona. Wartości pozwalające na określenie rozmiaru lub koloru ikony są jednak określone w parametrach podanych poniżej. Dobrym zastosowaniem tego rozwiązania jest zastosowanie serii ukrytych danych w celu wyświetlenia danych ikon i renderowanie ikon na widocznej linii lub na widocznym pasku. Oto kilka przykładów:

Ikona wyrenderowana w serii źródłowej	Ikona wyrenderowana w serii innej niż źródłowa	Ikona korzystania z ukrytej serii
chem=   y;s=cm_size;ds=0;...;   d=maps_pin,0,10,50,10,8F8,000,hb ds=0 – wyrenderowanie 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 – wyrenderowanie 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świetlana jest pierwsza seria i użyte dane linii. Wszystkie późniejsze serie są ukryte. ds=0 – znaczniki wyrenderowane 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
Wersja kolorystyczna	s=cm_color
Różnice w rozmiarze	s=cm_size
Różnice w kolorze i rozmiarze	s=cm_color_size
Odmiana nakładania	s=cm_repeat
Grupowanie i różne kolory	s=cm_repeat_color

Odmiana kolorów (cm_color)

Możesz zmieniać kolor znacznika wykresu kontekstowego w zależności od punktu, który reprezentuje. Musisz określić zakres kolorów, a wartość danych zostanie skalowana do odpowiedniego 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órej chcesz użyć. Podaj ciąg identyfikatora identyfikujący jeden z obrazów wymienionych na końcu strony.

<color_data_series>

Indeks serii danych liczony od zera służący do zmiany koloru ikon.

<low_color>

Niska wartość koloru w zakresie w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #). Jest ona powiązana z najniższą możliwą wartością w dostępnym zakresie danych.

<middle_color>

Środkowa wartość koloru w zakresie w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #). Jest ona powiązana ze średnią wartością w dostępnym zakresie danych.

<high_color>

Wysoka wartość koloru w zakresie 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, 24.

<outline_color>

Kolor obrysu ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #).

<alignment>

Opcjonalny ciąg znaków opisujący wyrównanie i odsunięcie ikon.

Przykład

s=cm_color – ikona odmiany koloru ds=0 – wyrenderuj je na podstawie serii danych 0 dp=all – umieść ikonę na wszystkich punktach. Wartości d: petrol – identyfikator ikony 0 – kolor z serii 0 000,0FF,F55 – definicja skali kolorów 24 – rozmiar ikony 000 – czarne kontury hv – dopasuj ikony na środku do punktu w poziomie 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)

Możesz zmieniać rozmiar samego znacznika wykresu kontekstowego 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>

Indeks serii danych liczony od zera służący do zmiany rozmiaru ikon.

<zero_value_size>

Podstawowy rozmiar ikony przy minimalnej wartości danych dla serii.

<size_multiplier>

Współczynnik skalowania rozmiaru. Mnożymy tę wartość przez różnicę między wartością danych każdej ikony a minimalną wartością serii, aby obliczyć ostateczny rozmiar ikony. Dlatego ten mnożnik nie wpłynie na ikonę przy wartości danych 0.

<min_size>

Minimalny rozmiar każdej ikony (w pikselach).

<outline_color>

Kolor obrysu ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #).

<fill_color>

Kolor wypełnienia ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku).

<alignment>

Opcjonalny ciąg znaków opisujący wyrównanie i odsunięcie ikon.

Przykłady

Podstawowy przykład. Ikona o zerowej wartości jest renderowana przy rozmiarze zerowym, który wynosi 30 pikseli. Rozmiar zwiększa się 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 ikony pobierają dane o rozmiarze 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żyj ikony pinezki na mapie 0 – skaluj rozmiar zgodnie z serią danych 0 (żółta linia). 10 – rozmiar pinezki przy wartości 0 90 – mnożnik rozmiaru 10 – rozmiar minimalny 8F8 – kolor wypełnienia 000 – kolor konturu hb – wyśrodkuj je poziomo na dole 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

 

 

---

Zmienność koloru i rozmiaru (cm_color_size)

W zależności od wybranej serii danych możesz zmieniać kolor i rozmiar znacznika wykresu kontekstowego.

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>

Indeks serii danych liczony od zera służący do zmiany koloru ikon.

<low_color>

Niska wartość koloru w zakresie w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #). Jest ona powiązana z najniższą możliwą wartością w dostępnym zakresie danych.

<middle_color>

Środkowa wartość koloru w zakresie w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #). Jest ona powiązana ze średnią wartością w dostępnym zakresie danych.

<high_color>

Wysoka wartość koloru w zakresie 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>

Indeks serii danych liczony od zera służący do zmiany rozmiaru ikon.

<zero_value_size>

Podstawowy rozmiar ikony przy minimalnej wartości danych dla serii.

<size_multiplier>

Współczynnik skalowania rozmiaru. Mnożymy tę wartość przez różnicę między wartością danych każdej ikony a minimalną wartością serii, aby obliczyć ostateczny rozmiar ikony. Dlatego ten mnożnik nie wpłynie na ikonę przy wartości danych 0.

<min_size>

Minimalny rozmiar każdej ikony (w pikselach).

<outline_color>

Kolor obrysu ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #).

<alignment>

Opcjonalny ciąg znaków opisujący wyrównanie i odsunięcie ikon.

Przykłady

W tym przykładzie są to 2 wiersze. Pinezki korzystają z danych o kolorze z serii, na której są renderowane, ale używają danych o rozmiarze z innej serii. chd=s:0akAZtnkmi,nbMPJOKXXS – pierwsza seria służy do narysowania żółtej linii i określenia koloru pinezki. Druga seria jest używana do wyznaczania niebieskiej linii oraz rozmiaru pinezki. chem=y – wyrenderuj ikonę dynamiczną s=cm_color_size – użyj ikony kontekstu dotyczącej koloru i rozmiaru. ds=1 – wyrenderuj elementy z serii danych 1, czyli niebieskiej linii. dp=all – umieść ikonę na wszystkich punktach. d= maps_pin – użyj symbolu pinezki na mapie. 1 – użyj serii danych 1 jako koloru pinezki. 000,0FF,F55 – kolory niskie, średnie i wysokie. 0 – użyj serii danych 0 jako rozmiaru pinezki. 10 – pinezka o wartości 0 ma 10 pikseli. 90 – mnożnik rozmiaru wynoszący 90. 10 – minimalny rozmiar pinezki to 10 pikseli. 000 – czarny kolor konturu. hb – wyśrodkuj bolce 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 stosu (cm_repeat)

Wysokość grupy ikon można zmieniać zależnie 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órej chcesz użyć. Podaj ciąg identyfikatora identyfikujący jeden z obrazów wymienionych na końcu strony.

<repeat_series_index>

Od zera indeks serii danych używany do obliczania liczby ikon do umieszczenia w tym punkcie.

<scaling_factor>

Wartość źródłowego serii danych jest skalowana do wartości od 0 do 1 i mnożona przez tę wartość, aby określić, ile znaczników należy umieścić w tym punkcie. Częściowe wartości są obcinane.

<stacking_direction>

Kierunek skumulowania: „h” (małe litery) dla orientacji poziomej lub „V” (wielkie litery) dla orientacji pionowej.

<icon_size>

Rozmiar każdego znacznika w pikselach. Obsługiwane wartości: 12, 16, 24.

<fill_color>

Kolor wypełnienia ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez # znaku).

<outline_color>

Kolor obrysu ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #).

<spacing>

Ilość miejsca (w pikselach) do umieszczenia między znacznikami w grupie.

<alignment>

Opcjonalny ciąg znaków opisujący wyrównanie i odsunięcie ikon.

Przykład

W tym przykładzie zastosowano drugą fikcyjną serię danych. Nie jest on 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. Druga jest używana do określenia podstawy każdego stosu ikon, na poziomie 0. chem=y – wyrenderuj ikonę dynamiczną s=cm_repeat – użyj ikony kontekstu wariantów grupowania. ds=1 – wyrenderuj elementy w serii danych 1. dp=all – umieść ikonę na wszystkich punktach. d= d=petrol – używaj symbolu benzyny. 0 – do zliczania powtórzeń użyj serii danych 0. 9 – użyj współczynnika skalowania 6. V – ułóż w pionie. 16 – każdy znacznik powinien mieć 16 pikseli wysokości. F00 – kolor wypełnienia ikony. 000 – kolor konturu ikony. 2 – 2 piksele między każdą ikoną w grupie. 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

 




---

 

Skumulowanie i odmiana kolorów (cm_repeat_color)

Możesz zmieniać wysokość i kolor grupy ikon w zależności od wartości danych w konkretnym 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órej chcesz użyć. Podaj ciąg identyfikatora identyfikujący jeden z obrazów wymienionych na końcu strony.

<repeat_series_index>

Od zera indeks serii danych używany do obliczania liczby ikon do umieszczenia w tym punkcie.

<scaling_factor>

Wartość źródłowego serii danych jest skalowana do wartości od 0 do 1 i mnożona przez tę wartość, aby określić, ile znaczników należy umieścić w tym punkcie. Częściowe wartości są obcinane.

<stacking_direction>

Kierunek skumulowania: „h” (małe litery) dla orientacji poziomej lub „V” (wielkie litery) dla orientacji pionowej.

<icon_size>

Rozmiar każdego znacznika w pikselach. Obsługiwane wartości: 12, 16, 24.

<color_data_series>

Indeks serii danych liczony od zera służący do zmiany koloru ikon.

<low_color>

Niska wartość koloru w zakresie w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #). Jest ona powiązana z najniższą możliwą wartością w dostępnym zakresie danych.

<middle_color>

Środkowa wartość koloru w zakresie w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #). Jest ona powiązana ze średnią wartością w dostępnym zakresie danych.

<high_color>

Wysoka wartość koloru w zakresie 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 obrysu ikony w postaci 3- lub 6-cyfrowego kodu szesnastkowego HTML (bez znaku #).

<spacing>

Ilość miejsca (w pikselach) do umieszczenia między znacznikami w grupie.

<alignment>

Opcjonalny ciąg znaków opisujący wyrównanie i odsunięcie ikon.

Przykład

chem=y – wyrenderuj ikonę dynamiczną s=cm_repeat_color – użyj ikony grupowania i kontekstu odmiany koloru. ds=0 – wyrenderuj elementy w serii danych 0. dp=all – umieść ikonę na wszystkich punktach. d= petrol – używaj symbolu benzyny. 0 – do zliczania powtórzeń użyj serii danych 0. 6 – użyj współczynnika skalowania 6. V – ułóż w pionie. 12 – każdy znacznik powinien mieć co najmniej 12 pikseli wysokości. 0 – do określenia koloru użyj serii 0. F00,0F0,00F – niskie, średnie i wysokie wartości koloru. 000 – kolor konturu ikony. 2 – 2 piksele między każdą ikoną w grupie. 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