Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Uso de Highcharts Use elementos visuales de Highcharts para crear elementos visuales y tipos de gráficos personalizados que utilicen la [Biblioteca de Highcharts Core](https://www.highcharts.com/blog/products/highcharts/). [Las imágenes de Highcharts proporcionan a los autores de Quick acceso directo a la API de Highcharts.](https://api.highcharts.com/highcharts/) Para configurar una imagen de Highcharts, los autores de Quick deben añadir un esquema JSON de Highcharts a la imagen de Quick. Los autores pueden usar expresiones rápidas para hacer referencia a los campos rápidos y las opciones de formato del esquema JSON que utilizan para generar la imagen de Highcharts. El editor **Código del gráfico** JSON proporciona asistencia contextual para el autocompletado y la validación en tiempo real a fin de garantizar que los esquemas JSON de entrada estén configurados correctamente. Para mantener la seguridad, el editor visual de Highcharts no acepta la entrada de código CSS o HTML. JavaScript Para obtener más información sobre las imágenes de Highcharts en Amazon Quick, consulte la Guía [visual QuickStart de Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) en. [DemoCentral](https://democentral.learnquicksight.online/#) La siguiente imagen muestra un gráfico de pintalabios configurado en el editor JSON de **código gráfico** de una imagen de Highcharts en Quick. ![\[alt text not found\]](http://docs.aws.amazon.com/es_es/quick/latest/userguide/images/highcharts-example1.png) [Para ver más ejemplos de imágenes que puede crear con la imagen de Highcharts en Quick, consulte las demostraciones de Highcharts.](https://www.highcharts.com/demo) ## Consideraciones Antes de empezar a crear imágenes de Highcharts en Amazon Quick, revise las siguientes limitaciones que se aplican a las imágenes de Highcharts. + Los siguientes valores JSON no se admiten en el editor JSON **Código del gráfico** de Highcharts: + Funciones + Fechas + Valores indefinidos + Los enlaces a archivos GeoJSON u otras imágenes no son compatibles con los elementos visuales de Highcharts. + Los colores de campos no están disponibles para los elementos visuales de Highcharts. Los colores de temas predeterminados se aplican a todos los elementos visuales de Highcharts. ## Creación de un elemento visual de Highcharts Utilice el siguiente procedimiento para crear una imagen de Highcharts en Amazon Quick. 1. Abra la [consola Quick.](https://quicksight.aws.amazon.com/) 1. Abra el análisis rápido al que desee añadir una imagen de Highcharts. 1. En la barra de aplicaciones, elija **Agregar** y, a continuación, elija **Agregar elemento visual**. 1. En el panel **Tipos de elementos visuales**, elija el icono de elemento visual de Highcharts. Aparece un elemento visual vacío en la hoja de análisis y el panel **Propiedades** se abre a la izquierda. 1. En el panel **Propiedades**, expanda la sección **Configuración de visualización** y lleve a cabo las siguientes acciones: 1. En **Editar título**, elija el icono del pincel, ingrese el título que desee que tenga el elemento visual y, a continuación, seleccione **GUARDAR**. También puede elegir el icono con forma de globo ocular para ocultar el título. 1. (Opcional) En **Editar subtítulo**, elija el icono del pincel, ingrese el subtítulo que desee que tenga el elemento visual y, a continuación, seleccione **GUARDAR**. También puede elegir el icono con forma de globo ocular para ocultar el subtítulo. 1. (Opcional) En **Texto alternativo**, agregue el texto alternativo que desea que aparezca en el elemento visual. 1. Expanda la sección **Límite de puntos de datos**. En **Número de puntos de datos a mostrar**, ingrese el número de puntos de datos que desea que se muestren en el elemento visual. Los elementos visuales de Highcharts pueden mostrar hasta 10 000 puntos de datos. 1. Amplíe la sección **de códigos de gráficos**. 1. Ingrese un esquema JSON en el editor JSON **Código del gráfico**. El editor proporciona asistencia contextual y validación en tiempo real para garantizar que los valores JSON de entrada estén configurados correctamente. Todos los errores que Quick identifique se pueden ver en el menú desplegable **Errores**. En el siguiente ejemplo se muestra un esquema JSON que crea un gráfico de barras que muestra las ventas del año actual por sector. ``` { "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. Elija **APLICAR CÓDIGO**. Quick convierte el esquema JSON en un elemento visual que aparece en el análisis. Para hacer cambios en el elemento visual renderizado, actualice las propiedades correspondientes en el esquema JSON y elija **APLICAR CÓDIGO**. 1. (Opcional) Abra el menú desplegable **Referencia** para acceder a los enlaces de material de referencia útil de Highcharts. Cuando le satisfaga el elemento visual renderizado, cierre el panel Propiedades. Para obtener más información sobre las expresiones específicas de Quick Sight que se pueden utilizar para configurar una imagen de Highcharts, consulte[Lenguaje de expresión Amazon Quick JSON para imágenes de Highcharts](highchart-expressions.md). ## Características interactivas de Highcharts Las visualizaciones de Highchart en Amazon Quick Sight admiten acciones personalizadas, resaltados y consistencias de color de campos personalizadas, lo que le permite crear gráficos interactivos y visualmente cohesivos que se integran perfectamente con otros elementos visuales de Quick Sight. ### Acciones personalizadas Con las acciones personalizadas, puede definir comportamientos específicos para cualquier punto de datos de sus visualizaciones de Highcharts. Esta función se integra perfectamente con el marco de acción existente de Quick Sight, lo que le permite crear gráficos interactivos que responden a los clics de los usuarios. Actualmente, el sistema admite la selección de puntos de datos únicos, lo que le permite controlar con precisión las interacciones de los usuarios. Las acciones personalizadas se pueden implementar en varios tipos de gráficos, como gráficos de líneas, de barras y de barras apiladas, entre otros. Para implementar acciones personalizadas, tendrá que modificar la configuración de JSON de Highcharts. Para agregar un bloque de eventos a la configuración de su serie, especifique el evento de clic y la acción correspondiente. Por ejemplo: ``` { "series": [{ "type": "line", "data": ["getColumn", 1], "name": "value", "events": { "click": [ "triggerClick", { "rowIndex": "point.index" } ] } }] ``` Esta configuración permite realizar eventos de clic en los puntos de datos del gráfico, lo que permite a Quick Sight gestionar acciones personalizadas en función de los datos seleccionados. ### Resaltado entre elementos visuales El resaltado entre elementos visuales mejora la interactividad de los paneles al crear conexiones visuales entre los distintos gráficos. Cuando un usuario selecciona elementos en un gráfico, los elementos relacionados de otras imágenes se resaltan automáticamente, mientras que los elementos no relacionados se atenúan. Esta característica ayuda a los usuarios a identificar rápidamente las relaciones y los patrones en múltiples visualizaciones, lo que mejora la comprensión y el análisis de los datos. Para habilitar el resaltado entre elementos visuales y mantener la coherencia en el color de los campos, use la cláusula `quicksight` en la configuración de JSON de Highcharts. Esta cláusula actúa como un puente entre la representación de Highcharts y el sistema de interacción visual de Quick. A continuación se muestra un ejemplo de cómo configurarlo: ``` { "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"] }] } } ``` Esta configuración utiliza el lenguaje de expresiones JSON de Quick Sight para modificar dinámicamente propiedades visuales como la opacidad y el color en función de las interacciones del usuario y los esquemas de color predefinidos. Para escenarios más complejos, puede configurar el resaltado en función de varias condiciones. Esto permite una interactividad más matizada en sus visualizaciones. En el siguiente ejemplo se resaltan los elementos según el trimestre o el día de la 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 ], }] } } ``` ### Coherencia de color en los campos Mantener la coherencia visual en todo el panel es crucial para interpretar los datos de forma eficaz. La característica de coherencia de color en los campos garantiza que los colores asignados a dimensiones específicas persistan en todos los elementos visuales del panel. Esta coherencia ayuda a los usuarios a reconocer determinadas categorías de datos en distintos tipos de gráficos y vistas y hacer un seguimiento de estas, lo que mejora la experiencia general del usuario y la comprensión de los datos. # Lenguaje de expresión Amazon Quick JSON para imágenes de Highcharts Los elementos visuales de Highcharts aceptan la mayoría de los [valores JSON válidos](https://www.w3schools.com/js/js_json_datatypes.asp), operadores aritméticos estándar, operadores de cadenas y operadores condicionales. Los siguientes valores de JSON no son compatibles con los elementos visuales de Highcharts: + Funciones + Fechas + Valores indefinidos Los autores rápidos pueden usar el lenguaje de expresiones JSON y crear esquemas JSON para crear imágenes de Highcharts. El lenguaje de expresiones JSON se usa para vincular JSON a conjuntos de datos APIs o conjuntos de datos para permitir la población y modificación dinámicas de las estructuras JSON. Los desarrolladores también pueden usar el lenguaje de expresión JSON para inflar y transformar los datos JSON con expresiones concisas e intuitivas. Con el lenguaje de expresión JSON, las expresiones se representan como matrices, donde el primer elemento especifica la operación y los elementos siguientes son los argumentos. Por ejemplo, `["unique", [1, 2, 2]]` aplica la operación `unique` a la matriz `[1, 2, 2]` y da como resultado `[1, 2]`. Esta sintaxis basada en matrices permite expresiones flexibles que permiten transformaciones complejas en datos JSON. El lenguaje de expresión JSON admite *expresiones anidadas*. Las expresiones anidadas son expresiones que contienen otras expresiones como argumentos. Por ejemplo, `["split", ["toUpper", "hello world"], " "]` convierte primero la cadena `hello world` en mayúscula y, a continuación, la divide en una matriz de palabras, lo que da como resultado `["HELLO", "WORLD"]`. Utilice las siguientes secciones para obtener más información sobre el lenguaje de expresiones JSON para las imágenes de Highcharts en Amazon Quick. **Topics** + [Aritmética](jle-arithmetics.md) + [Operaciones de matriz](jle-arrays.md) + [Expresiones rápidas de Amazon](jle-qs-expressions.md) # Aritmética En la siguiente tabla se muestran las expresiones aritméticas que se pueden utilizar con el lenguaje de expresión JSON. | Operación | Expression | Input | Output | | --- | --- | --- | --- | | Suma | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | Resta | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | Multiplicación | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | División | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | Módulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | Potencia | ["\$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 (Raíz cuadrada) | ["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 | | Redondeo | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | Techo | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | Suelo | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | Seno | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | Coseno | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | Tangente | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # Operaciones de matriz El lenguaje de expresión JSON permite la manipulación genérica de matrices para las siguientes funciones: + `map`: aplica una función de asignación a cada elemento de una matriz y devuelve una nueva matriz con los valores transformados. Por ejemplo, `["map", [1, 2, 3], ["*", ["item"], 2]]` asigna cada elemento de la matriz `[1, 2, 3]` al multiplicarlo por 2. + `filter`: filtra una matriz en función de una condición dada y devuelve una nueva matriz que contiene solo los elementos que cumplen la condición Por ejemplo, `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` filtra la matriz `[1, 2, 3, 4, 5]` para incluir solo los números pares. + `reduce`: reduce una matriz a un valor único al aplicar una función reductora a cada elemento y acumular el resultado. Por ejemplo, `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` reduce la matriz `[1, 2, 3, 4, 5]` a la suma de sus elementos. + `get`: recupera un valor de un objeto o una matriz al especificar una clave o un índice. Por ejemplo, `["get", ["item"], "name"]` recupera el valor de la propiedad `"name"` del elemento actual. + `unique`: dada una matriz, solo devuelve elementos únicos dentro de esta matriz. Por ejemplo, `["unique", [1, 2, 2]]` devuelve `[1, 2]`. # Expresiones rápidas de Amazon Amazon Quick ofrece expresiones adicionales para mejorar la funcionalidad de las imágenes de Highcharts. Utilice las siguientes secciones para obtener más información sobre las expresiones rápidas más comunes para las imágenes de Highcharts. Para obtener más información sobre el lenguaje de expresiones JSON en Amazon Quick, consulte la [ QuickStart Guía visual de Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) en [DemoCentral](https://democentral.learnquicksight.online/#). **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` Utilice las expresiones `getColumn` para devolver valores de índices de columnas específicos. Por ejemplo, en la siguiente tabla se muestra una lista de productos junto con su categoría y precio. | Product name (Nombre del producto) | Categoría | Precio | | --- | --- | --- | | Producto A | Tecnología | 100 | | Producto B | Venta minorista | 50 | | Producto C | Venta minorista | 75 | La siguiente consulta `getColumn` genera una matriz que muestra todos los nombres de los productos junto con su precio. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` Se devuelve el siguiente JSON: ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` También puede pasar varias columnas a la vez para generar una matriz de matrices, como se muestra en el siguiente ejemplo. **Entrada** ``` { values: ["getColumn", 0, 2] } ``` **Salida** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` De forma similar a `getColumn`, se pueden usar las siguientes expresiones para devolver valores de columnas de temas o pozos de campos: + `getColumnFromGroupBy` devuelve las columnas del grupo por campo. El segundo argumento es el índice de la columna que se devolverá. Por ejemplo, `["getColumnFromGroupBy", 0]` devuelve los valores del primer campo en forma de matriz. Puede pasar varios índices para obtener una matriz de matrices en la que cada elemento corresponda al campo del grupo por pozo de campos. + `getColumnFromValue` devuelve columnas del pozo de campos de valores. Puede pasar varios índices para obtener una matriz de matrices en la que cada elemento corresponda al campo del pozo de campos de valores. + `getColorTheme`devuelve la paleta de colores actual de un tema rápido, como se muestra en el siguiente ejemplo. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **Ejemplo** ![\[alt text not found\]](http://docs.aws.amazon.com/es_es/quick/latest/userguide/images/get-column-example.png) `getColumn` puede acceder a cualquier columna de la tabla: + `["getColumn", 0]`: devuelve una matriz `[1, 2, 3, 4, 5, ...]` + `["getColumn", 1]`: devuelve una matriz `[1, 1, 1, 1, 1, ...]` + `["getColumn", 2]`: devuelve una matriz `[1674, 7425, 4371, ...]` `getColumnFromGroupBy` funciona de manera similar, pero su índice se limita a las columnas del grupo por pozo de campos: + `["getColumnFromGroupBy", 0]`: devuelve una matriz `[1, 2, 3, 4, 5, ...]` + `["getColumnFromGroupBy", 1]`: devuelve una matriz `[1, 1, 1, 1, 1, ...]` + `["getColumnFromGroupBy", 2]`: no funciona, ya que solo hay dos columnas en el grupo por pozo de campos `getColumnFromValue` funciona de manera similar, pero su índice se limita a las columnas del pozo de campos de valores: + `["getColumnFromValue", 0]`: devuelve una matriz `[1, 2, 3, 4, 5, ...]` + `["getColumnFromValue", 1]`: no funciona, ya que solo hay una columna en el pozo de campos de valores + `["getColumnFromValue", 2]`: no funciona, ya que solo hay una columna en el pozo de campos de valores ## `formatValue` Use la `formatValue` expresión para aplicar un formato rápido a los valores. Por ejemplo, la siguiente expresión formatea la etiqueta del eje x con el valor de formato especificado en el primer campo de Quick field wells. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```