Giriş
HTML standartları, resim haritası kullanarak bir web sayfası resmindeki etkin noktaları belirtebilmenizi sağlar. Bu etkin noktalar, fareyle üzerine gelinen metin görüntülemek veya bağlantı olarak hareket etmek için kullanılabilir ya da etkileşimi etkinleştirmek için JavaScript etkinlik işlemesi ekleyebilirsiniz. Örneğin, farenizi aşağıdaki resimde bulunan çubuklar ve eksen etiketlerinin üzerine getirin:
Bu etkin noktalar, <map> ve <area> HTML öğeleri kullanılarak oluşturulur. Chart API, aşağıda açıklandığı gibi, bir etkin nokta haritası oluşturmak için gereken tüm koordinatları döndürebilir.
Grafiğiniz için Harita Oluşturma
Grafik URL'nize chof=json parametresini eklerseniz grafiğiniz için bir resim eşlemesi oluşturmak için ihtiyacınız olan tüm verileri içeren bir JSON dizesi alırsınız. Ardından, grafiğinizin belirli bölümlerine yönlendiren bağlantılar ekleyebilir veya tıklama etkinliklerine JavaScript işlevleri ekleyerek grafiğinizi daha etkileşimli hale getirebilirsiniz. Tüm grafik türlerinin bu özelliği desteklemediğini unutmayın. Ayrıntılı bilgi için ilgili grafik dokümanlarınıza bakın.
Bu sayfadaki araç, bir resim haritası için HTML oluşturmanıza yardımcı olur. Bu HTML'yi sayfanıza kalıcı olarak yerleştirebilir veya hatta kodumuzu sayfanıza kopyalayabilirsiniz. Sayfanız, kullanıcının sayfadaki haritayı dinamik olarak değiştirmesini sağlıyorsa haritayı anında isteyip oluşturabilirsiniz.
Bu aracı kullanarak harita oluşturabilirsiniz:
- Grafiğinizin JSON çıkışını alın: Grafik URL'nize
chof=jsonekleyin, tarayıcınızda söz konusu URL'ye gidin ve döndürülen metni kopyalayın. - "JSON Çıktısı" olarak işaretlenmiş kopyaladığınız JSON metnini aşağıdaki metin kutusuna yapıştırın ve "Harita Oluştur"u tıklayın.
- Oluşturulan harita kodunu sayfanıza yapıştırın
- Oluşturulan kodu
<map>öğeniz için benzersiz bir adla güncelleyin. - İhtiyacınız olmayan harita öğelerini kaldırın (örneğin, belirli çubuklar, dilimler, etiketler veya eksen öğeleri).
- Oluşturulan
<area>öğelerindeki href özelliklerini güncelleyin. usemap="#MAP_NAME"özelliğini<img>öğenize ekleyin ve haritanızın adınıMAP_NAMEile değiştirin.Önemli: Usemap değerinin önüne "#" eklediğinizden emin olun. Örneğin:
usemap="#mymap". Bu durumda, harita adı "#mymap" değil "mymap" olur.
JSON Dizesinin biçimi
chof=json değerini belirttiğinizde döndürülen JSON biçimi şu şekildedir:
- chartshape adlı bir kök nesnedir. Bu nesne, her biri grafiğin resim haritasındaki bir alanı temsil eden bir dizi nesne içerir. Her nesne aşağıdaki özelliklere sahiptir:
- ad: Bu alanın adı. Genel adlandırma kuralı, elementtype_series#_item# şeklindedir. Örneğin: ilk serideki ilk çubuğu açıklayan bir alan için bar0_0 veya x eksenindeki ikinci eksen etiketini açıklayan bir alan için Arrow_1 değerini kullanın.
- type: Bu alanın şekli. Grafik türüne bağlı olarak şu değerlerden biri olacaktır: RECT, CIRCLE veya POLY. Bu,
<area>etiketinin şekil özelliğine eşdeğerdir. - coords - Alanı açıklayan sayısal bir dizi;
<area>etiketinin coords özelliğine eşdeğer.