As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # 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](https://www.highcharts.com/blog/products/highcharts/). Os visuais do Highcharts fornecem aos autores rápidos acesso direto à API do [Highcharts](https://api.highcharts.com/highcharts/). Para configurar um visual do Highcharts, os autores do Quick precisam adicionar um esquema JSON do Highcharts ao visual no Quick. Os autores podem usar expressões rápidas para referenciar campos rápidos e opções de formatação no esquema JSON que eles usam para gerar o visual 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 Highcharts não aceita entradas de JavaScript código CSS ou HTML. Para obter mais informações sobre os recursos visuais do Highcharts no Amazon Quick, consulte o Guia [Visual QuickStart do Highcharts em](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual). [DemoCentral](https://democentral.learnquicksight.online/#) A imagem a seguir mostra um gráfico de batom configurado no editor JSON de **código gráfico** de um visual Highcharts no Quick. ![\[alt text not found\]](http://docs.aws.amazon.com/pt_br/quick/latest/userguide/images/highcharts-example1.png) Para ver mais exemplos de imagens que você pode criar com o visual Highcharts no Quick, consulte Demonstrações de [Highcharts](https://www.highcharts.com/demo). ## Considerações Antes de começar a criar imagens de Highcharts no Amazon Quick, analise as seguintes limitações que se aplicam às imagens de Highcharts. + Os seguintes valores JSON não são compatíveis com o editor JSON de **Código de gráfico** do Highcharts: + Funções + Datas + Valores indefinidos + Links para arquivos GeoJSON ou outras imagens não são compatíveis com os elementos visuais do Highcharts. + As cores dos campos não estão disponíveis para elementos visuais do Highcharts. As cores padrão do tema são aplicadas a todos os elementos visuais do Highcharts. ## Como criar um elemento visual do Highcharts Use o procedimento a seguir para criar um visual de Highcharts no Amazon Quick. 1. Abra o [console do Quick](https://quicksight.aws.amazon.com/). 1. Abra a Análise rápida à qual você deseja adicionar um visual de Highcharts. 1. Na barra do aplicativo, escolha **Adicionar** e, em seguida, escolha **Adicionar elemento visual**. 1. No painel **Tipos de elementos visuais**, escolha o ícone de elemento visual do Highcharts. Um elemento visual vazio aparece na planilha de análise e o painel **Propriedades** é aberto à esquerda. 1. No painel **Propriedades**, expanda a seção **Configurações de exibição** e execute as seguintes ações: 1. Em **Editar título**, escolha o ícone de pincel, insira o título que você deseja que o elemento visual tenha e escolha **SALVAR**. Como alternativa, escolha o ícone do globo ocular para ocultar o título. 1. (Opcional) Em **Editar subtítulo**, escolha o ícone de pincel, insira o subtítulo que você deseja que o elemento visual tenha e escolha **SALVAR**. Como alternativa, escolha o ícone do globo ocular para ocultar o subtítulo. 1. (Opcional) Em **Texto alternativo**, adicione o texto alternativo que você deseja que o elemento visual tenha. 1. Expanda a seção **Limite de pontos de dados**. Em **Número de pontos de dados a serem mostrados**, insira o número de pontos de dados que você deseja que o elemento visual mostre. Os elementos visuais do Highcharts podem mostrar até dez mil pontos de dados. 1. Expanda a seção **Código do gráfico**. 1. Insira um esquema JSON no editor JSON de **Código de gráfico**. O editor fornece assistência contextual e validação em tempo real para garantir que seu JSON de entrada esteja configurado corretamente. Todos os erros identificados pelo Quick podem ser visualizados no menu suspenso **Erros**. O exemplo abaixo mostra um esquema JSON que cria um gráfico batom que mostra as vendas do ano atual por setor. ``` { "xAxis": { "categories": ["getColumn", 0] }, "yAxis": { "min": 0, "title": { "text": "Amount ($)" } }, "tooltip": { "headerFormat": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "shared": true, "useHTML": true }, "plotOptions": { "column": { "borderWidth": 0, "grouping": false, "shadow": false } }, "series": [ { "type": "column", "name": "Current Year Sales", "color": "rgba(124,181,236,1)", "data": ["getColumn", 1], "pointPadding": 0.3, "pointPlacement": 0.0 } ] } ``` 1. Escolha **APLICAR CÓDIGO**. O Quick converte o esquema JSON em um visual que aparece na análise. Para fazer alterações no elemento visual renderizado, atualize as propriedades pertinentes no esquema JSON e escolha **APLICAR CÓDIGO**. 1. (Opcional) Abra o menu suspenso **Referência** para acessar os links para o material de referência útil do Highcharts. Quando estiver satisfeito com o elemento visual renderizado, feche o painel de propriedades. Para obter mais informações sobre expressões específicas do Quick Sight que podem ser usadas para configurar um visual de Highcharts, consulte[Linguagem de expressão Amazon Quick JSON para imagens de Highcharts](highchart-expressions.md). ## Recursos interativos do Highcharts As visualizações Highchart no Amazon Quick Sight 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 visuais do Quick Sight. ### 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 Quick Sight, permitindo que você crie 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 Quick Sight manipule 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 visual do Quick. 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 Quick Sight 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. # Linguagem de expressão Amazon Quick JSON para imagens de Highcharts Os elementos visuais do Highcharts aceitam a maioria dos [valores JSON válidos](https://www.w3schools.com/js/js_json_datatypes.asp), operadores aritméticos padrão, operadores de string e operadores condicionais. Os seguintes valores JSON não são compatíveis com elementos visuais do Highcharts: + Funções + Datas + Valores indefinidos Autores rápidos podem usar a linguagem de expressão JSON para criar esquemas JSON para um visual de gráficos altos. A linguagem de expressão JSON é usada para vincular JSON APIs ou conjuntos de dados para permitir a população dinâmica e a modificação de estruturas JSON. Os desenvolvedores também podem usar a linguagem de expressão JSON para inflar e transformar dados JSON com expressões concisas e intuitivas. Com a linguagem de expressão JSON, as expressões são representadas como matrizes, em que o primeiro elemento especifica a operação e os elementos subsequentes são os argumentos. Por exemplo, `["unique", [1, 2, 2]]` aplica a operação `unique` à matriz `[1, 2, 2]`, resultando em `[1, 2]`. Essa sintaxe baseada em matriz permite expressões flexíveis, que permitem transformações complexas em dados JSON. A linguagem de expressão JSON oferece suporte a *expressões aninhadas*. Expressões aninhadas são expressões que contêm outras expressões como argumentos. Por exemplo, `["split", ["toUpper", "hello world"], " "]` primeiro converte a string `hello world` em maiúsculas e depois a divide em uma matriz de palavras, resultando em `["HELLO", "WORLD"]`. Use as seções a seguir para saber mais sobre a linguagem de expressão JSON para imagens de Highcharts no Amazon Quick. **Topics** + [Aritmética](jle-arithmetics.md) + [Operadores de matriz](jle-arrays.md) + [Expressões Amazon Quick](jle-qs-expressions.md) # Aritmética A tabela a seguir mostra expressões aritméticas que podem ser usadas com a linguagem de expressão JSON. | Operation | Expressão | Input | Output | | --- | --- | --- | --- | | Adição | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | Subtração | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | Multiplicação | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | Divisão | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | Módulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | Exponenciação | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | Valor absoluto | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Square Root (Raiz quadrada) | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | Logaritmo (base 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | Logaritmo natural | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | Arredondamento | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | Limite inferior | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | Limite superior | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | Seno | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | Cosseno | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | Tangente | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # Operadores de matriz A linguagem de expressão JSON permite a manipulação genérica de matrizes para as seguintes funções: + `map`: aplica uma função de mapeamento a cada elemento de uma matriz e retorna uma nova matriz com os valores transformados. Por exemplo, `["map", [1, 2, 3], ["*", ["item"], 2]]` mapeia cada elemento da matriz `[1, 2, 3]` multiplicando-o por 2. + `filter`: filtra uma matriz com base em uma determinada condição e retorna uma nova matriz contendo somente os elementos que satisfazem a condição Por exemplo, `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` filtra a matriz `[1, 2, 3, 4, 5]` para incluir somente os números pares. + `reduce`: reduz uma matriz a um único valor aplicando uma função redutora a cada elemento e acumulando o resultado. Por exemplo, `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` reduz a matriz `[1, 2, 3, 4, 5]` para a soma de seus elementos. + `get`: recupera um valor de um objeto ou matriz especificando uma chave ou índice. Por exemplo, `["get", ["item"], "name"]` recupera o valor da propriedade `"name"` do item atual. + `unique`: dado uma matriz, retorna apenas itens exclusivos dentro dessa matriz. Por exemplo, `["unique", [1, 2, 2]]` exibe `[1, 2]`. # Expressões Amazon Quick O Amazon Quick oferece expressões adicionais para aprimorar a funcionalidade dos visuais do Highcharts. Use as seções a seguir para saber mais sobre expressões rápidas comuns para imagens de gráficos altos. Para obter mais informações sobre a linguagem de expressão JSON no Amazon Quick, consulte o [ QuickStart Guia Visual Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) em. [DemoCentral](https://democentral.learnquicksight.online/#) **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` Use as expressões `getColumn` para retornar valores de índices de coluna especificados. Por exemplo, a tabela a seguir mostra uma lista de produtos ao lado de sua categoria e preço. | Nome do produto | Categoria | Preço | | --- | --- | --- | | Produto A | Tecnologia | 100 | | Produto B | Varejo | 50 | | Produto C | Varejo | 75 | A consulta `getColumn` a seguir gera uma matriz que mostra todos os nomes dos produtos junto com seus preços. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` O seguinte JSON é retornado: ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` Você também pode passar várias colunas ao mesmo tempo para gerar uma matriz de matrizes, conforme mostrado no exemplo a seguir. **Entrada** ``` { values: ["getColumn", 0, 2] } ``` **Saída** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` Semelhante a `getColumn`, as expressões abaixo podem ser usadas para retornar valores de colunas de campos ou temas: + `getColumnFromGroupBy` retorna colunas do grupo por campo. O segundo argumento é o índice da coluna a ser retornado. Por exemplo, `["getColumnFromGroupBy", 0]` retorna valores do primeiro campo como uma matriz. Você pode passar vários índices para obter uma matriz de matrizes em que cada elemento corresponde ao campo no grupo por campo. + `getColumnFromValue` retorna as colunas do campo de valor. Você pode passar vários índices para obter uma matriz de matrizes em que cada elemento corresponde ao campo no campo de valor. + `getColorTheme`retorna a paleta de cores atual de um tema rápido, mostrada no exemplo a seguir. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **Exemplo** ![\[alt text not found\]](http://docs.aws.amazon.com/pt_br/quick/latest/userguide/images/get-column-example.png) `getColumn` pode acessar qualquer coluna da tabela: + `["getColumn", 0]`: retorna a matriz `[1, 2, 3, 4, 5, ...]` + `["getColumn", 1]`: retorna a matriz `[1, 1, 1, 1, 1, ...]` + `["getColumn", 2]`: retorna a matriz `[1674, 7425, 4371, ...]` `getColumnFromGroupBy` funciona de forma semelhante, mas seu índice é limitado às colunas no grupo por campo: + `["getColumnFromGroupBy", 0]`: retorna a matriz `[1, 2, 3, 4, 5, ...]` + `["getColumnFromGroupBy", 1]`: retorna a matriz `[1, 1, 1, 1, 1, ...]` + `["getColumnFromGroupBy", 2]`: não funciona, pois existem apenas duas colunas no grupo por campo `getColumnFromValue` funciona de forma semelhante, mas seu índice é limitado às colunas no campo de valor: + `["getColumnFromValue", 0]`: retorna a matriz `[1, 2, 3, 4, 5, ...]` + `["getColumnFromValue", 1]`: não funciona, pois há apenas uma coluna no campo de valor + `["getColumnFromValue", 2]`: não funciona, pois há apenas uma coluna no campo de valor ## `formatValue` Use a `formatValue` expressão para aplicar a formatação rápida aos seus valores. Por exemplo, a expressão a seguir formata o rótulo do eixo x com o valor de formato especificado no primeiro campo de poços de campo rápido. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```