Visualization
Ce composant extrait les données et la configuration à partir 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 | Remarques |
|---|---|---|
width
|
nombre (en pixels) | La valeur par défaut est 100% lorsque la propriété n'est pas définie. |
height
|
nombre (en pixels) | Valeur par défaut : 500 pixels 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. Cela peut être utilisé 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 récupérer une réponse à l'aide de l'ID de requête ou de la valeur qid. Vous pouvez transmettre des remplacements de configuration de vis à fusionner avec la réponse de l'API et charger toutes les données dans le contexte React.
| Propriété | Valeurs | Remarques |
|---|---|---|
query
|
nombre | chaîne | Peut accepter la propriété Query.client_id, qui est située 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, vous pouvez enregistrer une requête de serveur supplémentaire à partir de cette valeur.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 de tableau de bord numérique, vous pouvez enregistrer une requête de serveur supplémentaire à partir de cette valeur.dashboard n'accepte pas les ID de chaîne des tableaux de bord LookML.Query accepte soit l'prop query, soit les accessoires 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, y_axisConsultez la documentation spécifique aux graphiques plus tard sur cette page pour connaître les valeurs acceptées. |
Définir et remplacer les paramètres de configuration des graphiques |
LoadingIndicator
|
référence du composant | Accepte une référence de composant non installée. 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 | Remarques |
|---|---|---|
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.Par défaut : { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Mode d'empilement de graphiques Valeur par défaut : 'overlay'
|
render_null_values
|
booléen | Traiter les valeurs nulles comme 0. Valeur par défaut : false
|
tooltips
|
booléen | Activer ou désactiver 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 consacrée à la série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
configuration de l'axe des abscisses | Consultez la section axe des abscisses pour connaître les options de configuration et obtenir un exemple d'utilisation. |
y_axis
|
configuration de l'axe y | Pour connaître les options de configuration et obtenir un exemple d'utilisation, consultez la section sur l'axe y. |
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é qui remplace une série spécifique dans votre réponse.
| Propriété | Valeurs | Remarques |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
nombre | Définissez l'épaisseur du trait en pixels. Valeur par défaut: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Définissez la forme du point. Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définissez le style du point. Valeur par défaut: 'none' (points désactivés)
|
visible
|
booléen | Afficher ou masquer 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le libellé de l'axe des abscisses. Valeur par défaut: false (aucun libellé)
|
reversed
|
booléen | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
booléen | 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le 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 Y. Si la valeur minimale est de 'auto', elle est définie par défaut sur 0, et la valeur maximale 'auto' sur la valeur maximale du point de données de l'ensemble. Par défaut, ['auto' | 'auto'].
|
values
|
booléen | 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 | Remarques |
|---|---|---|
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
|
booléen | Activez ou désactivez l'affichage des info-bulles lorsque vous pointez sur des points de données. Par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section consacrée à la série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
configuration de l'axe des abscisses | Consultez la section axe des abscisses pour connaître les options de configuration et obtenir un exemple d'utilisation. |
y_axis
|
configuration de l'axe y | Pour connaître les options de configuration et obtenir un exemple d'utilisation, consultez la section sur l'axe y. |
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é qui remplace une série spécifique dans votre réponse.
| Propriété | Valeurs | Remarques |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
visible
|
booléen | Afficher ou masquer 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le libellé de l'axe des abscisses. Valeur par défaut : false (aucun libellé)
|
reversed
|
booléen | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
booléen | 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le 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 Y. Lorsque la valeur minimale est de 'auto' par défaut, elle est de 0, et que la valeur maximale est 'auto' par défaut sur la valeur maximale du point de données de l’ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
booléen | 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 | Remarques |
|---|---|---|
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
|
booléen | Traiter les valeurs nulles comme 0. Valeur par défaut : false
|
tooltips
|
booléen | Activer ou désactiver 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 consacrée à la série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
configuration de l'axe des abscisses | Consultez la section axe des abscisses pour connaître les options de configuration et obtenir un exemple d'utilisation. |
y_axis
|
configuration de l'axe y | Pour connaître les options de configuration et obtenir un exemple d'utilisation, consultez la section sur l'axe y. |
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é qui remplace une série spécifique dans votre réponse.
| Propriété | Valeurs | Remarques |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
nombre | Définissez l'épaisseur du trait en pixels. Valeur par défaut: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Définissez la forme du point. Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définissez le style du point. Valeur par défaut: 'none' (points désactivés)
|
visible
|
booléen | Afficher ou masquer 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le libellé de l'axe des abscisses. Valeur par défaut: false (aucun libellé)
|
reversed
|
booléen | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
booléen | 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le 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 Y. Lorsque la valeur minimale est de 'auto' par défaut, elle est de 0, et que la valeur maximale est 'auto' par défaut sur la valeur maximale du point de données de l’ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
booléen | 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 | Remarques |
|---|---|---|
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
|
booléen | Traiter les valeurs nulles comme 0. Valeur par défaut : false
|
tooltips
|
booléen | Activer ou désactiver 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 consacrée à la série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
configuration de l'axe des abscisses | Consultez la section axe des abscisses pour connaître les options de configuration et obtenir un exemple d'utilisation. |
y_axis
|
configuration de l'axe y | Pour connaître les options de configuration et obtenir un exemple d'utilisation, consultez la section sur l'axe y. |
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é qui remplace une série spécifique dans votre réponse.
| Propriété | Valeurs | Remarques |
|---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
nombre | Permet de définir la taille des points dans un graphique à nuage de points. Voyez cela comme la valeur de contour de chaque point. Valeur par défaut : 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Définissez la forme du point. Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définissez le style du 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. Configurez false pour désactiver le dimensionnement dynamique des points. Par défaut : false
|
visible
|
booléen | Afficher ou masquer 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le libellé de l'axe des abscisses. Valeur par défaut : false (aucun libellé)
|
reversed
|
booléen | Inverse l'ordre des points de données. Valeur par défaut : false
|
values
|
booléen | 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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
gridlines
|
booléen | Affichez ou masquez le quadrillage vertical. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher sur le 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 Y. Lorsque la valeur minimale est de 'auto' par défaut, elle est de 0, et que la valeur maximale est 'auto' par défaut sur la valeur maximale du point de données de l’ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
booléen | 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 | Remarques |
|---|---|---|
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 | Remarques |
|---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
booléen | Traiter les valeurs nulles comme 0. Valeur par défaut : false
|
series
|
série au format view_name.field_name
|
Consultez la section consacrée à la série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
y_axis
|
configuration de l'axe y | Pour connaître les options de configuration et obtenir un exemple d'utilisation, consultez la section sur l'axe y. |
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 qu'une seule série, nous gardons un modèle d'API impliquant des forçages 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 | Remarques |
|---|---|---|
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 pour accepter la configuration de plusieurs axes.
| Propriété | Valeurs | Remarques |
|---|---|---|
range
|
[nombre (min) | 'auto', nombre (max) | 'auto' |
Définit les valeurs minimale et maximale de l'axe Y. Lorsque la valeur minimale est de 'auto' par défaut, elle est de 0, et que la valeur maximale est 'auto' par défaut sur la valeur maximale du point de données 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 de table
Voici les propriétés config pour les graphiques de table.
| Propriété | Valeurs | Remarques |
|---|---|---|
type
|
'table'
|
|
series
|
série au format view_name.field_name
|
Consultez la section consacrée à la série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
column_order
|
string[]
|
Tableau de noms de séries (par exemple, 'orders.count') indiquant comment vous souhaitez que les colonnes du tableau soient triées de gauche à droite.
|
show_row_numbers
|
boolean
|
Activez ou désactivez l'affichage de la ligne des totaux en bas du tableau. Valeur par défaut : true
|
show_totals
|
boolean
|
Activez ou désactivez l'affichage de la ligne des totaux en bas du tableau. Valeur par défaut : true
|
show_row_totals
|
boolean
|
Activez/désactivez l'affichage des totaux de lignes à droite du tableau. Valeur par défaut : true
|
truncate_text
|
boolean
|
Lorsque la valeur est true, le texte des cellules du tableau est limité à une seule ligne et le débordement de contenu est tronqué par des points de suspension. Lorsque false est activé, le retour à la ligne est autorisé sur plusieurs lignes. Par défaut, true.
|
truncate_header
|
boolean
|
Lorsque la valeur est true, les libellés d'en-tête de tableau sont limités à une seule ligne et le débordement de contenu est tronqué par des points de suspension. Si la valeur est false, les en-têtes sont autorisés à s'étendre 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é qui remplace une série spécifique dans votre réponse.
| Propriété | Valeurs | Remarques |
|---|---|---|
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 de rendu de la cellule dans le tableau. |
value_format
|
string
|
Chaîne de mise en forme des nombres indiquant s'il faut afficher les valeurs en tant que devise, la précision en virgule flottante, l'utilisation de virgules ou de points pour délimiter des 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 | Remarques |
|---|---|---|
type
|
'pie'
|
|
legend
|
false (pour désactiver) | configuration de la légende
|
Définir la valeur sur false désactive la légende. Valeur par défaut: activée. Lorsqu'elle est activée, consultez la section Legend pour obtenir des options de configuration et des exemples d'utilisation.
|
tooltips
|
booléen | Activer ou désactiver 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 consacrée à la série pour connaître les options de configuration et obtenir un exemple 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 | Remarques |
|---|---|---|
type
|
'labels' | 'legend'
|
labels place des libellés pointant directement sur chaque tranche. 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 avec 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 | Remarques |
|---|---|---|
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>