Como criar um mapa de imagem para um gráfico

Introdução

Os padrões HTML permitem 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 ao passar o cursor ou atuar como links, ou você pode até mesmo adicionar processamento de eventos JavaScript para permitir interatividade. Por exemplo, passe o cursor sobre as etiquetas de barras e eixos da imagem a seguir:

 

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

Como criar um mapa para seu gráfico

Se você adicionar o parâmetro chof=json ao URL do gráfico, receberá uma string JSON com todos os dados necessários para criar um mapa de imagem do gráfico. Depois, adicione links a seções específicas do gráfico ou anexe funções JavaScript para eventos de clique e deixe o gráfico mais interativo. Nem todos os tipos de gráficos aceitam isso. Consulte a documentação específica do seu gráfico para mais detalhes.

A ferramenta nesta página ajuda a gerar o código HTML de um mapa de imagem. Você pode incorporar esse HTML à sua página permanentemente ou copiar o código para ela e, em seguida, solicitar e gerar o mapa em tempo real, se a página permitir que o usuário faça alterações dinâmicas.

Veja como usar esta ferramenta para gerar um mapa:

  1. Consiga a saída JSON do gráfico: adicione chof=json ao URL do 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 de mapa gerado na sua página.
  4. Atualize o código gerado com um nome exclusivo para o elemento <map>.
  5. Remova todos os elementos do mapa desnecessários (por exemplo, barras, fatias, rótulos ou elementos dos eixos 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:adicione "#" antes do valor usemap como prefixo. Por exemplo: usemap="#mymap". Nesse 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. Esse objeto contém uma matriz de objetos, cada um representando uma área do mapa de imagens do gráfico. Cada objeto tem as seguintes propriedades:
    • name: um nome para a área específica. A convenção de nomenclatura geral é 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: a forma 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>.