Bu sayfada, URL ile istenebilecek veya diğer grafiklerin üzerine işaretçi olarak eklenebilecek çeşitli açıklama metinleri, baloncuklar, raptiyeler ve diğer grafikleri nasıl oluşturacağınız açıklanmaktadır.
İçindekiler
Giriş
Chart API, metin ve resimleri birleştiren çeşitli ilgi çekici açıklama metinleri, raptiyeler veya baloncuklar oluşturmanıza olanak tanır. Bu öğelere dinamik simgeler adı verilir.
Bağımsız bir dinamik simge resmi oluşturabilir
veya chem
parametresini kullanarak
grafiğinizin üstüne bir dinamik simgeyi işaretçi türü olarak yerleştirebilirsiniz. Bu sayfada, dinamik simgelerin nasıl bağımsız resimler veya başka bir grafikte işaretçiler olarak oluşturulacağı açıklanmaktadır. İnfografikler
Dinamik Simgeler referans sayfasında, kullanılabilen tüm dinamik işaretçi türleri
açıklanır.
Dinamik simge oluşturma söz dizimi, bağımsız bir simge mi yoksa başka bir grafikte dinamik işaretçi olarak mı istediğinize bağlıdır.
Bağımsız Simgeler
Diğer grafiklerden herhangi birini istediğiniz gibi dinamik simge resmi isteyebilirsiniz. Bağımsız bir dinamik simge, diğer grafiklerden farklı bir parametre grubunu destekler:
Parametre | Zorunlu veya isteğe bağlı | Açıklama |
---|---|---|
chst=<icon_string_constant> |
Gerekli | Ne tür simge oluşturulması gerektiğini açıklar.
|
chld=<icon_data> |
Gerekli | Simgenin boyutunu, yönünü, metnini ve diğer gerekli verileri tanımlamak için kullanılan belirli veriler.
|
cht |
KULLANILMAYAN | Bağımsız dinamik simge grafikleri cht parametresini kullanmaz. |
chs |
KULLANILMAYAN | Bağımsız dinamik simge grafikleri chs parametresini kullanmaz. |
chd |
KULLANILMAYAN | Verileri bağımsız bir dinamik simgeye aktarmak için chld parametresini kullanın. |
Örnek
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=ski|bb|Wheeee!|FFFFFF|000000
Dinamik İşaretçiler
chem
parametresini kullanarak birkaç farklı grafik türüne işaretçi türü olarak dinamik bir simge yerleştirebilirsiniz. Nasıl yapılacağını öğrenmek için chem
belgelerini inceleyin.
Örnek
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
Yaygın Simge Özellikleri
Çoğu simgeyle ilişkili metin dizeleri veya gölgeler olabilir.
Metin Dizeleri
Chart API'ye iletilen tüm görünen metinler UTF-8 olarak ve daha sonra, URL olarak kodlanmalıdır.
Bu, yalnızca URL için güvenli olmayan karakterleri etkiler (URL için güvenli karakterler çoğunlukla a-z arasındaki İngilizce harflerden oluşan büyük ve küçük harf ile küçük bir noktalama işareti kümesidir). Örneğin, "è" harfi için UTF-8 ve URL kodlamalı değer "%C3%A8
", Çince karakter olan 駅 için de "%E9%A7%85
" şeklindedir. Çoğu tarayıcı, URL dizesinde kodlanmamış bir değer (örneğin, 駅) kullanmanıza izin verir ve bunu arka planda sizin için kodlar.
Ancak, grafik URL'nizi görüntüleyen bir kişi bunu yapmayan bir tarayıcı kullanıyor olabilir. Bu nedenle, metin dizelerinde ASCII olmayan tüm karakterleri UTF-8 ve URL olarak kodlamak genellikle en iyisidir. Bunun yalnızca baloncuklarda veya raptiyelerde gösterilen metin için geçerli olduğunu, &, | veya URL söz diziminin parçası olan diğer karakterler için geçerli olmadığını unutmayın.
Dinamik simge işaretçilerini belirtmek için chem
parametresini kullanırken, chem
dokümanlarında açıklandığı gibi metninizde belirli karakterlerden de kaçınmanız gerekir.
Gölgeler
Birçok simgeye gölge ekleyebilir, hatta simge olmadan bazı simgeler için gölge çizebilirsiniz.
Gölgeli Simgeler
Bu simgelerin çoğu gölgeyle veya gölgesiz olarak çizilebilir. Gölgelendirme bir seçenekse simge adının _withshadow
ile biten bir sürümü ve bu sonu olmayan başka bir sürümü olur. Gölgeyi isteyip istememenize bağlı olarak, bu simgenin her iki sonuyla birlikte belirtebilirsiniz.
Orta boy metin baloncuğunun yanı sıra gölgeli ve gölgesiz bir raptiye örneğini burada bulabilirsiniz:
chst=d_bubble_icon_text_big |
chst=d_bubble_icon_text_big_withshadow |
chst=d_map_pin_icon |
chst=d_map_pin_icon_withshadow |
Bağımsız Gölgeler
Bazı simge türleri, gölgelerini tek başına çizmenize olanak tanır. Bir grafikte, gölgelendirilmiş birden fazla simge kullanıyorsanız ve bu simgeler çok yakın olduğundan, simgenin gölgesi diğer bir simgenin üstüne düşecek kadar yakınsa bu işlemi yapabilirsiniz. Örneğin, aşağıda gölgeli iki baloncuk görebilirsiniz. Önce Metin, ardından Aylin'in çizildiği şöyle olur:
Alice'in gölgesinin Robert'ı kısmen örttüğüne dikkat edin. Bunu düzeltmek için önce Alice gölgesini, sonra Robert balonunu, sonra da gölge olmadan Aylin'i çizebilirsiniz. Işıklandırma ve gölgeler açısından tam olarak gerçekçi olmayabilir ancak bir baloncuğun diğerinin gölgesiyle görünmesini engellemez:
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
Tüm işaretçiler aynı z sırasını (1) (py=1
) belirtir. Bu nedenle, grafik öğelerinin en üstünde (grafik çizgisi) listelenen sırayla çizilir. Önce Alice'in gölgesi, sonra da üstüne Robert balonu ve son olarak üstteki Alice balonu çizilir.
Simgenizin gölgesini tek başına çizip çizemeyeceğinizi öğrenmek için simge türünüzle ilgili dokümanlara bakın.
Bağlamsal Simgeler
Rengini, boyutunu veya yığınını atandıkları noktaya göre değiştiren bir simge belirtebilirsiniz. Bu simge türleri yalnızca dinamik simge işaretçileri (chem
parametresi) olarak kullanılabilir, bağımsız simgeler olarak kullanılamaz.
Bu simgeler; renk, boyut veya yığın bilgilerini belirten seriler dışındaki bir seride oluşturulabilir. Bu, chem
parametresinin ds
değerinin, simgenin oluşturulacağı seriyi belirttiği, ancak simgenin boyutunu veya rengini belirleyen değerlerin aşağıdaki parametrelerde belirtildiği anlamına gelir. Bunun iyi bir kullanım şekli, simge verileri için gizli bir veri dizisi kullanmak, ancak simgeleri görünür bir çizgi veya çubukta oluşturmaktır. Bazı örnekler:
Kaynak seride oluşturulan simge | Kaynak olmayan serilerde oluşturulmuş simge | Gizli serileri kullanan simge |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
Bağlam İşaretçisi Türleri
İşaretçi Türü | chem sn. değeri |
Örnek |
---|---|---|
Renk çeşitliliği | s=cm_color |
|
Boyut varyasyonu | s=cm_size |
|
Renk ve beden çeşitliliği | s=cm_color_size |
|
Yığma varyasyonu | s=cm_repeat |
|
Yığma ve renk varyasyonu | s=cm_repeat_color |
Bağlamsal Simgeler için Hizalama Dizeleri
Bağlam simgeleri, simgenin veri noktasına hizalamasını ve uzaklığını belirtmek için isteğe bağlı bir hizalama dizesini destekler. Bu dize aşağıdaki söz dizimine sahiptir:
<alignment>[+/-<h_anchor_offset>+/-<v_anchor_offset>]
- alignment
- Simgenin noktaya hizalamasını açıklayan iki harf. Örnekler arasında
tl
(sol üst) verb
(sağ alt) yer alır. Eksiksiz liste ve açıklama içinchem
parametresinin alignment_string parametresine ilişkin açıklamasına bakın. - h_anchor_offset
- [İsteğe bağlı] Sabitleme noktasının piksel cinsinden yatay uzaklığı. Sıfır dahil değerlerin önünde + veya - işareti bulunmalıdır. Önemli: + değerini %2B olarak URL olarak kodlamanız gerekir.
- v_anchor_offset
- [İsteğe bağlı] Sabitleme noktasının piksel cinsinden dikey uzaklığı. Sıfır dahil değerlerden önce + veya - işareti gelmelidir. Önemli: + değerini %2B olarak URL olarak kodlamanız gerekir.
Yatay ve dikey ofsetleri belirtmek için chem
parametresinin of
bileşenini de kullanabileceğinizi unutmayın. Hem of
bileşenini hem de h_anchor_offset v_anchor_offset
değerlerini belirtirseniz tüm ofsetler simgenize uygulanır.
Örnekler:
hb-0-0 Yatay orta alt Ofset yok |
lb-0-0 Sol alt Ofset yok |
rb-0-0 Sağ alt Ofset yok |
ht-0-0 Yatay üst Ofset yok |
hb-20-0 Yatay orta alt -20 yatay 0 dikey |
hb%2b20-0 Yatay orta alt +20 yatay 0 dikey |
hb-0%2b10 Yatay orta alt 0 yatay +10 dikey |
hb-0-20 Yatay orta alt 0 yatay -20 dikey |
Renk Çeşitleri (cm_color
)
Bağlamsal bir grafik işaretçisinin rengini, temsil ettiği noktaya göre değiştirebilirsiniz. Bir renk aralığı belirtmeniz gerekir ve veri değeri, bu aralık içinde karşılık gelen bir renge ölçeklendirilir.
Söz dizimi
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>
- Kullanılacak simge. Sayfanın sonunda listelenen resimlerden birini tanımlayan bir kimlik dizesi belirtin.
- <color_data_series>
- Simgelerin rengini değiştirmek için kullanılan veri serisinin sıfır tabanlı dizini.
- <low_color>
- Aradaki alt renk değeri (üç veya altı basamaklı HTML onaltılık rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki olası en düşük değerle ilişkilendirilir.
- <middle_color>
- Aralıkta bulunan ortadaki renk değeri (üç veya altı haneli HTML onaltılık rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki orta değerle ilişkilendirilir.
- <high_color>
- Aralıktaki yüksek renk değeri (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki olası en yüksek değerle ilişkilendirilir.
- <icon_size>
- Simgenin piksel cinsinden boyutu. Şu değerler desteklenir: 12, 16, 24.
- <outline_color>
- Simgenin dış çizgi rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <alignment>
- Simge hizalamasını ve uzaklığını açıklayan isteğe bağlı bir dize.
Örnek
|
chem=y;s=cm_color; |
Boyut Varyasyonu (cm_size
)
Bağlamsal grafik işaretçisinin boyutunu, seçtiğiniz veri serisine göre tek başına değiştirebilirsiniz.
Söz dizimi
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>
- Simgenin şekli. Şu değerlerden birini seçin:
maps_pin
,disk
veyasquare
. - <size_data_series>
- Simgelerin boyutunu değiştirmek için kullanılan veri serisinin sıfır tabanlı dizini.
- <zero_value_size>
- Simgenin, serinin minimum veri değerinde olan temel boyutu.
- <size_multiplier>
- Boyut ölçeklendirme faktörü. Bu değer, nihai simge boyutunu hesaplamak için her bir simgenin veri değeri ile minimum seri değeri arasındaki farkla çarpılır. Bu nedenle, 0 veri değerindeki bir simge bu çarpandan etkilenmez.
- <min_size>
- Herhangi bir simgenin piksel cinsinden minimum boyutu.
- <outline_color>
- Simgenin dış çizgi rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <fill_color>
- Simgenin dolgu rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <alignment>
- Simge hizalamasını ve uzaklığını açıklayan isteğe bağlı bir dize.
Örnekler
Basit bir örnek. Sıfır değerli simge, sıfır değer boyutunda (30 piksel) oluşturulur. Boyutlar, verilerle birlikte artar. | chd=t:0,10,20,30,40,50,60,70 |
Bu örnekte, simgeler boyut verilerini sarı çizgiden almakla birlikte mavi çizgide oluşturulur.
|
chem=chem=y;s=cm_size;ds=1;dp=all;d=maps_pin,0,10,90,10,8F8,000,hb |
Renk ve Beden Çeşitleri (cm_color_size
)
Seçtiğiniz veri serisine göre içeriğe dayalı bir grafik işaretçisinin hem rengini hem de boyutunu değiştirebilirsiniz.
Söz dizimi
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>
- Simgenin şekli. Şu değerlerden birini seçin:
maps_pin
,disk
veyasquare
. - <color_data_series>
- Simgelerin rengini değiştirmek için kullanılan veri serisinin sıfır tabanlı dizini.
- <low_color>
- Aradaki alt renk değeri (üç veya altı basamaklı HTML onaltılık rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki olası en düşük değerle ilişkilendirilir.
- <middle_color>
- Aralıkta bulunan ortadaki renk değeri (üç veya altı haneli HTML onaltılık rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki orta değerle ilişkilendirilir.
- <high_color>
- Aralıktaki yüksek renk değeri (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki olası en yüksek değerle ilişkilendirilir.
- <size_data_series>
- Simgelerin boyutunu değiştirmek için kullanılan veri serisinin sıfır tabanlı dizini.
- <zero_value_size>
- Simgenin, serinin minimum veri değerinde olan temel boyutu.
- <size_multiplier>
- Boyut ölçeklendirme faktörü. Bu değer, nihai simge boyutunu hesaplamak için her bir simgenin veri değeri ile minimum seri değeri arasındaki farkla çarpılır. Bu nedenle, 0 veri değerindeki bir simge bu çarpandan etkilenmez.
- <min_size>
- Herhangi bir simgenin piksel cinsinden minimum boyutu.
- <outline_color>
- Simgenin dış çizgi rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <alignment>
- Simge hizalamasını ve uzaklığını açıklayan isteğe bağlı bir dize.
Örnekler
Bu örnekte iki satır kullanılmıştır. Raptiyeler, oluşturuldukları serideki renk verilerini kullanır ancak diğer serideki boyut verilerini kullanır.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
Yığma Varyasyonu (cm_repeat
)
Belirli bir noktadaki veri değerine göre simge grubunun yüksekliğini değiştirebilirsiniz.
Söz dizimi
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>
- Kullanılacak simge. Sayfanın sonunda listelenen resimlerden birini tanımlayan bir kimlik dizesi belirtin.
- <repeat_series_index>
- Bu noktaya kaç simge yerleştirileceğini hesaplamak için kullanılan veri serisinin sıfır tabanlı dizini.
- <scaling_factor>
- Kaynak veri dizisi değeri, 0 ile 1 arasında bir değere ölçeklenir ve bu değerle çarpılır. Böylece, bu noktaya kaç işaretçi yerleştirileceği belirlenir. Kısmi değerler kısaltılır.
- <stacking_direction>
- Yığma yönü: yatay için "h" (küçük harf), dikey için "V" (büyük harf).
- <icon_size>
- Her işaretçinin piksel cinsinden boyutu. Şu değerler desteklenir: 12, 16, 24.
- <fill_color>
- Simgenin dolgu rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <outline_color>
- Simgenin dış çizgi rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <spacing>
- Gruptaki her bir işaretçinin arasına yerleştirileceği alanın piksel cinsinden miktarı.
- <alignment>
- Simge hizalamasını ve uzaklığını açıklayan isteğe bağlı bir dize.
Örnek
Bu örnekte ikinci bir model veri serisi kullanılmaktadır. Grafikte oluşturulmaz, ancak grafiğin alt kısmından başlayarak tüm yığınları eşit şekilde ayırmak için kullanılır.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Yığma ve Renk Varyasyonu (cm_repeat_color
)
Belirli bir noktadaki veri değerine bağlı olarak, bir simge grubunun hem yüksekliğini hem de rengini değiştirebilirsiniz.
Söz dizimi
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>
- Kullanılacak simge. Sayfanın sonunda listelenen resimlerden birini tanımlayan bir kimlik dizesi belirtin.
- <repeat_series_index>
- Bu noktaya kaç simge yerleştirileceğini hesaplamak için kullanılan veri serisinin sıfır tabanlı dizini.
- <scaling_factor>
- Kaynak veri dizisi değeri, 0 ile 1 arasında bir değere ölçeklenir ve bu değerle çarpılır. Böylece, bu noktaya kaç işaretçi yerleştirileceği belirlenir. Kısmi değerler kısaltılır.
- <stacking_direction>
- Yığma yönü: yatay için "h" (küçük harf), dikey için "V" (büyük harf).
- <icon_size>
- Her işaretçinin piksel cinsinden boyutu. Şu değerler desteklenir: 12, 16, 24.
- <color_data_series>
- Simgelerin rengini değiştirmek için kullanılan veri serisinin sıfır tabanlı dizini.
- <low_color>
- Aradaki alt renk değeri (üç veya altı basamaklı HTML onaltılık rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki olası en düşük değerle ilişkilendirilir.
- <middle_color>
- Aralıkta bulunan ortadaki renk değeri (üç veya altı haneli HTML onaltılık rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki orta değerle ilişkilendirilir.
- <high_color>
- Aralıktaki yüksek renk değeri (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur). Bu, kullanılabilir veri aralığındaki olası en yüksek değerle ilişkilendirilir.
- <outline_color>
- Simgenin dış çizgi rengi (üç veya altı basamaklı HTML onaltılı rengi olarak # işareti yoktur).
- <spacing>
- Gruptaki her bir işaretçinin arasına yerleştirileceği alanın piksel cinsinden miktarı.
- <alignment>
- Simge hizalamasını ve uzaklığını açıklayan isteğe bağlı bir dize.
Örnek
|
chem= |