Cómo crear un mapa de imágenes del gráfico

Introducción

Los estándares HTML te permiten especificar puntos de actividad en una imagen de página web mediante un mapa de imagen. Estos hotspots se pueden usar para mostrar texto flotante o actuar como vínculos, o incluso puedes agregar administración de eventos de JavaScript para habilitar la interactividad. Por ejemplo, coloca el cursor sobre las etiquetas de barras y ejes de la siguiente imagen:

 

Estos puntos de actividad se crean con los elementos HTML <map> y <area>. La API de Chart puede mostrar todas las coordenadas necesarias para crear un mapa de puntos de actividad, como se describe a continuación.

Cómo crear un mapa para tu gráfico

Si agregas el parámetro chof=json a la URL del gráfico, recibirás una string JSON que incluye todos los datos que necesitas para crear un mapa de imágenes para el gráfico. Luego, puedes agregar vínculos a secciones específicas de tu gráfico o adjuntar funciones de JavaScript a eventos de clic para que tu gráfico sea más interactivo. Ten en cuenta que no todos los tipos de gráficos son compatibles con esta opción; consulta la documentación de gráficos específica para obtener más detalles.

La herramienta de esta página te ayudará a generar el código HTML para un mapa de imágenes. Puedes incorporar este código HTML en tu página de forma permanente o copiar nuestro código en tu página, y, luego, solicitar y generar el mapa sobre la marcha, si tu página permite que el usuario cambie el mapa en la página de forma dinámica.

A continuación, se indica cómo usar esta herramienta para generar un mapa:

  1. Obtén el resultado JSON de tu gráfico: Agrega chof=json a la URL del gráfico, navega hasta esa URL en el navegador y copia el texto que se muestra.
  2. Pega el texto JSON que copiaste en el cuadro de texto a continuación marcado como “JSON Output” y haz clic en “Make Map”.
  3. Pegue el código del mapa generado en su página
  4. Actualiza el código generado con un nombre único para tu elemento <map>.
  5. Quita los elementos del mapa que no necesites (por ejemplo, barras, secciones, etiquetas o elementos de ejes específicos).
  6. Actualiza los atributos href en los elementos <area> generados.
  7. Agrega el atributo usemap="#MAP_NAME" a tu elemento <img> y sustituye el nombre de tu mapa por MAP_NAME.

    Importante: Asegúrate de agregar el prefijo "#" al valor de usemap como prefijo. Por ejemplo: usemap="#mymap". En este caso, el nombre del mapa es “mymap” y no “#mymap”.

 

Formato de la cadena JSON

Este es el formato del JSON que se muestra cuando especificas chof=json:

  • Un objeto raíz llamado chartshape. Este objeto contiene un array de objetos, cada uno de los cuales representa un área en un mapa de imágenes del gráfico. Cada objeto tiene las siguientes propiedades:
    • nombre: Es un nombre para esta área específica. La convención de nombres general es elementtype_series#_item#. Por ejemplo: bar0_0 para un área que describe la primera barra de la primera serie o axis0_1 para un área que describe la segunda etiqueta del eje en el eje X.
    • tipo: La forma de esta área. Será uno de los siguientes valores, según el tipo de gráfico: RECT, Círculo o POLY. Esto equivale al atributo shape de la etiqueta <area>.
    • coords: Es un array numérico que describe el área; equivalente al atributo coords de la etiqueta <area>.