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

Introducción

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

 

Estos hotspots se crean usando los elementos HTML <map> y <area>. La API de Chart puede mostrar todas las coordenadas necesarias para crear un mapa de hotspots, 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 de tu gráfico, recibirás una cadena JSON que incluye todos los datos que necesitas a fin de crear un mapa de imágenes para tu 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 el gráfico sea más interactivo. Ten en cuenta que no todos los tipos de gráficos admiten esto; consulta la documentación específica de tu gráfico para obtener más detalles.

La herramienta de esta página te ayudará a generar el HTML para un mapa de imágenes. Puedes incorporar este HTML en tu página de manera permanente o incluso 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 de forma dinámica.

A continuación, te indicamos 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 a esa URL en tu 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 “Salida de JSON” y haz clic en “Make Map”.
  3. Pega el código de mapa generado en tu 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, porciones, etiquetas o elementos de ejes específicos).
  6. Actualiza los atributos href en los elementos <area> generados.
  7. Agrega el atributo usemap="#MAP_NAME" al elemento <img> y reemplaza el nombre del mapa por MAP_NAME.

    Importante: Asegúrate de agregar el prefijo "'#'" al valor de usemap. Por ejemplo: usemap="#mymap". En este caso, el nombre del mapa es "mymap", 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 el mapa de imágenes del gráfico. Cada objeto tiene las siguientes propiedades:
    • nombre: 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 eje0_1 para un área que describe la segunda etiqueta del eje en el eje x.
    • tipo: Es 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>.