Utilisation des Highcharts

Utilisez les visuels Highcharts pour créer des types de graphiques personnalisés et des visuels utilisant la bibliothèque Highcharts Core. Les visuels Highcharts fournissent aux auteurs de QuickSight un accès direct à l'API Highcharts.

Pour configurer un visuel Highcharts, les auteurs de QuickSight doivent ajouter un schéma Highcharts JSON au visuel dans QuickSight. Les auteurs peuvent utiliser les expressions QuickSight pour référencer les champs QuickSight et les options de mise en forme du schéma JSON qu'ils utilisent pour générer le visuel Highcharts. L'éditeur de code JSON Chart fournit une assistance contextuelle pour la saisie semi-automatique et la validation en temps réel afin de garantir que les schémas JSON d'entrée sont correctement configurés. Pour des raisons de sécurité, l'éditeur visuel Highcharts n'accepte pas la saisie de code CSS, JavaScript ou HTML.

Pour plus d'informations sur les visuels Highcharts dans Amazon QuickSight, consultez le guide Highcharts Visual QuickStart dans DemoCentral.

L'image suivante montre l'icône Highcharts dans QuickSight.

L'image suivante montre un graphique lipstick configuré dans l'éditeur JSON de code graphique d'un visuel Highcharts dans QuickSight.

Pour d'autres exemples de visuels que vous pouvez créer avec le visuel Highcharts dans QuickSight, consultez la section Démonstrations de Highcharts.

Considérations

Avant de commencer à créer des visuels Highcharts dans Amazon QuickSight, consultez les limites suivantes qui s'appliquent aux visuels Highcharts.

Création d'un visuel Highcharts

Utilisez la procédure suivante pour créer une représentation visuelle Highcharts dans Amazon QuickSight.

Lorsque vous êtes satisfait du rendu visuel, fermez le volet des propriétés. Pour plus d'informations sur les expressions spécifiques à QuickSight qui peuvent être utilisées pour configurer un visuel Highcharts, consultez Langage d'expression JSON Amazon QuickSight pour les visuels Highcharts.

Fonctionnalités Highchart interactives

Les visualisations Highchart d'Amazon QuickSight prennent en charge les actions personnalisées, le surlignage et la cohérence des couleurs des champs personnalisés, ce qui vous permet de créer des graphiques interactifs et visuellement cohérents qui s'intègrent parfaitement aux autres visuels QuickSight.

Actions personnalisées

Grâce aux actions personnalisées, vous pouvez définir des comportements spécifiques pour n'importe quel point de données dans vos visualisations Highchart. Cette fonctionnalité s'intègre parfaitement au cadre d'action existant de QuickSight, vous permettant de créer des graphiques interactifs qui répondent aux clics des utilisateurs. Le système prend actuellement en charge la sélection de points de données uniques, ce qui vous permet de contrôler avec précision les interactions des utilisateurs. Des actions personnalisées peuvent être mises en œuvre sur différents types de graphiques, notamment les graphiques linéaires, les graphiques à barres et les graphiques à barres empilées, entre autres.

Pour mettre en place des actions personnalisées, vous devez modifier la configuration JSON de Highcharts. Ajoutez un bloc d'événements à la configuration de votre série, en spécifiant l'événement de clic et l'action correspondante. Par exemple :

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

Cette configuration active les événements de clic sur les points de données de votre graphique, ce qui permet à QuickSight de gérer des actions personnalisées en fonction des données sélectionnées.

Surlignage transversal

Le surlignage transversal améliore l'interactivité de vos tableaux de bord en créant des liens visuels entre les différents graphiques. Lorsqu'un utilisateur sélectionne des éléments dans un graphique, les éléments connexes des autres visuels sont automatiquement surlignés, tandis que les éléments non liés sont estompés. Cette fonctionnalité aide les utilisateurs à identifier rapidement les relations et les modèles dans de multiples visualisations, améliorant ainsi la compréhension et l'analyse des données.

Pour activer le surlignage visuel transversal et maintenir la cohérence des couleurs des champs, utilisez la clause quicksight dans votre configuration Highcharts JSON. Cette clause sert de pont entre le rendu Highcharts et le système d'interaction visuelle de QuickSight. Voici un exemple de configuration :

{
  "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"]
    }]
  }
}

Cette configuration utilise le langage d'expression JSON de QuickSight pour modifier dynamiquement les propriétés visuelles telles que l'opacité et la couleur en fonction des interactions des utilisateurs et des jeux de couleurs prédéfinis.

Pour les scénarios plus complexes, vous pouvez configurer le surlignage en fonction de plusieurs conditions. Cela permet une interactivité plus nuancée dans vos visualisations. L'exemple suivant met en évidence les éléments en fonction du trimestre ou du jour de la semaine :

{
  "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
      ],
    }]
  }
}

Cohérence des couleurs au niveau du champ

Le maintien de la cohérence visuelle sur l'ensemble de votre tableau de bord est essentiel pour une interprétation efficace des données. La fonctionnalité de cohérence des couleurs au niveau des champs garantit que les couleurs attribuées à des dimensions spécifiques persistent dans tous les visuels de votre tableau de bord. Cette cohérence permet aux utilisateurs de reconnaître et de suivre rapidement des catégories de données spécifiques dans différents types de graphiques et de vues, améliorant ainsi l'expérience utilisateur globale et la compréhension des données.