Como usar Highcharts

Use os elementos visuais de Highcharts para criar tipos de gráficos e elementos visuais personalizados que usam a Biblioteca Highcharts Core. Os elementos visuais do Highcharts fornecem aos autores do QuickSight acesso direto à API do Highcharts.

Para configurar um elemento visual do Highcharts, os autores do QuickSight precisam adicionar um esquema JSON do Highcharts a ele no QuickSight. Os autores podem usar expressões do QuickSight para referenciar campos do QuickSight e opções de formatação no esquema JSON que eles usam para gerar o elemento visual do Highcharts. O editor JSON de Código de gráfico fornece assistência contextual para preenchimento automático e validação em tempo real para garantir que os esquemas JSON de entrada sejam configurados corretamente. Para manter a segurança, o editor visual do Highcharts não aceita entradas de código CSS, JavaScript ou HTML.

Para obter mais informações sobre os elementos visuais do Highcharts no Amazon QuickSight, consulte o Guia de início rápido de elementos visuais do Highcharts em DemoCentral.

A imagem a seguir mostra o ícone do Highcharts no QuickSight.

A imagem a seguir mostra um gráfico batom configurado no editor JSON de Código de gráfico de um elemento visual do Highcharts no QuickSight.

Para obter mais exemplos de elementos visuais que você pode criar com o elemento visual do Highcharts no QuickSight, consulte Highcharts Demos.

Considerações

Antes de começar a criar elementos visuais do Highcharts no Amazon QuickSight, analise as limitações a seguir que se aplicam a eles.

Como criar um elemento visual do Highcharts

Use o procedimento apresentado a seguir para criar um elemento visual do Highcharts no Amazon QuickSight.

Quando estiver satisfeito com o elemento visual renderizado, feche o painel de propriedades. Para obter mais informações sobre expressões específicas do QuickSight que podem ser usadas para configurar um elemento visual do Highcharts, consulte Linguagem de expressão JSON do Amazon QuickSight para elementos visuais do Highcharts.

Recursos interativos do Highcharts

As visualizações do Highcharts no Amazon QuickSight oferecem suporte a ações personalizadas, realces e consistências personalizadas de cores de campo, permitindo que você crie gráficos interativos e visualmente coesos que se integram perfeitamente a outros elementos visuais do QuickSight.

Ações personalizadas

Com ações personalizadas, você pode definir comportamentos específicos para qualquer ponto de dados em suas visualizações do Highcharts. Esse recurso se integra perfeitamente à estrutura de ação existente do QuickSight, permitindo criar gráficos interativos que respondem aos cliques do usuário. Atualmente, o sistema oferece suporte à seleção de um único ponto de dados, oferecendo controle preciso sobre as interações do usuário. As ações personalizadas podem ser implementadas em vários tipos de gráficos, incluindo gráficos de linhas, gráficos de barras e gráficos de barras empilhadas, entre outros.

Para implementar ações personalizadas, você precisará modificar sua configuração JSON do Highcharts. Adicione um bloco de eventos à configuração da sua série, especificando o evento de clique e a ação correspondente. Por exemplo:

{
  "series": [{
    "type": "line",
    "data": ["getColumn", 1],
    "name": "value",
    "events": {
      "click": [
        "triggerClick", { "rowIndex": "point.index" }
      ]
    }
}]

Essa configuração permite eventos de clique nos pontos de dados do seu gráfico, permitindo que o QuickSight lide com as ações personalizadas com base nos dados selecionados.

Destaque multivisual

O destaque multivisual aprimora a interatividade de seus painéis ao criar conexões visuais entre diferentes gráficos. Quando um usuário seleciona elementos em um gráfico, os elementos relacionados em outros elementos visuais são destacados automaticamente, enquanto os elementos não relacionados ficam esmaecidos. Esse recurso ajuda os usuários a identificar rapidamente as relações e os padrões em várias visualizações, melhorando a compreensão e a análise dos dados.

Para habilitar o destaque multivisual e manter a consistência da cor do campo, use a cláusula quicksight na configuração JSON do Highcharts. Essa cláusula atua como uma ponte entre a renderização do Highcharts e o sistema de interação de elementos visuais do QuickSight. Veja abaixo um exemplo de como configurá-la:

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case", 
        ["dataMarkMatch", ["getColumnName", 0], "series.name"],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
      "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"]
    }]
  }
}

Essa configuração usa a linguagem de expressão JSON do QuickSight para modificar dinamicamente propriedades visuais, como opacidade e cor, com base nas interações do usuário e nos esquemas de cores predefinidos.

Para cenários mais complexos, você pode configurar o destaque com base em várias condições. Isso permite uma interatividade mais diferenciada em suas visualizações. O exemplo a seguir destaca elementos com base no trimestre ou no dia da semana:

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case",
        ["||",
          ["dataMarkMatch", "quarter", "series.name"],
          ["dataMarkMatch", "day_of_week", "point.name"]
        ],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
    }]
  }
}

Consistência de cores no nível de campo

Manter a coerência visual em todo o painel é crucial para uma interpretação eficaz dos dados. O recurso de consistência de cores em nível de campo garante que as cores atribuídas a dimensões específicas persistam em todos os elementos visuais do seu painel. Essa consistência ajuda os usuários a reconhecer e rastrear rapidamente categorias de dados específicas em diferentes tipos e visualizações de gráficos, aprimorando a experiência geral do usuário e a compreensão dos dados.