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é | Values | Remarques |
---|---|---|
width
|
nombre (en pixels) | Valeur par défaut de 100 % lorsque la propriété est non définie. |
height
|
nombre (en pixels) | 500 px par défaut lorsque l'objet prop n'est pas défini. |
chartTypeMap
|
objet clé-valeur | Accepte un objet clé/valeur qui définit le composant à afficher lorsque le système d'adaptateur rencontre des valeurs de type de graphique spécifiques. Vous pouvez l'utiliser 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 de requête/réponse et récupérer une réponse de requête par ID de requête ou valeur qid
. Vous pouvez transmettre des remplacements de configuration Vis à fusionner avec la réponse de l'API et charger toutes les données dans le contexte React.
Propriété | Values | Remarques |
---|---|---|
query
|
numéro | chaîne | Peut accepter soit Query.client_id , qui vient après la propriété qid dans l'URL d'une exploration, (3fdrdE0b3ATltUvXBaSOPN ), soit 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 | Accepte un ID de tableau de bord numérique (1234 ). Si vous avez accès à l'ID numérique du tableau de bord, 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 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 Pour connaître les valeurs acceptées, consultez la documentation spécifique à un graphique plus loin sur cette page.
|
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 later on this page */
}}
LoadingIndicator={ProgressCircular}
>
<Visualization />
</Query>
Propriétés des graphiques en aires
Voici les propriétés config
des graphiques en surface.
Propriété | Values | 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 .Valeur par défaut : { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Mode d'empilement des graphiques. Valeur par défaut : 'overlay'
|
render_null_values
|
booléen | Traite les valeurs nulles comme 0. Valeur par défaut : false
|
tooltips
|
booléen | Activez ou désactivez les info-bulles qui s'affichent lorsque vous pointez sur des points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
Configuration de l'axe X | Consultez la section consacrée à l'axe des abscisses pour connaître les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe Y | Consultez la section Axe Y pour connaître les options de configuration et un exemple 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érie ou un objet nommé remplaçant une série spécifique dans votre réponse.
Propriété | Values | Remarques |
---|---|---|
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éfinissez la forme du point. Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définir 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
Même si nos graphiques n'acceptent actuellement qu'une seule axe X, notre API est conçue pour l'avenir et est structurée pour permettre la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer les lignes de grille verticales. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | chaîne (valeur à afficher)
|
Définit la valeur à afficher comme étiquette de l'axe X. 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 | Afficher ou masquer 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
Même si nos graphiques ne prennent actuellement en charge qu'un seul axe Y, notre API est évolutive et est structurée pour permettre la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer le quadrillage vertical Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher en tant qu'étiquette de l'axe Y. Par défaut : false (aucune étiquette)
|
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' , la valeur par défaut est 0, et la valeur max sur 'auto' correspond à la valeur de point de données maximale de l'ensemble. Par défaut, ['auto' | 'auto'] .
|
values
|
booléen | Afficher ou masquer 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
des graphiques à barres et à colonnes.
Propriété | Values | 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 des graphiques. Valeur par défaut : 'overlay'
|
tooltips
|
booléen | Activez ou désactivez les info-bulles qui s'affichent lorsque vous pointez sur des points de données.Valeur par défaut : true
|
series
|
séries au format view_name.field_name
|
Consultez la section série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
Configuration de l'axe X | Consultez la section Axe X pour connaître les options de configuration et un exemple d'utilisation. |
y_axis
|
configuration de l'axe Y | Consultez la section Axe Y pour connaître les options de configuration et un exemple 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érie ou un objet nommé remplaçant une série spécifique dans votre réponse.
Propriété | Values | 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 actuellement qu'un seul axe des abscisses, notre API est parée pour l'avenir et est structurée de façon à pouvoir configurer plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer le quadrillage vertical Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher comme étiquette de l'axe X. 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 | Afficher ou masquer 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
Même si nos graphiques ne prennent actuellement en charge qu'un seul axe Y, notre API est conçue pour l'avenir et est structurée pour permettre la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer le quadrillage vertical Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher en tant qu'étiquette de l'axe Y. Par défaut : false (aucune étiquette)
|
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", elle est définie par défaut sur 0. Si vous définissez la valeur maximale sur "auto", elle est définie par défaut sur la valeur maximale du point de données de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
booléen | Afficher ou masquer 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é | Values | 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 | Traite les valeurs nulles comme 0. Valeur par défaut : false
|
tooltips
|
booléen | Activez ou désactivez les info-bulles qui s'affichent lorsque vous pointez sur des points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section série pour connaître les options de configuration et obtenir un exemple d'utilisation. |
x_axis
|
Configuration de l'axe X | Consultez la section consacrée à l'axe des abscisses pour connaître les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe Y | Consultez la section sur l'axe des ordonnées pour connaître les options de configuration et obtenir 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é | Values | Remarques |
---|---|---|
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éfinissez la forme du point. Valeur par défaut : 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Définir 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
Même si nos graphiques n'acceptent actuellement qu'une seule axe X, notre API est conçue pour l'avenir et est structurée pour permettre la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer le quadrillage vertical Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher comme étiquette de l'axe X. 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 | Afficher ou masquer 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 actuellement qu'un seul axe des ordonnées, notre API est évolutive et sa structure est compatible avec la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer les lignes de grille verticales. Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher en tant qu'étiquette de l'axe Y. Par défaut : false (aucune étiquette)
|
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", elle est définie par défaut sur 0. Si vous définissez la valeur maximale sur "auto", elle est définie par défaut sur la valeur maximale du point de données de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
booléen | Afficher ou masquer 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 des graphiques à nuage de points
Voici les propriétés config
pour les graphiques en nuage de points.
Propriété | Values | 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 | Traite les valeurs nulles comme 0. Valeur par défaut : false
|
tooltips
|
booléen | Activez ou désactivez les info-bulles qui s'affichent lorsque vous pointez sur des points de données. Valeur par défaut : true
|
series
|
séries au format view_name.field_name
|
Consultez la section Séries pour obtenir des options de configuration et des exemples d'utilisation. |
x_axis
|
Configuration de l'axe X | Consultez la section consacrée à l'axe des abscisses pour connaître les options de configuration et obtenir des exemples d'utilisation. |
y_axis
|
configuration de l'axe Y | Consultez la section Axe Y pour connaître les options de configuration et un exemple 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é | Values | Remarques |
---|---|---|
color
|
chaîne | Code hexadécimal |
label
|
chaîne | |
line_width
|
Nombre | Permet de définir la taille des points dans un nuage de points. Considérez-la comme la valeur générale 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 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. Définissez 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 actuellement qu'un seul axe des abscisses, notre API est parée pour l'avenir et est structurée de façon à pouvoir configurer plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer le quadrillage vertical Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher comme étiquette de l'axe X. 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 | Afficher ou masquer 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 actuellement qu'un seul axe des ordonnées, notre API est évolutive et sa structure est compatible avec la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
gridlines
|
booléen | Afficher ou masquer le quadrillage vertical Valeur par défaut : false
|
label
|
false (pour masquer le libellé) | string (valeur à afficher)
|
Définit la valeur à afficher en tant qu'étiquette de l'axe Y. Par défaut : false (aucune étiquette)
|
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", elle est définie par défaut sur 0. Si vous définissez la valeur maximale sur "auto", elle est définie par défaut sur la valeur maximale du point de données de l'ensemble. Valeur par défaut : ['auto' | 'auto']
|
values
|
booléen | Afficher ou masquer 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é | Values | 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
des graphiques sparkline.
Propriété | Values | Remarques |
---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
booléen | Traite les valeurs nulles comme 0. Valeur par défaut : false
|
series
|
séries au format view_name.field_name
|
Consultez la section Séries pour obtenir des options de configuration et 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 obtenir 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 les graphiques sparkline ne prennent en charge qu'une seule série par nature, nous maintenons 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é | Values | 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
Même si nos graphiques ne prennent actuellement en charge qu'un seul axe Y, notre API est conçue pour l'avenir et est structurée pour permettre la configuration de plusieurs axes.
Propriété | Values | Remarques |
---|---|---|
range
|
[nombre (min) | 'auto' , nombre (max) | 'auto' |
Définit les valeurs minimale et maximale de l'axe Y. Min. sur "auto" la valeur par défaut est 0 et la valeur maximale est définie sur "auto" la valeur par défaut est la valeur de point de données maximale 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 des tableaux
Vous trouverez ci-dessous les propriétés config
pour les tableaux.
Propriété | Values | Remarques |
---|---|---|
type
|
'table'
|
|
series
|
séries au format view_name.field_name
|
Consultez la section Séries pour obtenir des options de configuration et des exemples d'utilisation. |
column_order
|
string[]
|
Tableau de noms de séries (par exemple, 'orders.count' ) indiquant l'ordre dans lequel vous souhaitez que les colonnes du tableau soient triées de gauche à droite.
|
show_row_numbers
|
boolean
|
Activer/Désactiver l'affichage de la ligne des totaux en bas du tableau. Valeur par défaut : true
|
show_totals
|
boolean
|
Activer/Désactiver 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 ligne à 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épassement de contenu est tronqué avec des points de suspension. Lorsque la valeur est false , le contenu peut être mis en 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é | Values | 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 utilisée pour afficher la visualisation des cellules de la table. |
value_format
|
string
|
Chaîne de mise en forme numérique 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 circulaires.
Propriété | Values | Remarques |
---|---|---|
type
|
'pie'
|
|
legend
|
false (pour désactiver) | configuration de la légende
|
Si la valeur est false , la légende est désactivée. Par défaut: activé. Consultez la section Légende pour connaître les options de configuration et un exemple d'utilisation lorsque cette fonctionnalité est activée.
|
tooltips
|
booléen | Activez ou désactivez les info-bulles qui s'affichent lorsque vous pointez sur des points de données. Valeur par défaut : true
|
series
|
série au format view_name.field_name
|
Consultez la section Séries pour obtenir des options de configuration et 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é | Values | Remarques |
---|---|---|
type
|
'labels' | 'legend'
|
labels place des libellés pointant directement vers 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 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 diagramme circulaire est traité comme une nouvelle série:
Propriété | Values | 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>