Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # 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](https://www.highcharts.com/blog/products/highcharts/). Les visuels Highcharts fournissent aux auteurs de Quick un accès direct à l'API [Highcharts](https://api.highcharts.com/highcharts/). Pour configurer un visuel Highcharts, les auteurs de Quick doivent ajouter un schéma Highcharts JSON au visuel dans Quick. Les auteurs peuvent utiliser des expressions rapides pour référencer les champs rapides 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 ou HTML. JavaScript Pour plus d'informations sur les visuels de Highcharts dans Amazon Quick, consultez le guide [visuel QuickStart de Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) dans. [DemoCentral](https://democentral.learnquicksight.online/#) L'image suivante montre un graphique à lèvres configuré dans l'éditeur JSON de **code graphique** d'un visuel Highcharts dans Quick. ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/quick/latest/userguide/images/highcharts-example1.png) Pour plus d'exemples de visuels que vous pouvez créer avec le visuel Highcharts dans Quick, consultez la section Démos de [Highcharts](https://www.highcharts.com/demo). ## Considérations Avant de commencer à créer des visuels Highcharts dans Amazon Quick, consultez les limites suivantes qui s'appliquent aux visuels Highcharts. + Les valeurs JSON suivantes ne sont pas prises en charge dans l’éditeur JSON de **code Highcharts Chart :** + Fonctions + Dates + Valeurs non définies + Les liens vers des fichiers GeoJSON ou d’autres images ne sont pas pris en charge pour les visuels Highcharts. + Les couleurs des champs ne sont pas disponibles pour les visuels Highcharts. Les couleurs du thème par défaut sont appliquées à tous les visuels de Highcharts. ## Création d’un visuel Highcharts Utilisez la procédure suivante pour créer un visuel Highcharts dans Amazon Quick. 1. Ouvrez la [console Quick](https://quicksight.aws.amazon.com/). 1. Ouvrez l'analyse rapide à laquelle vous souhaitez ajouter un visuel Highcharts. 1. Sur la barre d’application, sélectionnez **Ajouter**, puis **Ajouter une représentation visuelle**. 1. Dans le volet **Visual types (Types de représentations visuelles)**, choisissez l’icône Highcharts. Un visuel vide apparaît sur la feuille d’analyse et le volet **Propriétés** s’ouvre sur la gauche. 1. Dans le volet **Propriétés**, développez la section **Paramètres d’affichage** et effectuez les actions suivantes : 1. Pour **Modifier le titre**, choisissez l’icône représentant un pinceau, entrez le titre que vous souhaitez attribuer au visuel, puis sélectionnez **ENREGISTRER**. Vous pouvez également choisir l’icône en forme de globe oculaire pour masquer le titre. 1. (Facultatif) Pour **Modifier le sous-titre**, choisissez l’icône représentant un pinceau, entrez le sous-titre que vous souhaitez attribuer au visuel, puis sélectionnez **ENREGISTRER.** Vous pouvez également choisir l’icône en forme de globe oculaire pour masquer le sous-titre. 1. (Facultatif) Pour **le texte alternatif**, ajoutez le texte alternatif que vous souhaitez inclure dans le visuel. 1. Développez la section **Limite de points de données**. Pour **Nombre de points de données à afficher**, entrez le nombre de points de données que vous souhaitez afficher dans le représentation visuelle. Les images Highcharts peuvent afficher jusqu’à 10 000 points de données. 1. Développez la section **Code graphique**. 1. Entrez un schéma JSON dans l’éditeur JSON de **code graphique**. L’éditeur fournit une assistance contextuelle et une validation en temps réel pour garantir que le JSON d’entrée est correctement configuré. Toutes les erreurs identifiées par Quick peuvent être consultées dans le menu déroulant **Erreurs**. L’exemple ci-dessous montre un schéma JSON qui crée un graphique lipstick indiquant les ventes de l’année en cours par secteur d’activité. ``` { "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. Choisissez **APPLIQUER LE CODE**. Quick convertit le schéma JSON en un élément visuel qui apparaît dans l'analyse. Pour apporter des modifications au visuel rendu, mettez à jour les propriétés appropriées dans le schéma JSON et choisissez **APPLIQUER LE CODE**. 1. (Facultatif) Ouvrez le menu déroulant **Référence** pour accéder à des liens vers des documents de référence Highctarts utiles. Lorsque vous êtes satisfait du rendu visuel, fermez le volet des propriétés. Pour plus d'informations sur les expressions spécifiques à Quick Sight qui peuvent être utilisées pour configurer un visuel Highcharts, consultez[Langage d'expression Amazon Quick JSON pour les visuels Highcharts](highchart-expressions.md). ## Fonctionnalités Highchart interactives Les visualisations Highchart d'Amazon Quick Sight 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 de Quick Sight. ### 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 Quick Sight, 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 à Quick Sight 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 Quick. 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 Quick Sight 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. # Langage d'expression Amazon Quick JSON pour les visuels Highcharts Les graphiques Highcharts acceptent la plupart des [valeurs JSON valides](https://www.w3schools.com/js/js_json_datatypes.asp), des opérateurs arithmétiques standard, des opérateurs de chaîne et des opérateurs conditionnels. Les valeurs JSON suivantes ne sont pas prises en charge pour les représentations visuelles Highcharts : + Fonctions + Dates + Valeurs non définies Les auteurs rapides peuvent utiliser le langage d'expression JSON pour créer des schémas JSON pour un visuel Highcharts. Le langage d'expression JSON est utilisé pour lier du JSON à APIs des ensembles de données afin de permettre une population dynamique et une modification des structures JSON. Les développeurs peuvent également utiliser le langage d’expression JSON pour gonfler et transformer les données JSON avec des expressions concises et intuitives. Avec le langage d’expression JSON, les expressions sont représentées sous forme de tableaux, où le premier élément indique l’opération et les éléments suivants sont les arguments. Par exemple, `["unique", [1, 2, 2]]` applique l’opération `unique` au tableau `[1, 2, 2]`, ce qui donne `[1, 2]`. Cette syntaxe basée sur des tableaux permet des expressions flexibles, qui permettent des transformations complexes sur les données JSON. Le langage d’expression JSON prend en charge les *expressions imbriquées*. Les expressions imbriquées sont des expressions qui contiennent d’autres expressions en tant qu’arguments. Par exemple, `["split", ["toUpper", "hello world"], " "]` convertit d’abord la chaîne `hello world` en majuscules, puis la divise en un tableau de mots, ce qui donne `["HELLO", "WORLD"]`. Consultez les sections suivantes pour en savoir plus sur le langage d'expression JSON pour les visuels Highcharts dans Amazon Quick. **Topics** + [Arithmétique](jle-arithmetics.md) + [Opérations sur les tableaux](jle-arrays.md) + [Expressions Amazon Quick](jle-qs-expressions.md) # Arithmétique Le tableau suivant présente les expressions arithmétiques qui peuvent être utilisées avec le langage d’expression JSON. | Opération | Expression | Input | Output | | --- | --- | --- | --- | | Addition | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | Soustraction | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | Multiplication | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | Division | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | Modulo | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | Puissance | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | Valeur absolue | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Square Root (Racine carrée) | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | Logarithme (base 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | Logarithme naturel | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | Round | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | Floor | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | Ceiling | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | Sinusoïdal | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | Cosinus | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | Tangente | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # Opérations sur les tableaux Le langage d’expression JSON permet la manipulation de tableaux génériques pour les fonctions suivantes : + `map` : Applique une fonction de mappage à chaque élément d’un tableau et renvoie un nouveau tableau avec les valeurs transformées. Par exemple, `["map", [1, 2, 3], ["*", ["item"], 2]]` mappe chaque élément du tableau `[1, 2, 3]` en le multipliant par 2. + `filter`— Filtre un tableau en fonction d’une condition donnée et renvoie un nouveau tableau contenant uniquement les éléments qui satisfont à la condition Par exemple, `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]` filtre le tableau `[1, 2, 3, 4, 5]` pour n’inclure que les nombres pairs. + `reduce`— Réduit un tableau à une valeur unique en appliquant une fonction de réduction à chaque élément et en accumulant le résultat. Par exemple, `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]` réduit le tableau `[1, 2, 3, 4, 5]` à la somme de ses éléments. + `get`— Récupère une valeur d’un objet ou d’un tableau en spécifiant une clé ou un index. Par exemple, `["get", ["item"], "name"]` extrait la valeur de la propriété `"name"` à partir de l’élément actuel. + `unique`— Étant donné qu’un tableau renvoie uniquement des éléments uniques à l’intérieur de ce tableau. Par exemple, `["unique", [1, 2, 2]]` renvoie `[1, 2]`. # Expressions Amazon Quick Amazon Quick propose des expressions supplémentaires pour améliorer les fonctionnalités des visuels Highcharts. Consultez les sections suivantes pour en savoir plus sur les expressions rapides courantes pour les graphiques surlignés. Pour plus d'informations sur le langage d'expression JSON dans Amazon Quick, consultez le [ QuickStart guide visuel Highcharts](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) dans [DemoCentral](https://democentral.learnquicksight.online/#). **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` Utilisez les expressions `getColumn` pour renvoyer des valeurs à partir d’indices de colonne spécifiés. Par exemple, le tableau suivant présente une liste de produits ainsi que leur catégorie et leur prix. | Nom du produit | Catégorie | Price | | --- | --- | --- | | Produit A | Technologie | 100 | | Produit B | Vente au détail | 50 | | Produit C | Vente au détail | 75 | La requête `getColumn` suivante génère un tableau qui affiche tous les noms de produits ainsi que leur prix. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` Le code JSON suivant est renvoyé : ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` Vous pouvez également transmettre plusieurs colonnes à la fois pour générer une matrice de tableaux, comme indiqué dans l’exemple suivant. **Entrée** ``` { values: ["getColumn", 0, 2] } ``` **Sortie** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` Tout comme `getColumn`, les expressions suivantes peuvent être utilisées pour renvoyer des valeurs de colonne à partir de puits de champs ou de thèmes : + `getColumnFromGroupBy` renvoie les colonnes du groupe par champ. Le deuxième argument est l’indice de la colonne à renvoyer. Par exemple, `["getColumnFromGroupBy", 0]` renvoie les valeurs du premier champ sous forme de tableau. Vous pouvez transmettre plusieurs indices pour obtenir un tableau de tableaux où chaque élément correspond au champ du puits champ par champ. + `getColumnFromValue` renvoie bien les colonnes du champ de valeur. Vous pouvez transmettre plusieurs indices pour obtenir un tableau de tableaux où chaque élément correspond bien au champ du champ de valeurs. + `getColorTheme`renvoie la palette de couleurs actuelle d'un thème Quick, comme illustré dans l'exemple suivant. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **Exemple** ![\[alt text not found\]](http://docs.aws.amazon.com/fr_fr/quick/latest/userguide/images/get-column-example.png) `getColumn` peut accéder à n’importe quelle colonne du tableau : + `["getColumn", 0]`- renvoie un tableau `[1, 2, 3, 4, 5, ...]` + `["getColumn", 1]`- renvoie un tableau `[1, 1, 1, 1, 1, ...]` + `["getColumn", 2]`- renvoie un tableau `[1674, 7425, 4371, ...]` `getColumnFromGroupBy` fonctionne de la même manière, mais son index est limité aux colonnes du groupe par champ, eh bien : + `["getColumnFromGroupBy", 0]`- renvoie un tableau `[1, 2, 3, 4, 5, ...]` + `["getColumnFromGroupBy", 1]`- renvoie un tableau `[1, 1, 1, 1, 1, ...]` + `["getColumnFromGroupBy", 2]`- ne fonctionne pas, car il n’y a que deux colonnes dans le puits « grouper par champ » `getColumnFromValue` fonctionne de la même manière, mais son index est bien limité aux colonnes du champ de valeur : + `["getColumnFromValue", 0]`- renvoie un tableau `[1, 2, 3, 4, 5, ...]` + `["getColumnFromValue", 1]`- ne fonctionne pas, car il n’y a qu’une seule colonne dans le champ de valeur + `["getColumnFromValue", 2]`- ne fonctionne pas, car il n’y a qu’une seule colonne dans le champ de valeur ## `formatValue` Utilisez l'`formatValue`expression pour appliquer une mise en forme rapide à vos valeurs. Par exemple, l'expression suivante met en forme l'étiquette de l'axe X avec la valeur de format spécifiée dans le premier champ de Quick field wells. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```