Visualization
Diese Komponente übernimmt die Daten und die Konfiguration aus dem Abfragekontext und rendert die entsprechende Visualisierung. Sie können die Breite und Höhe anpassen, indem Sie numerische Pixelwerte an diese Eigenschaften übergeben.
Attribut | Werte | Notes |
---|---|---|
width
|
Zahl (in Pixel) | Standardeinstellung 100 %, wenn das Attribut nicht definiert ist. |
height
|
Zahl (in Pixel) | Standardeinstellung 500 Pixel, wenn das Attribut nicht definiert ist. |
chartTypeMap
|
Schlüssel/Wert-Objekt | Akzeptiert ein Schlüssel/Wert-Objekt, das definiert, welche Komponente gerendert werden soll, wenn das Adaptersystem bestimmte Werte des Diagrammtyps erkennt. Diese Option kann verwendet werden, um die Standarddiagramme von Looker zu überschreiben oder dem Adaptersystem neue Diagrammtypen hinzuzufügen. |
Beispiel:
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
lässt sich in unsere JavaScript API einbinden, um den Anfrage-/Antwort-Zyklus zu verarbeiten und eine Abfrageantwort anhand der Abfrage-ID oder des qid
-Werts abzurufen. Sie können Überschreibungen von Visa-Konfigurationen so übergeben, dass sie mit der API-Antwort zusammengeführt werden. Alle Daten werden dann in den React-Kontext geladen.
Attribut | Werte | Notes |
---|---|---|
query
|
Zahl | String | Akzeptiert entweder das Query.client_id , das in der URL eines Explores nach dem Attribut qid folgt, (3fdrdE0b3ATltUvXBaSOPN ) oder eine numerische Abfrage-ID (1234 ). Wenn Sie Zugriff auf die numerische Abfrage-ID haben, können Sie ausgehend von diesem Wert eine weitere Serveranfrage speichern.Query akzeptiert entweder das Attribut query oder das Attribut dashboard , aber nicht beides.
|
dashboard
|
Zahl | Akzeptiert eine numerische Dashboard-ID (1234 ). Wenn Sie Zugriff auf die numerische Dashboard-ID haben, können Sie ab diesem Wert eine weitere Serveranfrage speichern.dashboard akzeptiert keine String-IDs von LookML-Dashboards.Query akzeptiert entweder das Attribut query oder das Attribut dashboard , aber nicht beides.
|
config
|
Je nach type -Wert werden die folgenden Attribute akzeptiert:type , legend , positioning , render_null_values , tooltips , series , x_axis , y_axis Unterstützte Werte finden Sie in der diagrammspezifischen Dokumentation weiter unten auf dieser Seite.
|
Konfigurationseinstellungen für Diagramme festlegen und überschreiben |
LoadingIndicator
|
Komponentenreferenz | Akzeptiert einen Verweis auf eine nicht bereitgestellte Komponente. Standardwert: ProgressCircular
|
import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'
<Query
query='12345'
config={{
/* specific properties described below */
}}
LoadingIndicator={ProgressCircular}
>
<Visualization />
</Query>
Eigenschaften von Flächendiagrammen
Im Folgenden finden Sie die config
-Eigenschaften für Flächendiagramme.
Attribut | Werte | Notes |
---|---|---|
type
|
'area'
|
|
legend
|
false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }
|
Legt die Position der Legende fest oder deaktiviert die Legende durch Festlegen von false .Standardwert: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Diagrammstapelmodus Standardwert: 'overlay'
|
render_null_values
|
boolean | Verarbeitet Nullwerte wie 0. Standardwert: false
|
tooltips
|
boolean | Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardwert: true
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
x_axis
|
Konfiguration der X-Achse | Im Abschnitt zur x-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
y_axis
|
Konfiguration der y-Achse | Im Abschnitt zur Y-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
Beispiel:
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
Die Eigenschaft series
kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.
Attribut | Werte | Notes |
---|---|---|
color
|
String | Hexadezimalcode |
label
|
String | |
line_width
|
Zahl | Legen Sie die Strichbreite in Pixeln fest. Standardeinstellung: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Punktform festlegen. Standardwert: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Setpunktstil. Standardeinstellung: 'none' (Punkte deaktiviert)
|
visible
|
boolean | Datenreihen ein- oder ausblenden Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige x-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardwert: false
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der x-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
reversed
|
boolean | Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true |
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige Y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false .
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
range
|
[Zahl (Min.) | 'auto' , Zahl (max.) | 'auto' |
Legt den Mindest- und Höchstwert der Y-Achse fest. Wird „Min.“ auf 'auto' gesetzt, ist die Standardeinstellung 0. Wenn „Max“ auf 'auto' gesetzt wird, entspricht die Standardeinstellung dem maximalen Datenpunktwert in der Gruppe. Standardeinstellung: ['auto' | 'auto']
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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>
Eigenschaften von Balken- und Säulendiagrammen
Im Folgenden sind die config
-Eigenschaften für Balken- und Säulendiagramme aufgeführt.
Attribut | Werte | Notes |
---|---|---|
type
|
'bar' | 'column'
|
|
legend
|
false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }
|
Legt die Position der Legende fest oder deaktiviert die Legende durch Festlegen von false . Standard: { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Diagrammstapelmodus Standardwert: 'overlay'
|
tooltips
|
boolean | Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird.Standardwert: true
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
x_axis
|
Konfiguration der X-Achse | Im Abschnitt zur x-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
y_axis
|
Konfiguration der y-Achse | Im Abschnitt zur Y-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
legend: { position: 'left' },
positioning: 'stacked',
tooltips: true,
}}
>
<Visualization />
</Query>
series
Die Eigenschaft series
kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.
Attribut | Werte | Notes |
---|---|---|
color
|
String | Hexadezimalcode |
label
|
String | |
visible
|
boolean | Datenreihen ein- oder ausblenden Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige x-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false .
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der x-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
reversed
|
boolean | Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige Y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false .
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
range
|
[Zahl (Min.) | 'auto' , Zahl (max.) | 'auto' |
Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn „Min.“ auf „auto“ gesetzt wird, wird standardmäßig der Wert „0“ festgelegt, bei „Max“ auf „auto“ der Wert des maximalen Datenpunkts. Standardeinstellung: ['auto' | 'auto'] .
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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>
Eigenschaften von Liniendiagrammen
Im Folgenden sind die config
-Eigenschaften für Liniendiagramme aufgeführt.
Attribut | Werte | Notes |
---|---|---|
type
|
'line'
|
|
legend
|
false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }
|
Legt die Position der Legende fest oder deaktiviert die Legende durch Festlegen von false . Standard: { position: 'bottom' }
|
render_null_values
|
boolean | Verarbeitet Nullwerte wie 0. Standardwert: false
|
tooltips
|
boolean | Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardwert: true
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
x_axis
|
Konfiguration der X-Achse | Im Abschnitt zur x-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
y_axis
|
Konfiguration der y-Achse | Im Abschnitt zur Y-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
Die Eigenschaft series
kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.
Attribut | Werte | Notes |
---|---|---|
color
|
String | Hexadezimalcode |
label
|
String | |
line_width
|
Zahl | Legen Sie die Strichbreite in Pixeln fest. Standardeinstellung: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Punktform festlegen. Standardwert: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Setpunktstil. Standardeinstellung: 'none' (Punkte deaktiviert)
|
visible
|
boolean | Datenreihen ein- oder ausblenden Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige x-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false .
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der x-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
reversed
|
boolean | Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige Y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardwert: false
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
range
|
[Zahl (Min.) | 'auto' , Zahl (max.) | 'auto' |
Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn „Min.“ auf „auto“ gesetzt wird, wird standardmäßig der Wert „0“ festgelegt, bei „Max“ auf „auto“ der Wert des maximalen Datenpunkts. Standardeinstellung: ['auto' | 'auto'] .
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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>
Eigenschaften von Streudiagrammen
Im Folgenden sind die config
-Eigenschaften für Streudiagramme aufgeführt.
Attribut | Werte | Notes |
---|---|---|
type
|
'scatter'
|
|
legend
|
false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }
|
Legt die Position der Legende fest oder deaktiviert die Legende durch Festlegen von false . Standard: { position: 'bottom' }
|
render_null_values
|
boolean | Verarbeitet Nullwerte wie 0. Standardwert: false
|
tooltips
|
boolean | Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardwert: true
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
x_axis
|
Konfiguration der X-Achse | Im Abschnitt zur x-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
y_axis
|
Konfiguration der y-Achse | Im Abschnitt zur Y-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
Die Eigenschaft series
kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.
Attribut | Werte | Notes |
---|---|---|
color
|
String | Hexadezimalcode |
label
|
String | |
line_width
|
Zahl | Hiermit wird die Größe der Punkte in einem Streudiagramm festgelegt. Stellen Sie sich dies als den Umrisswert jedes Punkts vor. Standardwert: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Punktform festlegen. Standardwert: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Setpunktstil. Standardeinstellung: 'none' (Punkte deaktiviert)
|
size_by
|
false | String
|
Name der Reihe, für die die Größe der einzelnen Punkte kalibriert werden soll. Legen Sie false fest, um die dynamische Punktgröße zu deaktivieren. Standard: false
|
visible
|
boolean | Datenreihen ein- oder ausblenden Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige x-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false .
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der x-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
reversed
|
boolean | Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige Y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
gridlines
|
boolean | Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false .
|
label
|
false (zum Ausblenden des Labels) | String (zu rendernder Wert)
|
Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standardeinstellung: false (kein Label)
|
range
|
[Zahl (Min.) | 'auto' , Zahl (max.) | 'auto' |
Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn „Min.“ auf „auto“ gesetzt wird, wird standardmäßig der Wert „0“ festgelegt, bei „Max“ auf „auto“ der Wert des maximalen Datenpunkts. Standardeinstellung: ['auto' | 'auto'] .
|
values
|
boolean | Blenden Sie die entlang der Achse gerenderten Werte ein oder aus. Standardwert: true
|
Beispiel:
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>
Eigenschaften von Einzelwertdiagrammen
Im Folgenden sind die config
-Eigenschaften für Diagramme mit Einzelwerten aufgeführt.
Attribut | Werte | Notes |
---|---|---|
type
|
'single_value'
|
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query query='12345' config={{ type: 'single_value' }}>
<Visualization />
</Query>
Eigenschaften von Sparkline-Diagrammen
Im Folgenden sind die config
-Eigenschaften für Sparkline-Diagramme aufgeführt.
Attribut | Werte | Notes |
---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
boolean | Verarbeitet Nullwerte wie 0. Standardwert: false
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
y_axis
|
Konfiguration der y-Achse | Im Abschnitt zur Y-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Obwohl Sparkline grundsätzlich nur eine einzelne Reihe unterstützt, pflegen wir ein API-Muster mit benannten oder Array-Serien-Überschreibungen, um mit den anderen Diagrammtypen in unserer Bibliothek konsistent zu bleiben.
Attribut | Werte | Notes |
---|---|---|
color
|
String | Hexadezimalcode |
line_width
|
Zahl | Legen Sie die Strichbreite in Pixeln fest. Standardwert: 3
|
Beispiel:
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
Obwohl unsere Diagramme derzeit nur eine einzige Y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass sie die Konfiguration mehrerer Achsen unterstützt.
Attribut | Werte | Notes |
---|---|---|
range
|
[Zahl (Min.) | 'auto' , Zahl (max.) | 'auto' |
Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn „Min.“ auf „auto“ gesetzt wird, wird standardmäßig der Wert „0“ festgelegt, bei „Max“ auf „auto“ der Wert des maximalen Datenpunkts. Standardeinstellung: ['auto' | 'auto'] .
|
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'sparkline',
y_axis: [
{ range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Eigenschaften von Tabellendiagrammen
Im Folgenden finden Sie die config
-Eigenschaften für Tabellendiagramme.
Attribut | Werte | Notes |
---|---|---|
type
|
'table'
|
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
column_order
|
string[]
|
Ein Array von Reihennamen, z. B. 'orders.count' , die angeben, wie die Tabellenspalten von links nach rechts angeordnet werden sollen.
|
show_row_numbers
|
boolean
|
Sie können die Anzeige der Zeile mit den Gesamtsummen am unteren Rand der Tabelle ein-/ausschalten. Standardwert: true
|
show_totals
|
boolean
|
Sie können die Anzeige der Zeile mit den Gesamtsummen am unteren Rand der Tabelle ein-/ausblenden. Standardwert: true
|
show_row_totals
|
boolean
|
Wechselt die Anzeige der Zeilensummen auf der rechten Seite der Tabelle. Standardwert: true
|
truncate_text
|
boolean
|
Bei true wird der Text der Tabellenzellen auf eine einzelne Zeile beschränkt und der Inhaltsüberlauf wird mit Auslassungspunkten abgeschnitten. Wenn false , darf der Inhalt in mehrere Zeilen umgebrochen werden. Standardeinstellung: true
|
truncate_header
|
boolean
|
Bei true sind die Labels der Kopfzeilen auf eine einzelne Zeile beschränkt und der Inhaltsüberlauf wird mit Auslassungspunkten abgeschnitten. Bei false dürfen die Header in mehrere Zeilen umgebrochen werden. Standardeinstellung: true
|
Beispiel:
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
Die Reiheneigenschaft kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt annehmen, das eine bestimmte Reihe in Ihrer Antwort überschreibt.
Attribut | Werte | Notes |
---|---|---|
cell_visualization
|
boolean
|
Schaltet die Inline-Zellvisualisierung ein oder aus. Die Standardeinstellung ist true für den ersten Messwert und false für die anderen.
|
color
|
string
|
Geben Sie die Farbe an, die zum Rendern der Visualisierung der Tabellenzelle verwendet wird. |
value_format
|
string
|
Ein Zahlenformatstring, der angibt, ob Werte als Währung gerendert werden, wie die Gleitkommagenauigkeit ist, ob Kommas oder Punkte zum Trennen Tausender Punkte verwendet werden sollen usw. |
Beispiel:
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>
Eigenschaften von Kreisdiagrammen
Im Folgenden finden Sie die config
-Eigenschaften für Kreisdiagramme.
Attribut | Werte | Notes |
---|---|---|
type
|
'pie'
|
|
legend
|
false (zum Deaktivieren) | Legendenkonfiguration
|
Wenn Sie false festlegen, wird die Legende deaktiviert. Standardeinstellung: aktiviert. Im Abschnitt Legende finden Sie Konfigurationsoptionen und Anwendungsbeispiele (falls aktiviert).
|
tooltips
|
boolean | Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardwert: true
|
series
|
Reihe im Format view_name.field_name
|
Im Abschnitt Series finden Sie Konfigurationsoptionen und Anwendungsbeispiele. |
Beispiel:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: false,
tooltips: true,
}}
>
<Visualization />
</Query>
legend
Für das Attribut legend
können die folgenden Legendenkonfigurationen verwendet werden:
Attribut | Werte | Notes |
---|---|---|
type
|
'labels' | 'legend'
|
labels platziert Labels, die direkt auf die einzelnen Segmente verweisen. legend platziert eine separate Legende. Standardeinstellung: 'legend'
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Positionieren Sie die Legende, wenn type: 'legend' . Standard: 'right'
|
width
|
Zahl | Maximale Breite der Legende in Pixeln bei type: 'legend' . Standard: 300
|
value
|
'label' | 'label_value' | 'value' | 'percent' | 'label_percent'
|
Legt den Inhalt der Legende fest: Label, Label und Wert, Wert, Prozentsatz, Label und Prozentsatz. Standardwert: 'label_percent'
|
Beispiel:
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
Im Gegensatz zu kartesischen Diagrammen wird jeder Datenpunkt in einem Kreisdiagramm als neue Reihe behandelt:
Attribut | Werte | Notes |
---|---|---|
color
|
String | Hexadezimalcode |
Beispiel:
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>