L'éditeur de configuration de graphique vous permet de personnaliser les options de mise en forme des visualisations Looker qui utilisent l'API HighCharts. Cela inclut la plupart des graphiques cartésiens, tels que le graphique à colonnes, le graphique à barres et le graphique en courbes, entre autres.
Prérequis
Pour accéder à l'éditeur de configuration de graphique, vous devez disposer de l'autorisation can_override_vis_config.
Personnaliser une visualisation
Pour personnaliser une visualisation avec l'éditeur de configuration de graphique, procédez comme suit:
- Affichez une visualisation dans une exploration, ou modifiez-en une 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).
Le volet Chart Config (Source) (Configuration du graphique (source)) contient le fichier JSON d'origine de votre visualisation et ne peut pas être modifié.
Le volet Chart Config (Override) (Configuration du graphique (remplacer)) contient le fichier JSON qui doit remplacer le fichier JSON source. Lorsque vous ouvrez la boîte de dialogue Edit Chart Config (Modifier la configuration du graphique) pour la première fois, Looker renseigne le volet avec un fichier JSON par défaut. Vous pouvez commencer avec ce fichier JSON, ou le supprimer et saisir n'importe quel fichier HighCharts valide.
Sélectionnez la section Chart Config (Override) (Configuration du graphique (remplacer)) et saisissez un fichier JSON HighCharts valide. Les nouvelles valeurs remplaceront les valeurs de la section Configuration du graphique (source).
- Consultez la section Exemples de cet article pour obtenir des exemples de valeurs JSON HighCharts valides.
- Looker accepte toutes les valeurs JSON valides. Looker n'accepte pas les fonctions, les dates ni les valeurs non définies.
Cliquez sur <> (Mettre en forme le code) pour permettre à Looker de mettre en forme correctement votre fichier JSON.
Cliquez sur Prévisualiser pour tester vos modifications.
Cliquez sur Appliquer pour appliquer les modifications. La visualisation sera affichée à l'aide des valeurs JSON personnalisées.
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.
Si vous souhaitez modifier les options de visualisation par défaut, commencez par supprimer les modifications que vous avez apportées dans l'éditeur de configuration de graphique, puis remplacez-les par la suite. Plus précisément, procédez comme suit:
- 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).
- Copiez le texte dans le volet Configuration du graphique (remplacer).
- Cliquez sur le bouton Clear Chart Overrides (Effacer les remplacements de graphique) pour supprimer toutes les modifications.
- Cliquez sur Appliquer.
- Modifiez votre visualisation à l'aide des options de visualisation par défaut.
- 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).
- Saisissez un fichier JSON HighCharts valide dans le volet Chart Config (Override) (Configuration du graphique (remplacer)). Vous pouvez utiliser le texte copié à l'étape 2 comme modèle. Toutefois, veillez à tester vos modifications à l'aide du bouton Aperçu pour vous assurer qu'il n'y a pas de conflit.
- Cliquez sur Appliquer.
Mise en forme conditionnelle avec series formatters
L'éditeur de configuration de graphique accepte les fichiers JSON HighCharts les plus valides. Il accepte également l'attribut series formatters, qui n'existe que dans Looker. Chaque série peut avoir plusieurs outils de mise en forme pour combiner différentes règles de style.
L'attribut series formatters accepte deux attributs: select et style.
- Saisissez une expression logique dans l'attribut
selectpour indiquer les valeurs de données qui seront mises en forme. - Saisissez du code JSON dans l'attribut
stylepour indiquer comment mettre en forme les valeurs de données.
Par exemple, le code JSON suivant colore chaque valeur de données en orange si elle est supérieure ou égale à 380:
{
series: [{
formatters: [{
select: 'value >= 380',
style: {
color: 'orange'
}
}]
}]
}
Les sections suivantes décrivent plus en détail les valeurs potentielles des attributs select et style.
Attribut select
Vous pouvez utiliser les valeurs suivantes dans une expression select:
value: cette variable renvoie la valeur de la série. Par exemple, vous pouvez utiliserselect: value > 0pour cibler toutes les valeurs positives ouvalue = 100pour ne faire correspondre que les séries d'une valeur de 100.max: utilisezselect: maxpour cibler la valeur de la série qui possède la valeur maximale.min: utilisezselect: minpour cibler la valeur de la série ayant la valeur minimale.percent_rank: cette variable cible la valeur de la série avec un centile spécifié. Par exemple, vous pouvez utiliserselect: percent_rank >= 0.9pour cibler les valeurs des séries du quatre-vingt-dixième centile.name: cette variable affiche la valeur de dimension de la série. Par exemple, si vous disposez d'un rapport affichant les commandes vendues, annulées et retournées, vous pouvez utiliserselect: name = Soldpour cibler la série pour laquelle la valeur de la dimension est "Vendue".AND/ORUtilisezANDetORpour combiner plusieurs expressions logiques.
Pour voir ces expressions implémentées dans l'éditeur de configuration de graphique, consultez l'exemple Appliquer les couleurs aux valeurs maximale, minimale et au centile.
Attribut style
L'attribut style permet d'appliquer des styles compatibles avec HighCharts. Par exemple, vous pouvez colorer les valeurs des séries à l'aide de style.color, colorer les bordures des séries à l'aide de style.borderColor et définir leur largeur à l'aide de style.borderWidth. Pour obtenir une liste plus complète des options de style, consultez les options Highcharts pour series.column.data.
Pour les visualisations de ligne, utilisez style.marker.fillColor et style.marker.lineColor au lieu de style.color. Pour obtenir une liste plus complète des options de style de ligne, consultez les options Highcharts pour series.line.data.marker.
Pour voir la mise en forme des couleurs implémentée dans l'éditeur de configuration de graphique, consultez l'exemple Appliquer les couleurs aux valeurs maximales, minimales et au centile.
Examples
Les sections suivantes fournissent des exemples de cas d'utilisation courants de l'éditeur de configuration de graphique. Pour obtenir la liste complète des attributs que vous pouvez modifier, consultez la documentation de l'API HighCharts.
- Modifier la couleur d'arrière-plan et la couleur du texte des axes
- Personnaliser la couleur des info-bulles
- Ajouter des annotations et des légendes aux graphiques
- Ajouter des bandes de référence verticales
- Couleurr les valeurs maximale, minimale et de centile
Modifier la couleur d'arrière-plan et la couleur du texte de l'axe
Pour modifier la couleur d'arrière-plan d'une visualisation, utilisez l'attribut chart.backgroundColor.
De même, pour modifier la couleur du texte des axes d'une visualisation, utilisez les attributs suivants:
Le code JSON HighCharts suivant change la couleur d'arrière-plan de la visualisation en violet, et le texte des titres et des étiquettes des axes en blanc.
{
chart: {
backgroundColor: "purple"
},
xAxis: {
labels: {
style: {
color: "white"
}
},
title: {
style: {
color: "white"
}
}
},
yAxis: {
labels: {
style: {
color: "white"
}
},
title: {
style: {
color: "white"
}
}
}
}
Personnaliser la couleur des info-bulles
Pour personnaliser la couleur de l'info-bulle, utilisez les attributs suivants:
Le code JSON HighCharts suivant change la couleur d'arrière-plan de l'info-bulle en cyan et la couleur du texte de l'info-bulle en noir.
{
tooltip: {
backgroundColor: "cyan",
style: {
color: "black"
}
}
}
Personnaliser le contenu et le style des info-bulles
Pour personnaliser le contenu de l'info-bulle, utilisez les attributs suivants:
Le fichier JSON HighCharts suivant modifie le format de l'info-bulle : la valeur de l'axe des abscisses (X) s'affiche en haut de l'info-bulle dans une police plus grande, suivie d'une liste de toutes les valeurs de série à ce stade.
Cet exemple utilise les fonctions et variables HighCharts suivantes:
{key}est une variable qui renvoie la valeur de l'axe des abscisses (x) du point sélectionné. (dans cet exemple, il s'agit du mois et de l'année).{#each points}{/each}est une fonction qui répète le code inclus pour chaque série du graphique.{series.name}est une variable qui renvoie le nom de la série.{y:.2f}est une variable qui renvoie la valeur sur l'axe Y du point sélectionné, arrondie à deux décimales.{y}est une variable qui renvoie la valeur de l'axe des y du point sélectionné.{variable:.2f}arronditvariableà deux décimales. Consultez la documentation sur les modèles Highcharts pour obtenir d'autres exemples de mise en forme des valeurs.
{
tooltip: {
format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
shared: true
},
}
Ajouter des annotations et des légendes aux graphiques
Pour ajouter une annotation, utilisez l'attribut annotations. Pour ajouter une légende au graphique, utilisez l'attribut caption.
Pour obtenir les coordonnées d'un point, cliquez sur Inspecter les métadonnées du point en haut de la boîte de dialogue Modifier la configuration du graphique. Ensuite, maintenez le pointeur sur le point de données que vous souhaitez annoter. Looker affiche un ID de point, que vous pouvez utiliser dans l'attribut annotations.labels.point.
Le fichier JSON HighCharts ci-dessous ajoute deux annotations au graphique pour expliquer la diminution des articles d'inventaire après certaines périodes. Il ajoute également une légende au bas du graphique pour expliquer les annotations plus en détail.
{
caption: {
text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
},
annotations: [{
labels: [{
point: "inventory_items.count-60-79",
text: "Clearance sale"
},
{
point: "inventory_items.count-80+",
text: "Thrown away"
},
]
}]
}
Ajouter des bandes de référence verticales
Pour ajouter une bande de référence verticale, utilisez l'attribut xAxis.plotBands.
Le fichier JSON HighCharts suivant ajoute une bande de référence verticale entre le 24 et le 29 novembre 2022 pour indiquer une période de promotion. Il ajoute également une légende en bas du diagramme pour expliquer la signification du groupe.
Notez que les attributs to et from de xAxis.plotBands doivent correspondre aux valeurs de données du graphique. Dans cet exemple, étant donné que les données sont temporelles, les attributs acceptent les valeurs d'horodatage Unix (1669680000000 pour le 29 novembre 2022 et 1669248000000 pour le 24 novembre 2022). Les formats de date basés sur des chaînes, tels que MM/JJ/AAAA et JJ-MM-AA, ne sont pas compatibles avec les attributs HighCharts to et from.
{
caption: {
text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
},
xAxis: {
plotBands: [{
to: 1669680000000,
from: 1669248000000,
label: {
text: 'BFCM Sale Period'
}
}]
},
}
Appliquer une couleur aux valeurs maximale, minimale et au centile
Consultez le livre de recettes Exploiter pleinement les visualisations Looker: personnaliser la mise en forme conditionnelle dans les graphiques cartésiens pour obtenir un exemple détaillé de coloration des valeurs maximales, minimales et de centile d'une visualisation cartésienne.
Créer de nouveaux types de visualisations
Vous pouvez utiliser l'éditeur de configuration de graphique pour créer des types de visualisations qui ne sont pas inclus dans les types de visualisations par défaut de Looker. Les articles suivants fournissent des exemples de certaines des visualisations que vous pouvez concevoir avec l'éditeur de configuration de graphique:
- Créer un graphique à puces avec l'éditeur de configuration de graphique
- Créer un graphique en jauge solide avec l'éditeur de configuration de graphique
- Créer un graphique de flux avec l'éditeur de configuration de graphique