Visualization
Ce composant récupère les données et la configuration du contexte de la requête, puis affiche la visualisation appropriée. Vous pouvez personnaliser la largeur et la hauteur en transmettant des valeurs numériques en pixels à ces propriétés.
| Propriété | Valeurs | Notes |
|---|---|---|
width
|
nombre (en pixels) | 100% par défaut lorsque la propriété n'est pas définie. |
height
|
nombre (en pixels) | 500 px par défaut lorsque la propriété n'est pas définie. |
chartTypeMap
|
objet clé/valeur | Accepte un objet clé/valeur qui définit le composant à afficher lorsque le système de l'adaptateur rencontre des valeurs de type de graphique spécifiques. Elle peut être utilisée pour remplacer les graphiques par défaut de Looker ou pour ajouter de nouveaux types de graphiques au système d'adaptateur. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'
<Query query='12345' config={{ type: 'radar'}}>
<Visualization
width={1000}
height={500}
chartTypeMap={{ radar: MyCustomRadar}}
/>
</Query>
Query
Query s'intègre à notre API JavaScript pour gérer le cycle requête/réponse et pour récupérer une réponse à la requête à l'aide de l'ID de requête ou de la valeur qid. Vous pouvez transmettre des remplacements de configuration de visualisation à fusionner avec la réponse de l'API et charger toutes les données dans le contexte React.
| Propriété | Valeurs | Notes |
|---|---|---|
query
|
nombre | chaîne | Peut accepter le Query.client_id, qui figure après la propriété qid dans l'URL d'une exploration, (3fdrdE0b3ATltUvXBaSOPN), ou un ID de requête numérique (1234). Si vous avez accès à l'ID de requête numérique, à partir de cette valeur, vous pouvez enregistrer une requête de serveur supplémentaire.Query accepte soit la propriété query, soit la propriété dashboard, mais pas les deux.
|
dashboard
|
nombre | Peut accepter un ID de tableau de bord numérique (1234). Si vous avez accès à l'ID numérique du tableau de bord, partir de cette valeur peut enregistrer une requête de serveur supplémentaire.dashboard n'accepte pas les ID de chaîne des tableaux de bord LookML.Query accepte soit la propriété query, soit la propriété dashboard, mais pas les deux.
|
config
|
En fonction de la valeur type, accepte les propriétés suivantes:type, legend, positioning, render_null_values, tooltips, series, x_axis et y_axis Consultez la documentation spécifique aux graphiques plus loin sur cette page pour connaître les valeurs acceptées.
|
Définissez et remplacez les paramètres de configuration des graphiques. |
LoadingIndicator
|
référence du composant | Accepte une référence de composant non installé. Valeur par défaut : ProgressCircular
|
import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'
<Query
query='12345'
config={{
/* specific properties described below */
}}
LoadingIndicator={ProgressCircular}
>
<Visualization />
</Query>
Propriétés du graphique en aires
Voici les propriétés config pour les graphiques en aires.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'area'
|
|
legend
|
false (pour désactiver) OU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Définit la position de la légende ou la désactive en la définissant sur false.Valeur par défaut : { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Mode d'empilement de graphiques. Valeur par défaut : 'overlay'
|
render_null_values
|
boolean | Traite les valeurs nulles comme étant 0. Valeur par défaut : false
|
tooltips
|
boolean | Activez ou désactivez l'affichage des info-bulles lorsque vous pointez sur les points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
x_axis
|
Configuration de l'axe des abscisses | Consultez la section sur l'axe des abscisses pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe des y | Consultez la section sur l'axe des ordonnées pour connaître les options de configuration et découvrir des exemples d'utilisation. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
legend: { position: 'left' },
positioning: 'stacked',
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propriété series peut accepter un tableau de configurations de séries ou un objet nommé remplaçant une série spécifique dans votre réponse.
| Propriété | Valeurs | Notes |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
nombre | Définissez l'épaisseur du trait en pixels. Par défaut: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Définir la forme du point Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définir le style de point Valeur par défaut: 'none' (points désactivés)
|
visible
|
boolean | Affichez ou masquez la série de données. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'area',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
}
}
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'area',
series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
}}
>
<Visualization />
</Query>
x_axis
Bien que nos graphiques n'acceptent qu'un seul axe des abscisses pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des abscisses. Valeur par défaut: false (aucun libellé)
|
reversed
|
boolean | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Bien que nos graphiques n'acceptent qu'un seul axe des ordonnées pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des ordonnées. Valeur par défaut: false (aucun libellé)
|
range
|
[nombre (min) | 'auto', nombre (max.) | 'auto' |
Définit les valeurs minimale et maximale de l'axe des ordonnées. La valeur minimale est de 'auto' par défaut, et la valeur maximale de 'auto' est définie par défaut sur la valeur de point de données maximale de l'ensemble. Par défaut, ['auto' | 'auto'].
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propriétés des graphiques à barres et à colonnes
Voici les propriétés config pour les graphiques à barres et à colonnes.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'bar' | 'column'
|
|
legend
|
false (pour désactiver) OU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Définit la position de la légende ou la désactive en la définissant sur false. Par défaut : { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Mode d'empilement de graphiques. Valeur par défaut : 'overlay'
|
tooltips
|
boolean | Activez ou désactivez l'affichage des info-bulles lorsque vous pointez sur les points de données.Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
x_axis
|
Configuration de l'axe des abscisses | Consultez la section sur l'axe des abscisses pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe des y | Consultez la section sur l'axe des ordonnées pour connaître les options de configuration et découvrir des exemples d'utilisation. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
legend: { position: 'left' },
positioning: 'stacked',
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propriété series peut accepter un tableau de configurations de séries ou un objet nommé remplaçant une série spécifique dans votre réponse.
| Propriété | Valeurs | Notes |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
visible
|
boolean | Affichez ou masquez la série de données. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'column',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
visible: false,
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'column',
series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
}}
>
<Visualization />
</Query>
x_axis
Bien que nos graphiques n'acceptent qu'un seul axe des abscisses pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des abscisses. Valeur par défaut: false (aucun libellé)
|
reversed
|
boolean | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'column',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Bien que nos graphiques n'acceptent qu'un seul axe des ordonnées pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des ordonnées. Valeur par défaut: false (aucun libellé)
|
range
|
[nombre (min) | 'auto', nombre (max.) | 'auto' |
Définit les valeurs minimale et maximale de l'axe des ordonnées. Si vous définissez la valeur minimale sur "auto" par défaut, la valeur par défaut est 0, et la valeur par défaut du point de données maximal de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propriétés du graphique en courbes
Voici les propriétés config pour les graphiques en courbes.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'line'
|
|
legend
|
false (pour désactiver) OU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Définit la position de la légende ou la désactive en la définissant sur false. Par défaut : { position: 'bottom' }
|
render_null_values
|
boolean | Traite les valeurs nulles comme étant 0. Valeur par défaut : false
|
tooltips
|
boolean | Activez ou désactivez l'affichage des info-bulles lorsque vous pointez sur les points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
x_axis
|
Configuration de l'axe des abscisses | Consultez la section sur l'axe des abscisses pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe des y | Consultez la section sur l'axe des ordonnées pour connaître les options de configuration et découvrir des exemples d'utilisation. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propriété series peut accepter un tableau de configurations de séries ou un objet nommé remplaçant une série spécifique dans votre réponse.
| Propriété | Valeurs | Notes |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
nombre | Définissez l'épaisseur du trait en pixels. Par défaut: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Définir la forme du point Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définir le style de point Valeur par défaut: 'none' (points désactivés)
|
visible
|
boolean | Affichez ou masquez la série de données. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'line',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'line',
series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
}}
>
<Visualization />
</Query>
x_axis
Bien que nos graphiques n'acceptent qu'un seul axe des abscisses pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des abscisses. Valeur par défaut: false (aucun libellé)
|
reversed
|
boolean | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Bien que nos graphiques n'acceptent qu'un seul axe des ordonnées pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des ordonnées. Valeur par défaut: false (aucun libellé)
|
range
|
[nombre (min) | 'auto', nombre (max.) | 'auto' |
Définit les valeurs minimale et maximale de l'axe des ordonnées. Si vous définissez la valeur minimale sur "auto" par défaut, la valeur par défaut est 0, et la valeur par défaut du point de données maximal de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propriétés du graphique à nuage de points
Voici les propriétés config pour les graphiques à nuage de points.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'scatter'
|
|
legend
|
false (pour désactiver) OU { position: 'left' | 'bottom' | 'right' | 'top' }
|
Définit la position de la légende ou la désactive en la définissant sur false. Par défaut : { position: 'bottom' }
|
render_null_values
|
boolean | Traite les valeurs nulles comme étant 0. Valeur par défaut : false
|
tooltips
|
boolean | Activez ou désactivez l'affichage des info-bulles lorsque vous pointez sur les points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
x_axis
|
Configuration de l'axe des abscisses | Consultez la section sur l'axe des abscisses pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe des y | Consultez la section sur l'axe des ordonnées pour connaître les options de configuration et découvrir des exemples d'utilisation. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propriété series peut accepter un tableau de configurations de séries ou un objet nommé remplaçant une série spécifique dans votre réponse.
| Propriété | Valeurs | Notes |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
nombre | Utilisé pour définir la taille des points dans un nuage de points. Considérez-la comme la valeur globale de chaque point. Valeur par défaut : 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Définir la forme du point Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définir le style de point Valeur par défaut: 'none' (points désactivés)
|
size_by
|
false | chaîne
|
Nom de série pour lequel calibrer la taille de chaque point. Définissez false pour désactiver le dimensionnement dynamique des points. Par défaut : false
|
visible
|
boolean | Affichez ou masquez la série de données. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
size_by: 'orders.count',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: [
{
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
size_by: 'orders.count',
},
],
}}
>
<Visualization />
</Query>
x_axis
Bien que nos graphiques n'acceptent qu'un seul axe des abscisses pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des abscisses. Valeur par défaut: false (aucun libellé)
|
reversed
|
boolean | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Bien que nos graphiques n'acceptent qu'un seul axe des ordonnées pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
gridlines
|
boolean | Afficher ou masquer le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher en tant que libellé de l'axe des ordonnées. Valeur par défaut: false (aucun libellé)
|
range
|
[nombre (min) | 'auto', nombre (max.) | 'auto' |
Définit les valeurs minimale et maximale de l'axe des ordonnées. Si vous définissez la valeur minimale sur "auto" par défaut, la valeur par défaut est 0, et la valeur par défaut du point de données maximal de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
boolean | Affichez ou masquez les valeurs affichées le long de l'axe. Valeur par défaut : true
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propriétés du graphique à valeur unique
Voici les propriétés config pour les graphiques à valeur unique.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'single_value'
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query query='12345' config={{ type: 'single_value' }}>
<Visualization />
</Query>
Propriétés du graphique sparkline
Voici les propriétés config pour les graphiques sparkline.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
boolean | Traite les valeurs nulles comme étant 0. Valeur par défaut : false
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe des y | Consultez la section sur l'axe des ordonnées pour connaître les options de configuration et découvrir des exemples d'utilisation. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Bien que Sparkline n'accepte intrinsèquement qu'une seule série, nous conservons un modèle d'API impliquant des remplacements de séries nommées ou de tableaux afin de rester cohérents avec les autres types de graphiques de notre bibliothèque.
| Propriété | Valeurs | Notes |
|---|---|---|
color
|
chaîne | Code hexadécimal |
line_width
|
nombre | Définissez l'épaisseur du trait en pixels. Valeur par défaut : 3
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'sparkline',
series: {
'orders.count': {
color: '#4285F4',
line_width: 10,
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: [
{
color: '#4285F4',
line_width: 10,
},
],
}}
>
<Visualization />
</Query>
y_axis
Bien que nos graphiques n'acceptent qu'un seul axe des ordonnées pour le moment, notre API est pérenne et structurée de manière à accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Notes |
|---|---|---|
range
|
[nombre (min) | 'auto', nombre (max.) | 'auto' |
Définit les valeurs minimale et maximale de l'axe des ordonnées. Si vous définissez la valeur minimale sur "auto" par défaut, la valeur par défaut est 0, et la valeur par défaut du point de données maximal de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'sparkline',
y_axis: [
{ range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propriétés du graphique sous forme de tableau
Voici les propriétés config pour les tableaux.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'table'
|
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
column_order
|
string[]
|
Tableau de noms de séries (par exemple, 'orders.count') indiquant comment classer les colonnes de la table de gauche à droite.
|
show_row_numbers
|
boolean
|
Affichez la ligne des totaux au bas du tableau. Valeur par défaut : true
|
show_totals
|
boolean
|
Affichez la ligne des totaux au bas du tableau. Valeur par défaut : true
|
show_row_totals
|
boolean
|
Activer/Désactiver l'affichage des totaux de ligne sur le côté droit du tableau Valeur par défaut : true
|
truncate_text
|
boolean
|
Lorsque la valeur est true, le texte des cellules de tableau est limité à une seule ligne et le dépassement de contenu est tronqué avec des points de suspension. Lorsque la valeur est false, le contenu peut être encapsulé sur plusieurs lignes. Par défaut, true.
|
truncate_header
|
boolean
|
Lorsque la valeur est true, les libellés d'en-tête du tableau sont limités à une seule ligne, et le dépassement de contenu est tronqué avec des points de suspension. Lorsque la valeur est false, les en-têtes peuvent être encapsulés sur plusieurs lignes. Par défaut, true.
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'table',
column_order: ['orders.count', 'users.city'],
show_row_numbers: true,
show_totals: true,
show_row_totals: true,
truncate_text: true,
truncate_header: true
}}
>
<Visualization />
</Query>
series
La propriété "series" peut accepter un tableau de configurations de séries ou un objet nommé remplaçant une série spécifique dans votre réponse.
| Propriété | Valeurs | Notes |
|---|---|---|
cell_visualization
|
boolean
|
Active ou désactive la visualisation des cellules intégrée. La valeur par défaut est true pour la première mesure et false pour les autres.
|
color
|
string
|
Spécifiez la couleur utilisée pour afficher la visualisation des cellules du tableau. |
value_format
|
string
|
Chaîne de mise en forme des nombres indiquant si les valeurs doivent être affichées en tant que devise, la précision à virgule flottante, s'il faut utiliser des virgules ou des points pour délimiter les milliers, etc. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'table',
series: {
'orders.count': {
color: '#4285F4',
cell_visualization: true,
value_format: '$#,##0.00',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'table',
series: [{
color: '#4285F4',
cell_visualization: true,
value_format: '$#,##0.00',
}]
}}
>
<Visualization />
</Query>
Propriétés du graphique à secteurs
Voici les propriétés config pour les graphiques à secteurs.
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'pie'
|
|
legend
|
false (à désactiver) | configuration de la légende
|
Le réglage de cette valeur sur false désactive la légende. Valeur par défaut: activée. Consultez la section legend pour connaître les options de configuration et voir des exemples d'utilisation lorsque cette option est activée.
|
tooltips
|
boolean | Activez ou désactivez l'affichage des info-bulles lorsque vous pointez sur les points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section series pour découvrir les options de configuration et obtenir des exemples d'utilisation. |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: false,
tooltips: true,
}}
>
<Visualization />
</Query>
legend
La propriété legend peut accepter les configurations de légende suivantes:
| Propriété | Valeurs | Notes |
|---|---|---|
type
|
'labels' | 'legend'
|
labels place des libellés pointant directement vers chaque secteur. legend place une légende distincte. Par défaut, 'legend'.
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Positionnez la légende lorsque type: 'legend'. Par défaut : 'right'
|
width
|
nombre | Largeur maximale de la légende en pixels lorsque type: 'legend'. Par défaut : 300
|
value
|
'label' | 'label_value' | 'value' | 'percent' | 'label_percent'
|
Définit le contenu de la légende: libellé, libellé et valeur, valeur, pourcentage, libellé et pourcentage. Valeur par défaut : 'label_percent'
|
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: {
type: 'legend'
position: 'right'
width: 200,
value: 'label_value',
},
}}
>
<Visualization />
</Query>
series
Contrairement aux graphiques cartésiens, chaque point de données d'un graphique à secteurs est traité comme une nouvelle série:
| Propriété | Valeurs | Notes |
|---|---|---|
color
|
chaîne | Code hexadécimal |
Exemple d'utilisation :
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
series: {
'New York': {
color: '#4285F4',
},
'Los Angeles': {
color: '#b73ec3',
},
'Chicago': {
color: '#db4da8',
},
},
}}
>
<Visualization />
</Query>