Membuat Peta Gambar Diagram

Pengantar

Standar HTML memungkinkan Anda menentukan hot spot pada gambar halaman web menggunakan peta gambar. Hot spot ini dapat digunakan untuk menampilkan teks mengambang atau bertindak sebagai link, atau Anda bahkan dapat menambahkan penanganan peristiwa JavaScript untuk mengaktifkan interaktivitas. Misalnya, arahkan kursor ke label batang dan sumbu gambar berikut:

 

Hot spot ini dibuat menggunakan elemen HTML <map> dan <area>. Chart API dapat menampilkan semua koordinat yang diperlukan untuk membuat peta hot spot untuknya, seperti yang dijelaskan berikutnya.

Membuat Peta untuk Bagan Anda

Jika Anda menambahkan parameter chof=json ke URL diagram, Anda akan menerima kembali string JSON yang menyertakan semua data yang Anda perlukan untuk membuat peta gambar untuk diagram. Anda kemudian dapat menambahkan link ke bagian tertentu di diagram, atau melampirkan fungsi JavaScript ke peristiwa klik untuk membuat diagram Anda lebih interaktif. Perhatikan bahwa tidak semua jenis diagram mendukung ini; lihat dokumentasi diagram tertentu untuk mengetahui detailnya.

Alat pada halaman ini akan membantu Anda menghasilkan HTML untuk peta gambar. Anda dapat menyematkan HTML ini di halaman secara permanen, atau bahkan menyalin kode kami ke halaman Anda, lalu meminta dan membuat peta dengan cepat, jika halaman Anda memungkinkan pengguna mengubah peta secara dinamis.

Berikut cara menggunakan alat ini untuk membuat peta:

  1. Dapatkan output JSON untuk diagram Anda: tambahkan chof=json ke URL diagram, jelajahi URL tersebut di browser, dan salin teks yang ditampilkan.
  2. Tempel teks JSON yang Anda salin ke kotak teks di bawah yang ditandai "Output JSON", lalu klik "Buat Peta".
  3. Tempelkan kode peta yang dibuat ke halaman Anda
  4. Perbarui kode yang dihasilkan dengan nama unik untuk elemen <map> Anda.
  5. Hapus elemen peta yang tidak diperlukan (misalnya, batang, irisan, label, atau elemen sumbu tertentu).
  6. Perbarui atribut href dalam elemen <area> yang dihasilkan.
  7. Tambahkan atribut usemap="#MAP_NAME" ke elemen <img>, dengan mengganti nama peta Anda dengan MAP_NAME.

    Penting: Pastikan untuk memberikan awalan nilai usemap dengan '#'. Misalnya: usemap="#mymap". Dalam hal ini, nama peta adalah "mymap" bukan "#mymap".

 

Format String JSON

Berikut adalah format JSON yang ditampilkan saat Anda menentukan chof=json:

  • Objek root bernama chartshape. Objek ini menyimpan array objek, yang masing-masing mewakili satu area dalam peta gambar diagram. Setiap objek memiliki properti berikut:
    • name - Nama untuk area spesifik ini. Konvensi penamaan umum adalah elementtype_Series#_item#. Misalnya: bar0_0 untuk area yang mendeskripsikan batang pertama dalam deret pertama, atau axis0_1 untuk area yang mendeskripsikan label sumbu kedua pada sumbu x.
    • type - Bentuk area ini. Tipe ini akan berupa salah satu dari nilai berikut, bergantung pada jenis diagram: RECT, Circle, atau POLY. Ini setara dengan atribut shape dari tag <area>.
    • coords - Array numerik yang mendeskripsikan area; setara dengan atribut coords dari tag <area>.