Notez que vous consultez la documentation Looker. Pour accéder à la documentation sur Looker Studio, consultez la page https://support.google.com/looker-studio.

Exploitez tout le potentiel du livre de recettes sur les visualisations Looker: Personnalisation de la mise en forme conditionnelle dans les graphiques cartésiens

La mise en évidence visuelle des valeurs qui répondent à certaines conditions permet aux utilisateurs d'identifier rapidement les tendances des données. Cette pratique est souvent appelée mise en forme conditionnelle.

Par exemple, cette visualisation de l'exemple Appliquer les couleurs aux valeurs maximales, minimales et au centile de cette page aide l'utilisateur à identifier rapidement les mois les plus bas et les plus élevés de ventes:

Dans Looker, vous pouvez utiliser les options intégrées dans les paramètres de visualisation de texte et de tableaux pour appliquer une mise en forme conditionnelle au texte et aux tableaux. Pour les graphiques cartésiens, vous pouvez utiliser l'éditeur de configuration de graphique pour mettre en forme les valeurs de données de manière conditionnelle.

Dans l'éditeur de configuration de graphique, vous pouvez utiliser l'attribut series formatters pour appliquer une mise en forme conditionnelle à des valeurs qui répondent à des critères spécifiques. Voici quelques-unes des règles de mise en forme conditionnelle que vous pouvez appliquer:

La valeur est supérieure, inférieure ou égale à une valeur spécifiée.

Par exemple, pour appliquer une mise en forme conditionnelle à des valeurs numériques supérieures à 100, utilisez select: 'value > 100'.
La valeur correspond à la valeur minimale ou maximale de la série.

Par exemple, pour appliquer une mise en forme conditionnelle à la valeur maximale, utilisez select: 'max'.
La valeur est comprise dans un rang au centile spécifié.

Par exemple, pour appliquer une mise en forme conditionnelle aux valeurs du dixième centile, utilisez select: 'percent_rank >= 0.9'.
La valeur de l'axe des x correspond à une valeur spécifiée.

Par exemple, pour appliquer une mise en forme conditionnelle à des séries dont la valeur de l'axe des x est "Columbia", utilisez select: name = Columbia.

Ce livre de recettes fournit les tutoriels suivants:

Couleurr les valeurs maximale, minimale et de centile
Combiner des conditions de mise en forme conditionnelle

Appliquer une couleur aux valeurs maximale, minimale et au centile

Vous pouvez utiliser les attributs select et style pour spécifier la couleur des valeurs de données maximales et minimales d'un graphique cartésien, ainsi que toute valeur inférieure à un centile spécifié.

Composants

Prérequis

La création d'une visualisation cartésienne avec mise en forme conditionnelle nécessite ce qui suit:

Autorisations de création d'explorations et bonne connaissance de l'exploration des données
L'autorisation can_override_vis_config, qui accorde l'accès à l'éditeur de configuration de graphique
Autorisations d'enregistrer du contenu (si vous souhaitez enregistrer la visualisation sous forme de présentation ou de tableau de bord)
Connaître le format JSON

Exemple: visualisation des colonnes

Une équipe des ventes veut être en mesure d'identifier rapidement les tendances des ventes mensuelles sur une année. Ils disposent d'une visualisation qui affiche le coût total regroupé par Mois.

Vous pouvez utiliser la mise en forme conditionnelle pour mettre en évidence les valeurs qui répondent à certains objectifs, ce qui permet de rendre les données plus claires pour les utilisateurs.

Pour cet exemple, l'équipe des ventes souhaite mettre en évidence les valeurs suivantes:

La colonne avec la valeur Coût total minimale apparaît en rouge.
La colonne indiquant la valeur Coût total maximale apparaît en vert.
Toutes les colonnes du Coût total du trentième centile inférieur sont affichées en orange.
Toutes les autres colonnes sont grises.

Pour appliquer cette mise en forme conditionnelle à un graphique cartésien, procédez comme suit:

Affichez une visualisation cartésienne dans une exploration, ou modifiez une visualisation cartésienne dans une présentation ou un tableau de bord.
Ouvrez le menu Modifier dans la visualisation.
Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Trace. Looker affiche la boîte de dialogue Edit Chart Config (Modifier la configuration du graphique).

Sélectionnez la section Chart Config (Override) (Configuration du graphique (remplacer)) et saisissez le code JSON suivant:

{
  series: [{
    color: 'gray',
    formatters: [{
        select: 'max',
        style: {
          color: 'green',
        }
      },
      {
        select: 'percent_rank <= 0.3',
        style: {
          color: 'orange'
        }
      },
      {
        select: 'min',
        style: {
          color: 'red'
        }
      },
    ]
  }]
}

Pour appliquer vos modifications, cliquez sur Appliquer.

Désormais, l'équipe commerciale peut rapidement identifier les mois où les performances ont été insuffisantes, et analyser ces mois pour déterminer ce qui s'est passé.

Une fois que vous avez personnalisé votre visualisation, vous pouvez l'enregistrer. Si vous avez consulté la visualisation dans une exploration, enregistrez-la. Si vous avez modifié une présentation ou un tableau de bord, cliquez sur Enregistrer.

Exemple: visualisation en nuage de points

Pour appliquer une mise en forme conditionnelle aux visualisations de nuage de points, vous pouvez spécifier une couleur pour les attributs style.marker.fillColor et style.marker.lineColor au lieu de l'attribut style.color.

L'attribut lineColor définit la couleur du contour de chaque point du nuage de points. L'attribut fillColor définit la couleur intérieure de chaque point du nuage de points.

Vous pouvez modifier l'exemple précédent en procédant comme suit:

Affichez un nuage de points dans une exploration, ou modifiez un diagramme de dispersion dans une présentation ou un tableau de bord.
Ouvrez le menu Modifier dans la visualisation.
Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Trace. Looker affiche la boîte de dialogue Edit Chart Config (Modifier la configuration du graphique).

Sélectionnez la section Chart Config (Override) (Configuration du graphique (remplacer)) et saisissez le code JSON suivant:

{
  series: [{
    color: 'gray',
    formatters: [{
        select: 'max',
        style: {
          marker: {
            fillColor: 'green',
            lineColor: 'green'
          }
        }
      },
      {
        select: 'percent_rank <= 0.3',
        style: {
          marker: {
            fillColor: 'orange',
            lineColor: 'orange'
          }
        }
      },
      {
        select: 'min',
        style: {
          marker: {
            fillColor: 'red',
            lineColor: 'red'
          }
        }
      }
    ]
  }]
}

Cliquez sur Appliquer pour appliquer les modifications.

Dans la visualisation qui s'affiche, la valeur minimale, la valeur maximale et les valeurs des 30 % inférieurs sont colorées selon les règles de mise en forme.

Combiner des conditions de mise en forme conditionnelle

Vous pouvez utiliser AND et OR dans l'attribut select pour combiner des expressions logiques dans des règles de mise en forme conditionnelle.

Composants

Prérequis

La création d'une visualisation cartésienne avec mise en forme conditionnelle nécessite ce qui suit:

Autorisations de création d'explorations et bonne connaissance de l'exploration des données
L'autorisation can_override_vis_config, qui accorde l'accès à l'éditeur de configuration de graphique
Autorisations d'enregistrer du contenu (si vous souhaitez enregistrer la visualisation sous forme de présentation ou de tableau de bord)
Connaître le format JSON

Exemple

Une équipe des ventes veut être en mesure d'identifier rapidement les mois qui répondent à certains critères. Ils disposent d'une visualisation qui affiche le coût total regroupé par Mois.

Pour cet exemple, l'équipe des ventes souhaite mettre en évidence les valeurs suivantes:

Toutes les colonnes dont la valeur Coût total est comprise entre 43 000 $et 45 000 $ (inclus) sont en violet.
Toutes les autres colonnes sont grises.

Pour appliquer cette mise en forme conditionnelle à un graphique cartésien, procédez comme suit:

Affichez une visualisation cartésienne dans une exploration, ou modifiez une visualisation cartésienne dans une présentation ou un tableau de bord.
Ouvrez le menu Modifier dans la visualisation.
Cliquez sur le bouton Modifier la configuration du graphique dans l'onglet Trace. Looker affiche la boîte de dialogue Edit Chart Config (Modifier la configuration du graphique).

Sélectionnez la section Chart Config (Override) (Configuration du graphique (remplacer)) et saisissez le code JSON suivant:

{
  series: [{
    color: 'gray',
    formatters: [{
        select: 'value >= 43000 AND value <= 45000',
        style: {
          color: 'purple',
        }
      },
    ]
  }]
}

Pour appliquer vos modifications, cliquez sur Appliquer.

Désormais, l'équipe commerciale peut rapidement voir que les revenus de mars, avril et septembre se situent entre 43 000 $et 45 000 $et prendre des mesures pour savoir ce qui s'est passé pendant ces mois.