Tabellen mit Visualisierungs- und Abfrageeigenschaften

Visualization

Diese Komponente ruft die Daten und die Konfiguration aus dem Abfragekontext ab und rendert die entsprechende Visualisierung. Sie können Breite und Höhe anpassen, indem Sie numerische Pixelwerte an diese Eigenschaften übergeben.

Attribut	Werte	Hinweise
width	Anzahl (in Pixeln)	Standardmäßig 100 %, wenn „prop“ nicht definiert ist.
height	Anzahl (in Pixeln)	Standardeinstellung: 500 Pixel, wenn Objekt nicht definiert ist.
chartTypeMap	Schlüssel/Wert-Objekt	Hier wird ein Schlüssel/Wert-Objekt akzeptiert, das definiert, welche Komponente gerendert werden soll, wenn das Adaptersystem bestimmte Werte für den Diagrammtyp erkennt. 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 wird in unsere JavaScript API eingebunden, um den Anfrage-/Antwortzyklus zu verarbeiten und eine Abfrageantwort anhand der Abfrage-ID oder des qid-Werts abzurufen. Sie können Überschreibungen von Visualisierungskonfigurationen übergeben, die mit der API-Antwort zusammengeführt werden sollen, und alle Daten in den React-Kontext laden lassen.

Attribut	Werte	Hinweise
query	Zahl | String	Es kann entweder die Query.client_id, die in der URL eines Explores nach der qid-Eigenschaft (3fdrdE0b3ATltUvXBaSOPN) kommt, oder eine numerische Abfrage-ID (1234) sein. Wenn Sie Zugriff auf die numerische Abfrage-ID haben, kann durch Ausgangspunkt dieses Werts eine zusätzliche Serveranfrage gespart werden. 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, kann ab diesem Wert eine zusätzliche Serveranfrage gespeichert werden. dashboard akzeptiert nicht die String-IDs von LookML-Dashboards. Query akzeptiert entweder das Attribut query oder das Attribut dashboard, aber nicht beides.
config	Akzeptiert je nach type-Wert die folgenden Eigenschaften: type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axis Eine Liste der unterstützten Werte finden Sie weiter unten auf dieser Seite in der diagrammspezifischen Dokumentation.	Konfigurationseinstellungen für Diagramme festlegen und überschreiben
LoadingIndicator	Komponentenreferenz	Akzeptiert eine nicht bereitgestellte Komponentenreferenz. Standardwert: 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>

Flächendiagramm-Eigenschaften

Im Folgenden finden Sie die config-Eigenschaften für Flächendiagramme.

Attribut	Werte	Hinweise
type	'area'
legend	false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }	Legt die Position der Legende fest oder deaktiviert die Legende, indem sie auf false gesetzt wird. Standardwert: { position: 'bottom' }
positioning	'overlay' | 'stacked' | 'percent'	Diagrammstapelmodus. Standardwert: 'overlay'
render_null_values	boolean	Behandelt Nullwerte als 0. Standardwert: false
tooltips	boolean	Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardwert: true
series	Reihen im view_name.field_name-Format	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Serie.
x_axis	Konfiguration der X-Achse	Im Abschnitt X-Achse finden Sie Konfigurationsoptionen und Anwendungsbeispiele.
y_axis	Konfiguration der Y-Achse	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt y-Achse.

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

Das Attribut series kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.

Attribut	Werte	Hinweise
color	String	Hexadezimalcode
label	String
line_width	Zahl	Legen Sie die Linienstärke in Pixeln fest. Standardeinstellung: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	Punktform festlegen. Standardwert: 'circle'
style	'none' | 'filled' | 'outline'	Punktstil festlegen. Standard: '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 mehrere Achsen konfiguriert werden können.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Rasterlinien ein- oder ausblenden Standardwert: false
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der X-Achse gerendert werden soll. Standard: false (kein Label)
reversed	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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

Auch wenn unsere Diagramme derzeit nur eine einzelne y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass die Konfiguration mehrerer Achsen unterstützt wird.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false.
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standard: false (kein Label)
range	[Zahl (min.) | 'auto', Zahl (max.) | 'auto']	Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn Sie „min“ auf 'auto' festlegen, wird standardmäßig 0 verwendet. Wenn Sie „max“ auf 'auto' festlegen, wird standardmäßig der maximale Datenpunktwert im Satz verwendet. Standardeinstellung: ['auto' | 'auto']
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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	Hinweise
type	'bar' | 'column'
legend	false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }	Legt die Position der Legende fest oder deaktiviert sie, indem Sie sie auf false setzen. Standard: { position: 'bottom' }
positioning	'grouped' | 'stacked' | 'percent'	Diagramm-Stapelmodus 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	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Serie.
x_axis	Konfiguration der X-Achse	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt x-Achse.
y_axis	Konfiguration der Y-Achse	Im Abschnitt 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

Das Attribut series kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.

Attribut	Werte	Hinweise
color	String	Hexadezimalcode
label	String
visible	boolean	Sie können die Datenreihe 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 mehrere Achsen konfiguriert werden können.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false.
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der X-Achse gerendert werden soll. Standard: false (kein Label)
reversed	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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 mehrere Achsen konfiguriert werden können.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false.
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standard: false (kein Label)
range	[Zahl (min.) | 'auto', Zahl (max.) | 'auto']	Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn Sie „min“ auf „auto“ festlegen, wird standardmäßig „0“ verwendet. Wenn Sie „max“ auf „auto“ festlegen, wird standardmäßig der maximale Datenpunktwert im Satz verwendet. Standardeinstellung: ['auto' | 'auto'].
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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 finden Sie die config-Eigenschaften für Liniendiagramme.

Attribut	Werte	Hinweise
type	'line'
legend	false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }	Legt die Position der Legende fest oder deaktiviert sie, indem Sie sie auf false setzen. Standard: { position: 'bottom' }
render_null_values	boolean	Behandelt Nullwerte als 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	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Reihe.
x_axis	Konfiguration der X-Achse	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt x-Achse.
y_axis	Konfiguration der Y-Achse	Im Abschnitt 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

Für die Property series kann entweder ein Array von Serienkonfigurationen oder ein benanntes Objekt verwendet werden, das eine bestimmte Reihe in der Antwort überschreibt.

Attribut	Werte	Hinweise
color	String	Hexadezimalcode
label	String
line_width	Zahl	Legen Sie die Linienstärke in Pixeln fest. Standardeinstellung: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	Punktform festlegen. Standardwert: 'circle'
style	'none' | 'filled' | 'outline'	Punktstil festlegen. Standard: '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

Auch wenn unsere Diagramme derzeit nur eine einzelne X-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass die Konfiguration mehrerer Achsen unterstützt wird.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false.
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der X-Achse gerendert werden soll. Standard: false (kein Label)
reversed	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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 mehrere Achsen konfiguriert werden können.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Rasterlinien ein- oder ausblenden Standardwert: false
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standard: false (kein Label)
range	[Zahl (min.) | 'auto', Zahl (max.) | 'auto']	Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn Sie „min“ auf „auto“ festlegen, wird standardmäßig „0“ verwendet. Wenn Sie „max“ auf „auto“ festlegen, wird standardmäßig der maximale Datenpunktwert im Satz verwendet. Standardeinstellung: ['auto' | 'auto'].
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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	Hinweise
type	'scatter'
legend	false (zum Deaktivieren) ODER { position: 'left' | 'bottom' | 'right' | 'top' }	Legt die Position der Legende fest oder deaktiviert sie, indem Sie sie auf false setzen. Standard: { position: 'bottom' }
render_null_values	boolean	Behandelt Nullwerte als 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	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Serie.
x_axis	Konfiguration der X-Achse	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt x-Achse.
y_axis	Konfiguration der Y-Achse	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt y-Achse.

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

Das Attribut series kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.

Attribut	Werte	Hinweise
color	String	Hexadezimalcode
label	String
line_width	Zahl	Wird verwendet, um die Größe von Punkten in einem Streudiagramm festzulegen. Betrachten Sie sie als umrissenen Wert jedes Punkts. Standardwert: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	Punktform festlegen. Standardwert: 'circle'
style	'none' | 'filled' | 'outline'	Punktstil festlegen 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 mehrere Achsen konfiguriert werden können.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false.
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der X-Achse gerendert werden soll. Standard: false (kein Label)
reversed	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: false
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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

Auch wenn unsere Diagramme derzeit nur eine einzelne y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass die Konfiguration mehrerer Achsen unterstützt wird.

Attribut	Werte	Hinweise
gridlines	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: false.
label	false (Label ausblenden) | String (zu rendernder Wert)	Legt den Wert fest, der als Label der Y-Achse gerendert werden soll. Standard: false (kein Label)
range	[Zahl (min.) | 'auto', Zahl (max.) | 'auto']	Legt den Mindest- und Höchstwert der Y-Achse fest. Wenn Sie „min“ auf „auto“ festlegen, wird standardmäßig „0“ verwendet. Wenn Sie „max“ auf „auto“ festlegen, wird standardmäßig der maximale Datenpunktwert im Satz verwendet. Standardeinstellung: ['auto' | 'auto'].
values	boolean	Die entlang der Achse gerenderten Werte ein- oder ausblenden. 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-Properties für Einpunktdiagramme aufgeführt.

Attribut	Werte	Hinweise
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 finden Sie die config-Properties für Sparkline-Diagramme.

Attribut	Werte	Hinweise
type	'sparkline'
render_null_values	boolean	Nullwerte werden als 0 behandelt. Standardwert: false
series	Reihe im Format view_name.field_name	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Reihe.
y_axis	Konfiguration der Y-Achse	Im Abschnitt 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 Sparklines grundsätzlich nur eine Reihe unterstützen, verwenden wir ein API-Muster mit Überschreibungen für benannte oder Arrayserien, um mit den anderen Diagrammtypen in unserer Bibliothek konsistent zu bleiben.

Attribut	Werte	Hinweise
color	String	Hexadezimalcode
line_width	Zahl	Legen Sie die Linienbreite 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

Auch wenn unsere Diagramme derzeit nur eine einzelne y-Achse unterstützen, ist unsere API zukunftssicher und so strukturiert, dass die Konfiguration mehrerer Achsen unterstützt wird.

Attribut	Werte	Hinweise
range	[Zahl (Min.) | 'auto', Zahl (max.) | 'auto']	Legt den Mindest- und Höchstwert der Y-Achse fest. Min. auf "auto" einstellen Der Standardwert ist 0 und der Höchstwert wird auf „Automatisch“ festgelegt. verwendet standardmäßig den maximalen Datenpunktwert im Datensatz. 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 sind die config-Eigenschaften für Tabellendiagramme aufgeführt.

Attribut	Werte	Hinweise
type	'table'
series	Reihe im Format view_name.field_name	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Serie.
column_order	string[]	Ein Array von Reihennamen (z. B. 'orders.count'), das angibt, wie die Tabellenspalten von links nach rechts angeordnet werden sollen.
show_row_numbers	boolean	Anzeige der Summenzeile am unteren Rand der Tabelle ein-/ausblenden. Standardwert: true
show_totals	boolean	Sie können die Summenzeile unten in der Tabelle ein- und ausblenden. Standardwert: true
show_row_totals	boolean	Sie können die Anzeige der Zeilensummen rechts in der Tabelle ein- und ausschalten. Standardwert: true
truncate_text	boolean	Wenn true, ist der Text in Tabellenzelle auf eine einzelne Zeile beschränkt und der Inhaltsüberlauf wird mit Auslassungspunkten abgeschnitten. Bei false darf der Inhalt auf mehrere Zeilen umgebrochen werden. Standardeinstellung: true
truncate_header	boolean	Bei true sind Labels für Tabellenüberschriften auf eine Zeile beschränkt und überschüssiger Inhalt wird durch einen Auslassungspunkt abgeschnitten. Bei false dürfen die Überschriften auf 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

Das Attribut „Series“ kann entweder ein Array von Serienkonfigurationen oder ein benanntes Objekt akzeptieren, das eine bestimmte Reihe in Ihrer Antwort überschreibt.

Attribut	Werte	Hinweise
cell_visualization	boolean	Schaltet die Inline-Zellvisualisierung ein oder aus. Die Standardeinstellung ist true für die erste Messung 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 dargestellt werden sollen, ob die Gleitkommazahl oder Tausendertrennzeichen durch Kommas oder Punkte getrennt werden.

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-Properties für Kreisdiagramme.

Attribut	Werte	Hinweise
type	'pie'
legend	false (zum Deaktivieren) | Legendenkonfiguration	Mit der Einstellung false wird die Legende deaktiviert. Standardeinstellung: aktiviert. Im Abschnitt Legende finden Sie Konfigurationsoptionen und Beispiele für die Verwendung, wenn die Funktion aktiviert ist.
tooltips	boolean	Aktiviert oder deaktiviert Kurzinfos, die angezeigt werden, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardwert: true
series	Reihen im view_name.field_name-Format	Konfigurationsoptionen und Anwendungsbeispiele finden Sie im Abschnitt Serie.

Beispiel:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

Das Attribut legend kann die folgenden Legendenkonfigurationen akzeptieren:

Attribut	Werte	Hinweise
type	'labels' | 'legend'	labels platziert Labels, die direkt auf die einzelnen Segmente zeigen. Mit legend wird eine separate Legende eingefügt. 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, Prozent, Label und Prozent. 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	Hinweise
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>