Como criar um mapa de imagem para um gráfico

Introdução

Com os padrões HTML, é possível especificar pontos de acesso em uma imagem de página da Web usando um mapa de imagens. Esses pontos de acesso podem ser usados para exibir texto flutuante ou atuar como links. Também é possível adicionar processamento de eventos JavaScript para ativar a interatividade. Por exemplo, passe o mouse sobre as barras e os eixos da imagem a seguir:

 

Esses pontos de acesso são criados usando os elementos HTML <map> e <area>. A API Chart pode retornar todas as coordenadas necessárias para criar um mapa de pontos de acesso para ela, conforme descrito a seguir.

Como criar um mapa para seu gráfico

Se você adicionar o parâmetro chof=json ao URL do seu gráfico, receberá de volta uma string JSON com todos os dados necessários para criar um mapa de imagem para seu gráfico. Depois, é possível adicionar links para seções específicas do gráfico ou anexar funções JavaScript a eventos de clique para tornar o gráfico mais interativo. Nem todos os tipos de gráfico são compatíveis com essa opção. Consulte a documentação específica para mais detalhes.

A ferramenta nesta página ajuda a gerar o código HTML de um mapa de imagem. É possível incorporar esse HTML à página permanentemente ou até copiar o código na página e, em seguida, solicitar e gerar o mapa em tempo real, se a página permitir que o usuário altere o mapa dinamicamente.

Veja como usar esta ferramenta para gerar um mapa:

  1. Consiga a saída JSON do seu gráfico: adicione chof=json ao URL do seu gráfico, navegue até esse URL no navegador e copie o texto retornado.
  2. Cole o texto JSON que você copiou na caixa de texto abaixo marcada como "Saída JSON" e clique em "Criar mapa".
  3. Cole o código do mapa gerado na sua página
  4. Atualize o código gerado com um nome exclusivo para o elemento <map>.
  5. Remova os elementos do mapa desnecessários (por exemplo, barras, frações, rótulos ou elementos de eixo específicos).
  6. Atualize os atributos href nos elementos <area> gerados.
  7. Adicione o atributo usemap="#MAP_NAME" ao elemento <img>, substituindo MAP_NAME pelo nome do mapa.

    Importante:insira o prefixo "#" no valor de usemap. Por exemplo: usemap="#mymap". Neste caso, o nome do mapa é "mymap" e não "#mymap".

 

Formato da string JSON

Este é o formato do JSON retornado quando você especifica chof=json:

  • Um objeto raiz chamado chartshape. Ele contém uma matriz de objetos, cada um representando uma área no mapa de imagens do gráfico. Cada objeto tem as seguintes propriedades:
    • name: um nome para esta área específica. A convenção geral de nomenclatura é elementtype_series#_item#. Por exemplo: bar0_0 para uma área que descreve a primeira barra da primeira série, ou axis0_1 para uma área que descreve o segundo rótulo do eixo x.
    • type: o formato da área. Será um dos seguintes valores, dependendo do tipo de gráfico: RECT, Circle ou POLY. Isso é equivalente ao atributo shape da tag <area>.
    • coords: uma matriz numérica que descreve a área, equivalente ao atributo coords da tag <area>.