Creazione di una mappa immagine grafico

introduzione

Gli standard HTML consentono di specificare gli hotspot sull'immagine di una pagina web utilizzando una mappa immagine. Questi punti di interesse possono essere utilizzati per visualizzare il testo del passaggio del mouse o fungere da link, oppure puoi aggiungere la gestione degli eventi JavaScript per consentire l'interattività. Ad esempio, passa il mouse sopra le barre e le etichette dell'asse della seguente immagine:

 

Queste aree di interesse vengono create utilizzando gli elementi HTML <map> e <area>. L'API Chart può restituire tutte le coordinate necessarie per creare una mappa di hotspot, come descritto di seguito.

Creazione di una mappa per il tuo grafico

Se aggiungi il parametro chof=json all'URL del grafico, riceverai una stringa JSON che include tutti i dati necessari per creare una mappa immagine per il grafico. Puoi quindi aggiungere link a sezioni specifiche del grafico o collegare le funzioni JavaScript agli eventi di clic per rendere il grafico più interattivo. Tieni presente che non tutti i tipi di grafici supportano questa funzionalità; per informazioni dettagliate, consulta la documentazione relativa ai grafici specifici.

Lo strumento in questa pagina ti aiuterà a generare il codice HTML per una mappa immagine. Puoi incorporare definitivamente questo codice HTML nella tua pagina oppure copiarlo nella pagina per poi richiedere e generare la mappa al volo, se la pagina consente all'utente di modificarla in modo dinamico.

Ecco come utilizzare questo strumento per generare una mappa:

1. Ottieni l'output JSON per il tuo grafico: aggiungi chof=json all'URL del grafico, vai a quell'URL nel browser e copia il testo restituito.
2. Incolla il testo JSON che hai copiato nella casella di testo qui sotto selezionando "Output JSON" e fai clic su "Crea mappa".
3. Incolla nella pagina il codice della mappa generato
4. Aggiorna il codice generato con un nome univoco per l'elemento <map>.
5. Rimuovi gli elementi non necessari della mappa (ad esempio barre, sezioni, etichette o elementi dell'asse specifici).
6. Aggiorna gli attributi href negli elementi <area> generati.
7. Aggiungi l'attributo usemap="#MAP_NAME" al tuo elemento <img>, sostituendo il nome della mappa con MAP_NAME.

   Importante: assicurati di anteporre il valore "#" al valore usemap. Ad esempio: usemap="#mymap". In questo caso, il nome della mappa è "mymap" e non "#mymap".

 

Formato della stringa JSON

Ecco il formato del JSON restituito quando specifichi chof=json:

• Un oggetto radice chiamato chartshape. Questo oggetto contiene un array di oggetti, ciascuno dei quali rappresenta un'area in una mappa immagine del grafico. Ogni oggetto ha le seguenti proprietà:
  • nome: un nome per questa area specifica. La convenzione di denominazione generale è elementtype_series#_item#. Ad esempio: bar0_0 per un'area che descrive la prima barra nella prima serie o axis0_1 per un'area che descrive l'etichetta del secondo asse sull'asse x.
  • type: la forma di quest'area. Il valore sarà uno dei seguenti, a seconda del tipo di grafico: RECT, Circle o POLY. Equivale all'attributo shape del tag <area>.
  • coords: una matrice numerica che descrive l'area; equivalente all'attributo coords del tag <area>.