Uso de Highcharts - Amazon QuickSight
ConsideracionesCrear una imagen de HighchartsCaracterísticas interactivas de Highchart

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

Utilice las imágenes de Highcharts para crear tipos de gráficos y gráficos personalizados que utilicen la biblioteca principal de Highcharts. Las imágenes de Highcharts proporcionan a los QuickSight autores acceso directo a la API de Highcharts.

Para configurar una imagen de Highcharts, los QuickSight autores deben añadir un esquema JSON de Highcharts a la imagen. QuickSight Los autores pueden usar QuickSight expresiones para hacer referencia a QuickSight los campos y las opciones de formato del esquema JSON que utilizan para generar la imagen de Highcharts. El editor de código JSON Chart proporciona asistencia contextual para el autocompletado y la validación en tiempo real para 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 QuickSight, consulte la Guía visual QuickStart de Highcharts en. DemoCentral

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

Bar chart icon enclosed in curly braces with three lines of text below.

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. QuickSight

Bar chart comparing current and prior year sales across various industries, with Finance showing highest sales.

Para ver más ejemplos de imágenes que puede crear con la imagen de Highcharts QuickSight, consulte las demostraciones de Highcharts.

Consideraciones

Antes de empezar a crear imágenes de Highcharts en Amazon QuickSight, revisa las siguientes limitaciones que se aplican a las imágenes de Highcharts.

  • Los siguientes valores JSON no se admiten en el editor JSON del código Highcharts Chart:

    • Funciones

    • Fechas

    • Valores indefinidos

  • Los enlaces a archivos GeoJSON u otras imágenes no son compatibles con las imágenes de Highcharts.

  • Los colores de campo no están disponibles para las imágenes de Highcharts. Los colores del tema predeterminados se aplican a todas las imágenes de Highcharts.

Crear una imagen de Highcharts

Utilice el siguiente procedimiento para crear una imagen de Highcharts en Amazon QuickSight.

  1. Abra la consola de QuickSight .

  2. Abra el QuickSight análisis al que desee añadir una imagen de Highcharts.

  3. En la barra de aplicaciones, elija Agregar y, a continuación, elija Agregar elemento visual.

  4. En el panel de tipos visuales, elija el icono visual de Highcharts. Aparece una imagen vacía en la hoja de análisis y el panel de propiedades se abre a la izquierda.

  5. 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, introduzca el título que desee que tenga la imagen y, a continuación, seleccione GUARDAR. También puedes elegir el icono del globo ocular para ocultar el título.

    2. (Opcional) En Editar subtítulos, selecciona el icono del pincel, introduce el subtítulo que quieres que tenga la imagen y, a continuación, selecciona GUARDAR. También puedes elegir el icono del globo ocular para ocultar el subtítulo.

    3. (Opcional) En el caso del texto alternativo, añade el texto alternativo que quieras que aparezca en la imagen.

  6. Amplíe la sección Límite de puntos de datos. En Número de puntos de datos que se van a mostrar, introduzca el número de puntos de datos que desea que muestre la imagen. Las imágenes de Highcharts pueden mostrar hasta 10 000 puntos de datos.

  7. Amplíe la sección de códigos de gráficos, que se muestra en la siguiente imagen.

    JSON configuration for a Highcharts line chart with x-axis categories and series data.

  8. Introduzca un esquema JSON en el editor JSON de código gráfico. El editor proporciona asistencia contextual y validación en tiempo real para garantizar que el JSON de entrada esté configurado correctamente. Todos los errores que QuickSight identifiquen se pueden ver en el menú desplegable Errores. El siguiente ejemplo muestra un esquema JSON que crea un gráfico de pintalabios que muestra las ventas del año en curso por sector.

    {
  "xAxis": {
    "categories": ["getColumn", 0]
  },
  "yAxis": {
    "min": 0,
    "title": {
      "text": "Amount ($)"
    }
  },
  "tooltip": {
    "headerFormat": "<span style='font-size:10px'>{point.key}</span><table>",
    "pointFormat": "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>${point.y:,.0f}</b></td></tr>",
    "footerFormat": "</table>",
    "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
    }
  ]
}

  9. Selecciona APLICAR CÓDIGO. QuickSight convierte el esquema JSON en un elemento visual que aparece en el análisis. Para realizar cambios en la imagen renderizada, actualice las propiedades correspondientes en el esquema JSON y elija APPLY CODE. La siguiente imagen muestra el gráfico de pintalabios que se creó con el esquema JSON del paso anterior.

    Bar chart showing current year sales across various industries, with Finance having the highest sales.

  10. (Opcional) Abre el menú desplegable Referencia para acceder a los enlaces a material de referencia útil de Highctarts.

Cuando esté satisfecho con la imagen renderizada, cierre el panel de propiedades. Para obtener más información sobre expresiones QuickSight específicas que se pueden utilizar para configurar una imagen de Highcharts, consulte. Lenguaje de expresión Amazon QuickSight JSON para imágenes de Highcharts

Características interactivas de Highchart

Las visualizaciones de Highchart en Amazon QuickSight 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. QuickSight

Acciones personalizadas

Con las acciones personalizadas, puede definir comportamientos específicos para cualquier punto de datos de sus visualizaciones de Highchart. Esta función se integra perfectamente con QuickSight el marco de acción existente, 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 brinda un control preciso sobre las interacciones de los usuarios. Las acciones personalizadas se pueden implementar en varios tipos de gráficos, incluidos gráficos de líneas, gráficos de barras y gráficos de barras apiladas, entre otros.

Para implementar acciones personalizadas, tendrás que modificar la configuración de JSON de Highcharts. Añada un bloque de eventos a la configuración de su serie, especificando 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 habilita los eventos de clic en los puntos de datos del gráfico, lo que QuickSight permite gestionar acciones personalizadas en función de los datos seleccionados.

Resaltado multivisual

El resaltado multivisual 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 función 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 multivisual y mantener la consistencia del color de los campos, usa la quicksight cláusula en tu configuración de JSON de Highcharts. Esta cláusula actúa como un puente entre la representación de Highcharts y el sistema QuickSight de interacción visual. Este es 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 QuickSight el lenguaje de expresiones JSON 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. El siguiente ejemplo resalta 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
      ],
    }]
  }
}

Consistencia de color a nivel de campo

Mantener la coherencia visual en todo el panel de control es crucial para una interpretación eficaz de los datos. La función de coherencia de color a nivel de campo garantiza que los colores asignados a dimensiones específicas persistan en todos los elementos visuales del panel de control. Esta coherencia ayuda a los usuarios a reconocer y rastrear rápidamente determinadas categorías de datos en distintos tipos de gráficos y vistas, lo que mejora la experiencia general del usuario y la comprensión de los datos.