Creazione di una mappa immagine grafico

Introduzione

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

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

Creazione di una mappa per il 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 funzioni JavaScript agli eventi di clic per rendere il grafico più interattivo. Tieni presente che non tutti i tipi di grafico supportano questa funzionalità. Per informazioni dettagliate, consulta la documentazione specifica dei grafici.

Lo strumento in questa pagina ti aiuterà a generare il codice HTML per una mappa immagine. Puoi incorporare questo codice HTML nella tua pagina in modo permanente oppure puoi persino copiare il nostro codice nella tua pagina, quindi richiedere e generare la mappa in tempo reale, se la pagina consente all'utente di modificare la mappa sulla pagina in modo dinamico.

Ecco come utilizzare questo strumento per generare una mappa:

1. Ottieni l'output JSON per il grafico: aggiungi chof=json all'URL del grafico, vai all'URL nel browser e copia il testo restituito.
2. Incolla il testo JSON che hai copiato nella casella di testo qui sotto denominato "JSON Output" 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 tutti gli elementi della mappa non necessari (ad esempio barre, sezioni, etichette o elementi degli assi specifici).
6. Aggiorna gli attributi href negli elementi <area> generati.
7. Aggiungi l'attributo usemap="#MAP_NAME" all'elemento <img>, sostituendo il nome della mappa con MAP_NAME.

   Importante: assicurati di far precedere il valore usemap con "#". 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, ognuno dei quali rappresenta un'area in una mappa immagine del grafico. Ogni oggetto ha le seguenti proprietà:
  • nome - Il nome dell'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 asse0_1 per un'area che descrive l'etichetta del secondo asse sull'asse x.
  • type - La forma dell'area. Sarà uno dei seguenti valori, a seconda del tipo di grafico: RECT, Circle o POLY. Equivale all'attributo forma del tag <area>.
  • coords - Un array numerico che descrive l'area; equivalente all'attributo coords del tag <area>.