Grafik Resim Haritası Oluşturma

Giriş

HTML standartları, resim haritası kullanarak web sayfası resminde etkin noktalar belirtebilmenizi sağlar. Bu sıcak noktalar, bilgi metinlerini görüntülemek veya bağlantı işlevi görmek için kullanılabilir. Hatta etkileşimi etkinleştirmek için JavaScript etkinlik işlemeyi ekleyebilirsiniz. Örneğin, farenizle aşağıdaki resmin çubuklarının ve eksen etiketlerinin üzerine gelin:

 

Bu hotspot'lar <map> ve <area> HTML öğeleri kullanılarak oluşturulur. Chart API, aşağıda açıklandığı gibi, kendisi için hotspot haritası oluşturmak için gereken tüm koordinatları döndürebilir.

Grafiğiniz İçin Harita Oluşturma

Grafik URL'nize chof=json parametresini eklerseniz grafiğiniz için bir resim haritası oluşturmak üzere 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önelik bağlantılar ekleyebilir veya grafiğinizi daha etkileşimli hale getirmek için etkinlikleri tıklamak için JavaScript işlevleri ekleyebilirsiniz. Tüm grafik türlerinin bunu desteklemediğini unutmayın. Ayrıntılar için özel grafik belgelerinize bakın.

Bu sayfadaki araç, bir resim haritası için HTML'nizi oluşturmanıza yardımcı olur. Bu HTML'yi sayfanıza kalıcı olarak yerleştirebilir veya hatta kodumuzu sayfanıza kopyalayabilir ve ardından sayfanız kullanıcının sayfadaki haritayı dinamik olarak değiştirmesine imkan veriyorsa anında haritayı talep edebilir ve oluşturabilirsiniz.

Harita oluşturmak için bu aracı şu şekilde kullanabilirsiniz:

  1. Grafiğinizin JSON çıkışını alın: Grafik URL'nize chof=json kodunu ekleyin, tarayıcınızda ilgili URL'ye göz atın ve döndürülen metni kopyalayın.
  2. Kopyaladığınız JSON metnini "JSON Çıkışı" olarak işaretlenmiş aşağıdaki metin kutusuna yapıştırın ve "Harita Oluştur"u tıklayın.
  3. Oluşturulan harita kodunu sayfanıza yapıştırın
  4. Oluşturulan kodu <map> öğeniz için benzersiz bir adla güncelleyin.
  5. İhtiyaç duymadığınız harita öğelerini (örneğin belirli çubuklar, dilimler, etiketler veya eksen öğeleri) kaldırın.
  6. Oluşturulan <area> öğelerindeki href özelliklerini güncelleyin.
  7. usemap="#MAP_NAME" özelliğini <img> öğenize ekleyin ve haritanızın adını MAP_NAME ile değiştirin.

    Önemli: Kullanım haritası değerinin önüne "#" eklediğinizden emin olun. Örneğin: usemap="#mymap". Bu durumda, harita adı "#haritam" değil, "haritam" olur.

 

JSON Dizesinin biçimi

chof=json değerini belirttiğinizde döndürülen JSON dosyasının biçimi şu şekildedir:

  • Chartshape adlı bir kök nesne. Bu nesne, her biri grafiğin resim haritasındaki bir alanı temsil eden bir nesne dizisi içerir. Her nesne aşağıdaki özelliklere sahiptir:
    • ad: Bu özel 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 aks0_1.
    • 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 shape özelliğine eşdeğerdir.
    • coords - Alanı açıklayan sayısal dizi; <area> etiketinin coords özelliğine karşılık gelir.