Bu sayfada, URL ile istenebilen veya diğer grafiklerin üzerine işaretçi olarak eklenebilecek çeşitli açıklama metinleri, baloncuklar, raptiyeler ve başka grafiklerin nasıl oluşturulacağı açıklanmaktadır.
İçindekiler
Giriş
Chart API, metin ve resimleri karıştıran çeşitli ilgi çekici açıklama metinleri, raptiyeler veya baloncuklar oluşturmanıza olanak tanır. Bu öğelere dinamik simgeler denir.
Bağımsız bir dinamik simge resmi oluşturabilir
veya chem
parametresini kullanarak bir dinamik simgeyi grafiğinizin üst kısmına işaretçi türü olarak
yerleştirebilirsiniz. Bu sayfada, dinamik simgelerin ayrı resimler olarak veya başka bir grafikte işaretçi olarak nasıl oluşturulacağı açıklanmaktadır. Bilgi grafikleri
Dinamik Simgeler referans sayfasında, kullanılabilir tüm
dinamik işaretçi türü türleri açıklanmaktadır.
Dinamik simge oluşturmak için kullanılacak söz dizimi, bağımsız simge mi yoksa başka bir grafikte dinamik işaretçi olarak mı istediğinize bağlıdır.
Bağımsız Simgeler
Dinamik simge resmini, diğer grafiklerle aynı şekilde isteyebilirsiniz. Bağımsız dinamik simge, diğer grafiklerden farklı bir parametre grubunu destekler:
Parametre | Zorunlu veya İsteğe Bağlı | Açıklama |
---|---|---|
chst=<icon_string_constant> |
Zorunlu | Ne tür bir simgenin oluşturulacağını açıklar.
|
chld=<icon_data> |
Zorunlu | Simgenin boyutunu, döndürmesini, metnini ve gerekli diğer verileri açıklamak için kullanılan belirli veriler.
|
cht |
KULLANILMADI | Bağımsız dinamik simge grafiklerinde cht parametresi kullanılmaz. |
chs |
KULLANILMADI | Bağımsız dinamik simge grafiklerinde chs parametresi kullanılmaz. |
chd |
KULLANILMADI | Bağımsız bir dinamik simgeye veri iletmek 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 bir dinamik simgeyi işaretçi türü olarak birkaç farklı grafik türüne
yerleştirebilirsiniz. Nasıl yapılacağını öğrenmek için chem
belgelerine bakın.
Ö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
Ortak simge özellikleri
Çoğu simge, ilişkili metin dizeleri veya gölgelere sahip olabilir.
Metin Dizeleri
Chart API'ye iletilen tüm görünen metinler önce UTF-8, ardından URL olarak kodlanmalıdır.
Bu, yalnızca URL'de güvenli olmayan karakterleri etkiler (URL için güvenli karakterler çoğunlukla hem büyük hem de küçük harflerden oluşan a-z İngilizce harfleri ve küçük bir noktalama işareti kümesidir). Örneğin, "è" harfi için UTF-8 ve URL kodlamalı değer "%C3%A8
", Çince karakteri için "%E9%A7%85
" ise çoğu tarayıcı URL dizesinde kodlanmamış bir değer kullanmanıza izin verir (örneğin, 駅) ve bunu sizin için arka planda kodlar.
Bununla birlikte, grafik URL'nizi görüntüleyen bir kişi bunu yapmayan bir tarayıcı kullanıyor olabilir. Bu nedenle, genellikle metin dizelerindeki tüm ASCII olmayan karakterleri UTF-8 ve URL olarak kodlamak en iyi yöntemdir. Bunun yalnızca baloncuklarda veya raptiyelerde gösterilen metinler için 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 metninizdeki belirli karakterlere çıkış karakteri de eklemeniz gerekir.
Gölgeler
Birçok simgeye gölge ekleyebilir, hatta simge olmadan bazı simgeler için gölge çizebilirsiniz.
Gölgelendirilen Simgeler
Bu simgelerin çoğu gölgelerle veya gölge olmadan çizilebilir. Gölgelendirme kullanılabiliyorsa simge adında _withshadow
ile biten bir sürüm ve bu uzantısı olmayan başka bir sürüm bulunur. Gölge isteyip istemediğinize bağlı olarak
her iki sonla birlikte bir simge belirtebilirsiniz.
Aşağıda, orta boy metin balonu ile gölge içeren ve içermeyen bir raptiye örneği verilmiştir:
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ş birkaç simge kullanıyorsanız ve bu simgeler bir simgenin gölgesi başka bir simgenin üzerine gelecek kadar yakınsa bunu yapmak isteyebilirsiniz. Örneğin, burada önce Robert'ın, ardından Aylin'in çizdiği iki gölgeli baloncuk gösterilmektedir:
Ayşe'nin gölgesinin Ahmet'i nasıl kısmen kapattığına dikkat edin. Bunu düzeltmek için önce Ayşe gölgesini, ardından Robert balonunu, sonra da gölge olmadan Aylin'i çizebilirsiniz. Aydınlatma ve gölgeler açısından tamamen gerçekçi olmayabilir, ancak bir balonu diğerinin gölgesiyle karartmaktan kaçınır:
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
) belirttiğinden grafik öğelerinin (grafik çizgisi) üzerinde, listelenen sırada
çizilir. Önce Alice gölgesi, ardından onun üzerindeki Robert balonu ve son olarak da üstteki Alice balonu çizilir.
Gölgesini tek başına çizip çizemeyeceğinizi öğrenmek için özel simge türünüzle ilgili dokümanlara bakın.
İçeriğe Dayalı Simgeler
Rengini, boyutunu veya yığılma durumunu 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ığma bilgilerini belirten seri dışındaki bir seride oluşturulabilir. Bu, chem
parametresinin ds
değerinin, simgenin oluşturulacağı seriyi belirttiği anlamına gelir. Ancak simgenin boyutunu veya rengini belirlemeye ilişkin değerler aşağıda verilen parametrelerde belirtilmiştir. Bunun iyi bir kullanımı, simge verileri için gizli bir veri dizisi kullanmak, ancak simgeleri görünür bir satırda veya çubukta oluşturmaktır. Bazı örnekler:
Kaynak seride oluşturulan simge | Kaynak olmayan seride oluşturulan simge | Gizli seriyi kullanan simge |
---|---|---|
chem=
|
chem=
|
chd=t1:
|
Bağlam İşaretçisi Türleri
İşaretçi Türü | chem sn. Değeri |
Örnek |
---|---|---|
Renk varyasyonu | 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 |
İçeriğe Dayalı Simgeler için Hizalama Dizeleri
Bağlamsal simgeler, simgenin veri noktasıyla hizalamasını ve belirli bir mesafeyi 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. Örnek olarak şunlar verilebilir:
tl
(sol üst) verb
(sağ alt). Eksiksiz bir liste ve açıklama içinchem
parametresinin alignment_string parametresi açıklamasına bakın. - h_anchor_offset
- [İsteğe bağlı] Sabitleme noktasının yatay ofseti (piksel cinsinden). Sıfır değerini içeren değerlerin önüne + veya - gelmelidir. Önemli: + URL'sini %2B olarak kodlamanız gerekir.
- v_anchor_offset
- [İsteğe bağlı] Sabitleme noktasının dikey ofseti (piksel cinsinden). Sıfır dahil değerlerin önüne + veya - gelmelidir. Önemli: + URL'sini %2B 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 Alt yatay orta -20 yatay 0 dikey |
hb%2b20-0 Alt yatay orta +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 Varyasyonu (cm_color
)
Bağlamsal grafik işaretçisinin rengini, temsil ettiği noktaya göre değiştirebilirsiniz. Bir renk aralığı belirtmeniz gerekir. Veri değeri, o aralık içindeki karşılık gelen bir renge göre ölçeklenir.
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ı dizinidir.
- <low_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak aralıktaki düşük renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki olası en düşük değerle ilişkilendirilir.
- <middle_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak, aralıktaki orta renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki ortadaki değerle ilişkilendirilir.
- <high_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak aralıktaki yüksek renk değeri (# işareti yoktur). Bu değer, 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 üç veya altı basamaklı HTML onaltılık rengi olarak dış çizgi rengi (# işareti yoktur).
- <alignment>
- Simge hizalamasını ve göreli konumu açıklayan isteğe bağlı bir dize.
Örnek
|
chem=y;s=cm_color; |
Boyut Varyasyonu (cm_size
)
Yalnızca bir bağlamsal grafik işaretleyicinin boyutunu, seçtiğiniz veri serisine göre 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ı dizinidir.
- <zero_value_size>
- Seri için minimum veri değerinde simgenin taban boyutu.
- <size_multiplier>
- Boyut ölçeklendirme faktörü. Nihai simge boyutunu hesaplamak için bu değer, 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 simge için piksel cinsinden minimum boyuttur.
- <outline_color>
- Simgenin üç veya altı basamaklı HTML onaltılık rengi olarak dış çizgi rengi (# işareti yoktur).
- <fill_color>
- Simgenin üç veya altı basamaklı HTML onaltılık rengi olarak dolgu rengi (# işareti yoktur).
- <alignment>
- Simge hizalamasını ve göreli konumu açıklayan isteğe bağlı bir dize.
Örnekler
Temel bir örnek. Değeri sıfır olan simge, 30 piksel olan sıfır değeri boyutunda oluşturulur. Boyutlar da verilerle birlikte artar. | chd=t:0,10,20,30,40,50,60,70 |
Bu örnekte simgeler boyut verilerini sarı çizgiden alır ancak 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 dizisine göre bir bağlamsal 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ı dizinidir.
- <low_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak aralıktaki düşük renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki olası en düşük değerle ilişkilendirilir.
- <middle_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak, aralıktaki orta renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki ortadaki değerle ilişkilendirilir.
- <high_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak aralıktaki yüksek renk değeri (# işareti yoktur). Bu değer, 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ı dizinidir.
- <zero_value_size>
- Seri için minimum veri değerinde simgenin taban boyutu.
- <size_multiplier>
- Boyut ölçeklendirme faktörü. Nihai simge boyutunu hesaplamak için bu değer, 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 simge için piksel cinsinden minimum boyuttur.
- <outline_color>
- Simgenin üç veya altı basamaklı HTML onaltılık rengi olarak dış çizgi rengi (# işareti yoktur).
- <alignment>
- Simge hizalamasını ve göreli konumu açıklayan isteğe bağlı bir dize.
Örnekler
Bu örnekte iki satır kullanılmıştır. Raptiyeler, oluşturuldukları serinin renk verilerini kullanır ancak diğer serideki boyut verilerini kullanır.
|
chd=s:0akAZtnkmi,nbMPJOKXXS |
Varyantı Yığma (cm_repeat
)
Bir simge grubunun yüksekliğini belirli bir noktadaki veri değerine göre 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ştirilecek olduğunu hesaplamak için kullanılan veri serisinin sıfır tabanlı dizinidir.
- <scaling_factor>
- Kaynak veri serisi değeri, 0 ile 1 arasında bir değere ölçeklenir ve ilgili noktaya kaç işaretçi yerleştirileceğini belirlemek için bu değerle çarpılır. 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) olur.
- <icon_size>
- Her bir işaretçinin piksel cinsinden boyutu. Şu değerler desteklenir: 12, 16, 24.
- <fill_color>
- Simgenin üç veya altı basamaklı HTML onaltılık rengi olarak dolgu rengi (# işareti yoktur).
- <outline_color>
- Simgenin üç veya altı basamaklı HTML onaltılık rengi olarak dış çizgi rengi (# işareti yoktur).
- <spacing>
- Bir yığındaki her bir işaretçi arasında yerleştirileceği alan (piksel cinsinden).
- <alignment>
- Simge hizalamasını ve göreli konumu açıklayan isteğe bağlı bir dize.
Örnek
Bu örnekte ikinci bir temsili veri dizisi kullanılmaktadır. Grafikte oluşturulmaz, ancak grafiğin en altından başlayarak tüm yığınları eşit aralıklarla yerleştirmenin bir yolu olarak kullanılır.
|
chd=s1:0akAZtnkmi,AAAAAAAAAA
|
Yığma ve Renk Varyasyonu (cm_repeat_color
)
Belirli bir noktadaki veri değerine göre bir simge grubunun yüksekliğini ve 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ştirilecek olduğunu hesaplamak için kullanılan veri serisinin sıfır tabanlı dizinidir.
- <scaling_factor>
- Kaynak veri serisi değeri, 0 ile 1 arasında bir değere ölçeklenir ve ilgili noktaya kaç işaretçi yerleştirileceğini belirlemek için bu değerle çarpılır. 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) olur.
- <icon_size>
- Her bir 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ı dizinidir.
- <low_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak aralıktaki düşük renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki olası en düşük değerle ilişkilendirilir.
- <middle_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak, aralıktaki orta renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki ortadaki değerle ilişkilendirilir.
- <high_color>
- Üç veya altı basamaklı HTML onaltılık rengi olarak aralıktaki yüksek renk değeri (# işareti yoktur). Bu değer, kullanılabilir veri aralığındaki olası en yüksek değerle ilişkilendirilir.
- <outline_color>
- Simgenin üç veya altı basamaklı HTML onaltılık rengi olarak dış çizgi rengi (# işareti yoktur).
- <spacing>
- Bir yığındaki her bir işaretçi arasında yerleştirileceği alan (piksel cinsinden).
- <alignment>
- Simge hizalamasını ve göreli konumu açıklayan isteğe bağlı bir dize.
Örnek
|
chem= |