Personnaliser les visuels du tableau de bord Azure Data Explorer

Les tableaux de bord Azure Data Explorer sont une collection de vignettes qui présentent une représentation visuelle prise en charge par une requête Langage de requête Kusto (KQL) sous-jacente. Cet article explique comment modifier les visualisations et les requêtes d’une vignette de tableau de bord. Il fournit également une vue d’ensemble des propriétés de personnalisation spécifiques à chaque type de visualisation.

Toutes les visualisations que vous créez dans le contexte de l’opérateur de rendu sont disponibles dans les visualisations de tableau de bord. En plus de ces visualisations, vous pouvez utiliser certains visuels spécifiques au tableau de bord.

Prérequis

Passez en revue les visualisations de données avec les tableaux de bord Azure Data Explorer.

Personnaliser les visuels

Pour apporter des modifications à votre tableau de bord :

  1. Dans le menu supérieur, sélectionnez Affichage et basculez sur le mode Édition.

    Capture d’écran de l’entrée en mode édition dans les tableaux de bord dans l’interface utilisateur web d’Azure Data Explorer.

  2. Sur la vignette que vous souhaitez personnaliser, sélectionnez l’icône Modifier . Modifiez la requête sous-jacente ou les propriétés de visualisation.

    Capture d’écran montrant comment modifier une vignette dans des tableaux de bord dans l’interface utilisateur web d’Azure Data Explorer.

  3. Dans la barre d’outils supérieure, sélectionnez Appliquer les modifications pour enregistrer vos modifications et revenir au tableau de bord.

    Capture d’écran montrant comment enregistrer les modifications apportées à votre vignette de tableau de bord dans l’interface utilisateur web d’Azure Data Explorer.

Définir les propriétés de personnalisation

Le tableau suivant décrit les propriétés de personnalisation disponibles, classées par ordre alphabétique de section, et spécifie les visuels qui prennent en charge la propriété donnée.

Section Propriété Descriptif Types d’éléments visuels
Couleurs Palette de couleurs Détermine l’ensemble de couleurs à utiliser pour le carte thermique. Carte thermique
Mise en forme conditionnelle Afficher ou Masquer Option bascule pour désactiver ou activer la mise en forme conditionnelle. Pour plus d’informations, consultez Appliquer la mise en forme conditionnelle. Graphique d’anomalie, graphique de zone, graphique à barres, graphique à colonnes, KPI, multi-statistiques, graphique de dispersion, tableau, graphique temporel
Données Colonnes Y Colonnes qui fournissent des données pour l’axe vertical. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, nuage de points, graphique temporel
Colonne X Colonne qui fournit des données pour l’axe horizontal. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, nuage de points, graphique temporel
Colonnes de Séries Colonnes utilisées pour catégoriser les données en différentes séries. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, nuage de points, graphique temporel
Colonne Catégorie Colonne qui détermine les catégories de données. Graphique en entonnoir, carte thermique, graphique à secteurs
Colonne d'étiquette Affecte des étiquettes à chaque emplacement à l’aide de la colonne désignée. Statistiques multiples
Colonne de valeur Colonne qui fournit des données pour la visualisation. Graphique en entonnoir, KPI, statistiques multiples
Valeur Colonne numérique qui sert de variable primaire pour la carte thermique. Carte thermique
Colonne numérique Colonne qui fournit la valeur numérique de la catégorie de données. Graphique à secteurs
Définir l’emplacement par Détermine la méthode utilisée pour définir l’emplacement : Déduire, Latitude et longitude ou Point géographique. Carte
Couleurs des séries de données Palette de couleurs Personnalise les couleurs présentées dans la visualisation. Graphique d'anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, graphique à secteurs, nuage de points, graphique temporel, graphique de série chronologique
Options d’affichage Trier par Comment classer les résultats dans le graphique : Nom, Taille ou Aucun. Graphique à secteurs
Top N Option permettant d’afficher uniquement les sections des n premières valeurs du graphique. Graphique à secteurs
Général Orientation de l’affichage Détermine l’orientation de l’affichage : Horizontal ou Vertical. Statistiques multiples
Taille du texte Détermine la taille du texte : Recommandé, Petit ou Grand. Statistiques multiples, Stat
Format visuel Détermine le format du graphique. Pour les graphiques en aires, les graphiques à barres et les histogrammes, le format peut être standard, empilé ou empilé 100 %. Pour les graphiques à secteurs, le format peut être secteur ou anneau. Graphique en aires, graphique à barres, histogramme, graphique à secteurs
Disposition Configurations d’emplacement Personnalise le layout de grille avec des options allant de 1 colonne par 1 ligne (1 emplacement) à 5 colonnes par 5 lignes (25 emplacements). Statistiques multiples
Légende Afficher ou Masquer Masque ou affiche une légende permettant d'expliquer les séries de données dans le graphique. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Taille Afficher ou Masquer Active ou désactive le redimensionnement des points de carte. Carte
Colonne de taille Colonne utilisée pour déterminer la taille du point de carte. Carte
URL Appliquer le lien sur la colonne Lorsque cette option est activée, la sélection d’une valeur dans cette colonne dirige vers l’URL spécifiée dans la colonne URL. Tableau
Colonne URL Colonne qui contient des valeurs d’URL. Tableau
Axe X Étiquette Définit une étiquette personnalisée pour l’axe horizontal. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Valeur de ligne verticale Spécifie une valeur sur l’axe horizontal pour les lignes de référence verticale. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Échelle de l’axe X Ajuste l’échelle de l’axe horizontal en linéaire ou logarithmique. Graphique d’anomalies, graphique en aires, histogramme, multi-statistiques, diagramme de dispersion, tableau, graphique chronologique
Axe des Y Étiquette Définit une étiquette personnalisée pour l’axe vertical. Graphique d’anomalies, graphique en aires, graphique à barres, histogramme, Multi Stat, nuage de points, graphique temporel
Valeur maximale Définit la valeur maximale sur l’axe vertical. Graphique d’anomalie, graphique d’aires, graphique à barres, tableau de colonnes, KPI, multi-statistiques, diagramme de dispersion, graphique temporel
Valeur minimale Définit la valeur minimale sur l’axe vertical. Graphique d’anomalie, graphique d’aires, graphique à barres, tableau de colonnes, KPI, multi-statistiques, diagramme de dispersion, graphique temporel
Lignes de référence Marque une valeur sur le graphique comme ligne de référence pour une orientation visuelle. Graphique d’anomalie, graphique d’aires, graphique à barres, tableau de colonnes, KPI, multi-statistiques, diagramme de dispersion, graphique temporel

Couleurs des séries de données

Les couleurs des séries de données vous permettent de contrôler directement la façon dont les couleurs sont appliquées à vos visuels. Au lieu de s’appuyer sur des attributions automatiques de couleurs, attribuez des couleurs spécifiques à chaque série de données pour transmettre la signification et maintenir la cohérence entre vos tableaux de bord.

En utilisant des couleurs de série de données, vous pouvez :

  • Affectez des couleurs directement à chaque série de données.

  • Remplacez les valeurs par défaut du système par des choix intentionnels.

  • Maintenir la cohérence des couleurs entre les visuels et les tableaux de bord.

Cette fonctionnalité est prise en charge pour les types visuels suivants : graphique d’anomalies, graphique en aires, graphique à barres, histogramme, graphique en courbes, graphique en secteurs, graphique en nuages de points et graphique chronologique.

Pour configurer les couleurs des séries de données :

  1. Dans le menu supérieur, sélectionnez Affichage et basculez sur le mode Édition.

  2. Dans la vignette que vous souhaitez personnaliser, sélectionnez l’icône Modifier .

  3. Dans l’onglet Visuel du volet mise en forme, développez la section Couleurs de la série de données .

  4. Sélectionnez une couleur pour chaque série de données dans votre visuel.

  5. Sélectionnez Appliquer les modifications pour enregistrer vos paramètres.

Capture d’écran du tableau de bord montrant la configuration des couleurs de la série de données dans le volet visuel.

Lorsque vous attribuez des couleurs intentionnellement, les visionneuses peuvent interpréter des visuels en un clin d’œil sans avoir à lire des légendes ou des étiquettes. Envisagez d’utiliser des couleurs qui s’alignent sur les normes de votre organisation ou qui transmettent naturellement la signification de chaque série, comme le rouge pour les états critiques ou le vert pour les métriques saines.

Visuel de série temporelle (préversion)

Utilisez le visuel de série chronologique pour afficher des données temporelles selon plusieurs mesures et catégories. Il trace les valeurs numériques au fil du temps, ce qui facilite l’identification des tendances, des modèles et des anomalies.

Créer un visuel de série chronologique

Important

Vérifiez que vos données incluent une colonne d’horodatage et au moins une colonne de valeur numérique pour visualiser les tendances au fil du temps.

Pour créer et configurer un visuel de série chronologique dans votre tableau de bord Azure Data Explorer :

  1. Dans le menu supérieur, sélectionnez Affichage et basculez sur le mode Édition.

  2. Sélectionnez l’icône Modifier sur le visuel que vous souhaitez personnaliser.

  3. Dans le volet Mise en forme visuelle , ouvrez le type visuel et sélectionnez Série chronologique.

    Capture d’écran du volet Visualisation montrant l’option Série chronologique.

  4. Dans la section Données , configurez les propriétés suivantes :

    • Colonne de temps (axe X) : sélectionnez la colonne d’horodatage qui représente les intervalles de temps sur l’axe horizontal.

    • Données mesurées (axe Y) : sélectionnez un ou plusieurs champs numériques à tracer au fil du temps sur l’axe vertical.

    • Entités et mesures (facultatif) : sélectionnez des champs catégoriels pour regrouper vos données en plusieurs séries.

    Capture d’écran du volet de configuration de série chronologique.

  5. Personnalisez davantage votre graphique en configurant des propriétés telles que :

    • Mise à l’échelle de l’axe Y :

      • Global (échelle partagée entre les graphiques)
      • Séparé (échelles indépendantes pour chaque graphique)
      • Adaptatif (réduit l’impact des valeurs hors norme)
    • Couleurs: Affectez des couleurs à partir d’une palette ou d’une série.

    • Échelle de l’axe : Basculer entre l’échelle linéaire et logarithmique pour différentes distributions de données.

    • Comportement de zoom : Activez le panoramique et le zoom pour l’exploration interactive.

  6. Sélectionnez Terminé pour enregistrer vos paramètres et revenir au tableau de bord.

  7. Dans le visuel du tableau de bord, vous pouvez interagir avec le visuel de série temporelle pour explorer vos données :

    • Utilisez le panneau Entités et mesures pour contrôler les données qui s’affichent :

      • Recherchez une série spécifique par nom.
      • Développez ou réduisez les groupes dans la hiérarchie d’entités.
      • Cochez ou désactivez les cases à cocher pour afficher ou masquer la série.
      • Réorganiser la série pour contrôler l’affichage et l’ordre de légende.

      Cette sélection ne modifie pas la requête sous-jacente.

    • Ajustez l’intervalle de temps à l’aide des contrôles de chronologie :

      • Faites glisser le curseur de temps pour effectuer un zoom avant ou arrière sur des intervalles spécifiques.
      • Entrez les heures de début et de fin pour définir une plage précise.

      Lorsque plusieurs mesures sont affichées, tous les graphiques restent synchronisés avec l’intervalle de temps sélectionné.

      Capture d’écran des contrôles de chronologie dans un graphique de série chronologique.

Visualisation des KPI

Une tuile KPI affiche une seule valeur numérique basée sur une requête comme indicateur visuel. Cela vous aide à évaluer rapidement l’état de santé ou l’état d’un indicateur. Utilisez des tuiles KPI pour surveiller des situations où vous devez répondre à des questions telles que : « Cette valeur est-elle saine ou problématique ? » « Est-ce au-dessus ou en dessous d’un objectif de base ? »

Modes d’affichage

Les tuiles KPI prennent en charge quatre modes d’affichage :

Mode Descriptif Idéal pour
Jauge Un arc de 180° avec une aiguille pointant vers la valeur actuelle Tableaux de bord de surveillance classiques
Bar Une barre horizontale remplie pour refléter la valeur actuelle Dispositions horizontales compactes
Donut Un anneau de progression complet à 360° Dispositions de vignettes carrées
Nombre Un grand nombre formaté avec une couleur seuil Tableaux de bord denses

Ajoutez une tuile KPI

  1. Dans votre tableau de bord, passez en mode édition .

  2. Dans la barre de menu du haut, sélectionnez Ajouter un visuel puis sélectionnez KPI.

  3. Configurez les paramètres des KPI :

    • Type visuel : Choisissez entre Barre, Donut, Jauge et Numéro.
    • Données : Sélectionnez le champ numérique de votre requête pour l’afficher.
    • Format de valeur : Choisissez Auto, décimales, séparateur de mille ou notation compacte (par exemple, 1,2K).
    • Mise en forme conditionnelle : Fixez des seuils pour définir les plages saines, d’avertissement et critiques pour vos KPI. Vous pouvez aussi choisir si des valeurs plus élevées ou plus basses sont considérées comme pires.
    • Ligne de référence : Optionnellement, ajoutez une ligne de référence de référence pour indiquer une valeur cible ou attendue.
  4. Sélectionnez Terminé pour ajouter la tuile au tableau de bord.

  5. Sélectionnez le bouton Enregistrer pour sauvegarder le tableau de bord.

Tip

Utilisez Copilot pour créer et configurer des tuiles KPI à partir du langage naturel. Par exemple, essayez des invites comme « Afficher l’utilisation du CPU comme un indicateur avec des seuils à 70 et 90 » ou « Créez un KPI pour le taux d’erreur avec une base de 5%».

États de seuil des KPI

Les tuiles KPI affichent l’un des trois états seuils basés sur la valeur actuelle et votre configuration de seuil :

State Couleur par défaut Descriptif
Bien  Vert La valeur se situe dans la plage normale.
Warning  Jaune La valeur approche d’un niveau critique.
Essentiel 🔴 Rouge La valeur se situe dans la plage problématique.

Vous pouvez configurer la direction du seuil. Définissez Plus élevé = pire pour des métriques telles que le taux d’erreur ou la latence, ou Plus faible = pire pour des métriques telles que le débit ou la disponibilité. Pour garantir l’accessibilité, les états de seuil utilisent également des motifs de remplissage (rayures ou points) en plus de la couleur, afin de pouvoir être distingués par les utilisateurs daltoniens.

Détection des changements de KPI

Les tuiles KPI utilisent des mises à jour pilotées par les événements plutôt qu’une interrogation périodique. Lorsque la source de données reçoit de nouvelles données, la valeur du KPI se met à jour automatiquement avec une animation de transition fluide de 300 ms. Si de nouvelles données ne sont pas reçues dans les 60 secondes (configurables dans les paramètres de la tuile), une superposition de données obsolète s’affiche avec l’horodatage de la dernière mise à jour.

Dimensionnement adaptatif

Les tuiles KPI adaptent leur disposition en fonction de la taille des tuiles :

Taille de la vignette Éléments rendus
Petit (2×2 à 3×3) Valeur et couleur du seuil uniquement.
Moyenne (4×4 à 6×6) Valor, étiquette, unité, couleur seuil et marqueur de base.
Grand format (7×7 et plus) Rendu complet avec bandes de seuil, graduations et étiquettes d’échelle.

Incorporer des images

Vous pouvez incorporer des images dans vos vignettes de tableau de bord à l’aide du texte Markdown.

Pour plus d’informations sur GitHub Flavored Markdown, consultez Spécifications de GitHub Flavored Markdown.

  1. Ouvrez un tableau de bord.

  2. Dans le menu supérieur, sélectionnez + Ajouter> dutexte pour ouvrir une vignette de texte.

    Capture d’écran du ruban du tableau de bord montrant le menu déroulant du bouton Ajouter.

  3. Dans le volet de requête, collez l’URL d’une image située dans un service d’hébergement d’images à l’aide de la syntaxe suivante :

    ![](URL)
    

    L’image s’affiche dans l’aperçu de la vignette.

    Capture d’écran du volet de requête du tableau de bord montrant la syntaxe de l’image dans le texte markdown.

  4. Dans le menu supérieur, sélectionnez Appliquer les modifications pour enregistrer la vignette.

    Capture d’écran du volet de requête du tableau de bord montrant l’image rendue.

Pour plus d’informations sur la syntaxe d’image dans GitHub Flavored Markdown, consultez Images.