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. Los elementos visuales de Highcharts proporcionan a los autores de QuickSight acceso directo a la API de Highcharts.

Para configurar un elemento visual de Highcharts, los autores de QuickSight deben agregar un esquema JSON de Highcharts al elemento visual en QuickSight. Los autores pueden utilizar las expresiones de QuickSight para hacer referencia a los campos de QuickSight y a las opciones de formato del esquema JSON que utilizan para generar el elemento visual 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 de elementos visuales de Highcharts no acepta la entrada de código CSS, JavaScript o HTML.

Para obtener más información sobre los elementos visuales de Highcharts en Amazon QuickSight, consulte Highcharts Visual QuickStart Guide en DemoCentral.

En la siguiente imagen se muestra el icono de Highcharts en QuickSight.

En la siguiente imagen se muestra un gráfico de barras configurado en el editor JSON Código del gráfico de un elemento visual de Highcharts en QuickSight.

Para ver más ejemplos de elementos visuales que puede crear con el elemento visual de Highcharts en QuickSight, consulte las demostraciones de Highcharts.

Consideraciones

Antes de comenzar a crear elementos visuales de Highcharts en Amazon QuickSight, consulte las siguientes limitaciones que se aplican a los elementos visuales de Highcharts.

Creación de un elemento visual de Highcharts

Utilice el procedimiento siguiente para crear un elemento visual de Highcharts en Amazon QuickSight.

Cuando le satisfaga el elemento visual renderizado, cierre el panel Propiedades. Para obtener más información sobre las expresiones específicas de QuickSight que se pueden utilizar para configurar un elemento visual de Highcharts, consulte Lenguaje de expresión JSON de Amazon QuickSight para elementos visuales de Highcharts.

Características interactivas de Highcharts

Las visualizaciones de Highcharts de Amazon QuickSight admiten acciones personalizadas, resaltados y coherencias 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 QuickSight.

Acciones personalizadas

Con las acciones personalizadas, puede definir comportamientos específicos para cualquier punto de datos de sus visualizaciones de Highcharts. Esta característica se integra perfectamente con el marco de acción existente de QuickSight, 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 los eventos de clic en los puntos de datos del gráfico, lo que permite a QuickSight 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 puente entre la renderización de Highcharts y el sistema de interacción con elementos visuales de QuickSight. 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 QuickSight para modificar dinámicamente propiedades de elementos 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.