Beachten Sie, dass Sie sich gerade die Looker-Dokumentation ansehen. Die Looker Studio-Dokumentation finden Sie unter https://support.google.com/looker-studio.

Visualisierungs- und Abfrageattributtabellen

`Visualization`

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

Attribut	Werte	Hinweise
`width`	Zahl (in Pixeln)	Der Standardwert ist 100 %, wenn das Attribut nicht definiert ist.
`height`	Zahl (in Pixeln)	Der Standardwert ist 500 px, 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 Diagrammwerte 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 lässt sich in unsere JavaScript API einbinden, um den Anfrage-/Antwortzyklus zu verarbeiten und eine Abfrageantwort anhand der Abfrage-ID oder des qid-Werts abzurufen. Sie können vis config-Überschreibungen weitergeben, die mit der API-Antwort zusammengeführt werden. Dadurch werden alle Daten in den React-Kontext geladen.

Attribut	Werte	Hinweise
`query`	Zahl \| String	Akzeptiert entweder die `Query.client_id`, die auf die `qid`-Property in einer URL für die explorative Datenanalyse folgt (`3fdrdE0b3ATltUvXBaSOPN`), oder eine numerische Abfrage-ID (`1234`). Wenn du Zugriff auf die numerische Abfrage-ID hast, kannst du ab diesem Wert eine zusätzliche Serveranfrage speichern. `Query` akzeptiert entweder das `query`- oder das `dashboard`-Attribut, aber nicht beide.
`dashboard`	Zahl	Numerische Dashboard-ID (`1234`) kann akzeptiert werden. Wenn Sie Zugriff auf die numerische Dashboard-ID haben, können Sie ab diesem Wert eine zusätzliche Serveranfrage speichern. `dashboard` akzeptiert nicht die String-IDs von LookML-Dashboards. `Query` akzeptiert entweder das `query`- oder das `dashboard`-Attribut, aber nicht beide.
`config`	Abhängig vom Wert `type` werden die folgenden Eigenschaften akzeptiert: `type`, `legend`, `positioning`, `render_null_values`, `tooltips`, `series`, `x_axis`, `y_axis` Die unterstützten Werte finden Sie weiter unten auf dieser Seite.	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 below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Eigenschaften des Flächendiagramms

Im Folgenden sind die config-Eigenschaften für Flächendiagramme aufgeführt.

Attribut	Werte	Hinweise
`type`	`'area'`
`legend`	`false` (zum Deaktivieren) ODER `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Legt die Position der Legende fest oder deaktiviert sie durch Festlegen auf `false`. Standardeinstellung: `{ position: 'bottom' }`
`positioning`	`'overlay' \| 'stacked' \| 'percent'`	Diagramm mit Stapelmodus Standardwert: `'overlay'`
`render_null_values`	boolean	Behandelt Nullwerte als 0. Standardwert: `false`
`tooltips`	boolean	Aktivieren oder deaktivieren Sie Kurzinfos, die angezeigt werden, wenn Sie den Mauszeiger auf Datenpunkte bewegen. Standardwert: `true`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.
`x_axis`	x-Achsenkonfiguration	Im Abschnitt x-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.
`y_axis`	y-Achsenkonfiguration	Im Abschnitt y-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.

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 in Ihrer Antwort akzeptieren.

Attribut	Werte	Hinweise
`color`	String	Hexadezimalcode
`label`	String
`line_width`	Zahl	Linienbreite als Pixelbreite festlegen Standard: 3
`shape`	`'circle' \| 'diamond' \| 'square' \| 'triangle' \| 'triangle-down'`	Punktform festlegen. Standardwert: `'circle'`
`style`	`'none' \| 'filled' \| 'outline'`	Punktstil festlegen Standardeinstellung: `'none'` (Punkte deaktiviert)
`visible`	boolean	Datenreihe 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardwert: `false`
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als Label für die X-Achse gerendert werden soll. Standardeinstellung: `false` (kein Label)
`reversed`	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: `false`
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: `false`.
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als y-Achsenlabel 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 Sie den Mindestwert auf `'auto'` setzen, wird der Standardwert 0 verwendet und für den Maximalwert `'auto'`, der Standardwert des Datensatzes. Standardeinstellung: `['auto' \| 'auto']`
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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 für Balken- und Säulendiagramme

Im Folgenden sehen Sie die config-Eigenschaften für Balken- und Säulendiagramme.

Attribut	Werte	Hinweise
`type`	`'bar' \| 'column'`
`legend`	`false` (zum Deaktivieren) ODER `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Legt die Legendenposition fest oder deaktiviert sie durch Festlegen auf `false`. Standard: `{ position: 'bottom' }`
`positioning`	`'grouped' \| 'stacked' \| 'percent'`	Diagramm mit Stapelmodus Standardwert: `'overlay'`
`tooltips`	boolean	Aktiviere oder deaktiviere Kurzinfos, wenn der Mauszeiger auf Datenpunkte bewegt wird. Standardeinstellung: `true`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.
`x_axis`	x-Achsenkonfiguration	Im Abschnitt x-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.
`y_axis`	y-Achsenkonfiguration	Im Abschnitt y-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.

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 in Ihrer Antwort akzeptieren.

Attribut	Werte	Hinweise
`color`	String	Hexadezimalcode
`label`	String
`visible`	boolean	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 sie die Konfiguration mehrerer Achsen unterstützt.

Attribut	Werte	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: `false`.
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als Label für die X-Achse gerendert werden soll. Standardeinstellung: `false` (kein Label)
`reversed`	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: `false`
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: `false`.
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als y-Achsenlabel 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 Sie „min“ auf „auto“ setzen, wird standardmäßig „0“ verwendet. Wenn „max“ auf „auto“ gesetzt ist, wird der maximale Datenpunktwert im Datensatz festgelegt. Standardeinstellung: `['auto' \| 'auto']`.
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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	Hinweise
`type`	`'line'`
`legend`	`false` (zum Deaktivieren) ODER `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Legt die Legendenposition fest oder deaktiviert sie durch Festlegen auf `false`. Standard: `{ position: 'bottom' }`
`render_null_values`	boolean	Behandelt Nullwerte als 0. Standardwert: `false`
`tooltips`	boolean	Aktivieren oder deaktivieren Sie Kurzinfos, die angezeigt werden, wenn Sie den Mauszeiger auf Datenpunkte bewegen. Standardwert: `true`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.
`x_axis`	x-Achsenkonfiguration	Im Abschnitt x-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.
`y_axis`	y-Achsenkonfiguration	Im Abschnitt y-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.

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`

Das Attribut series kann entweder ein Array von Reihenkonfigurationen oder ein benanntes Objekt in Ihrer Antwort akzeptieren.

Attribut	Werte	Hinweise
`color`	String	Hexadezimalcode
`label`	String
`line_width`	Zahl	Linienbreite als Pixelbreite festlegen Standard: 3
`shape`	`'circle' \| 'diamond' \| 'square' \| 'triangle' \| 'triangle-down'`	Punktform festlegen. Standardwert: `'circle'`
`style`	`'none' \| 'filled' \| 'outline'`	Punktstil festlegen Standardeinstellung: `'none'` (Punkte deaktiviert)
`visible`	boolean	Datenreihe 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: `false`.
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als Label für die X-Achse gerendert werden soll. Standardeinstellung: `false` (kein Label)
`reversed`	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: `false`
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardwert: `false`
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als y-Achsenlabel 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 Sie „min“ auf „auto“ setzen, wird standardmäßig „0“ verwendet. Wenn „max“ auf „auto“ gesetzt ist, wird der maximale Datenpunktwert im Datensatz festgelegt. Standardeinstellung: `['auto' \| 'auto']`.
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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>

Streudiagramm-Eigenschaften

Im Folgenden sehen Sie die config-Eigenschaften für Streudiagramme.

Attribut	Werte	Hinweise
`type`	`'scatter'`
`legend`	`false` (zum Deaktivieren) ODER `{ position: 'left' \| 'bottom' \| 'right' \| 'top' }`	Legt die Legendenposition fest oder deaktiviert sie durch Festlegen auf `false`. Standard: `{ position: 'bottom' }`
`render_null_values`	boolean	Behandelt Nullwerte als 0. Standardwert: `false`
`tooltips`	boolean	Aktivieren oder deaktivieren Sie Kurzinfos, die angezeigt werden, wenn Sie den Mauszeiger auf Datenpunkte bewegen. Standardwert: `true`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.
`x_axis`	x-Achsenkonfiguration	Im Abschnitt x-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.
`y_axis`	y-Achsenkonfiguration	Im Abschnitt y-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.

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 in Ihrer Antwort akzeptieren.

Attribut	Werte	Hinweise
`color`	String	Hexadezimalcode
`label`	String
`line_width`	Zahl	Dient zum Festlegen der Größe der Punkte in einem Streudiagramm. Betrachte ihn als allgemeinen Wert für jeden Punkt. 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 Zugangspunkte kalibriert werden soll. Legen Sie `false` fest, um die dynamische Punktgröße zu deaktivieren. Standard: `false`
`visible`	boolean	Datenreihe 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: `false`.
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als Label für die X-Achse gerendert werden soll. Standardeinstellung: `false` (kein Label)
`reversed`	boolean	Kehrt die Reihenfolge der Datenpunkte um. Standardwert: `false`
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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	Hinweise
`gridlines`	boolean	Vertikale Gitternetzlinien ein- oder ausblenden Standardeinstellung: `false`.
`label`	`false` (zum Ausblenden des Labels) \| String (Wert, der gerendert werden soll)	Legt den Wert fest, der als y-Achsenlabel 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 Sie „min“ auf „auto“ setzen, wird standardmäßig „0“ verwendet. Wenn „max“ auf „auto“ gesetzt ist, wird der maximale Datenpunktwert im Datensatz festgelegt. Standardeinstellung: `['auto' \| 'auto']`.
`values`	boolean	Werte ein- oder ausblenden, die auf der Achse gerendert werden. 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 des Diagramms mit einem Wert

Im Folgenden sind die config-Properties für Einzelwertdiagramme 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 des Sparkline-Diagramms

Im Folgenden sind die config-Eigenschaften für Sparkline-Diagramme aufgeführt.

Attribut	Werte	Hinweise
`type`	`'sparkline'`
`render_null_values`	boolean	Behandelt Nullwerte als 0. Standardwert: `false`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.
`y_axis`	y-Achsenkonfiguration	Im Abschnitt y-Achse finden Sie Konfigurationsoptionen und Beispielverwendung.

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, verwenden wir ein API-Muster, das benannte oder Array-Serienüberschreibungen umfasst, um den anderen Diagrammtypen in unserer Bibliothek gerecht zu werden.

Attribut	Werte	Hinweise
`color`	String	Hexadezimalcode
`line_width`	Zahl	Linienbreite als Pixelbreite festlegen 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	Hinweise
`range`	[Zahl (min) \| `'auto'`, Zahl (max.) \| `'auto']`	Legt den Mindest- und Höchstwert der y-Achse fest. Wenn Sie „min“ auf „auto“ setzen, wird standardmäßig „0“ verwendet. Wenn „max“ auf „auto“ gesetzt ist, wird der maximale Datenpunktwert im Datensatz festgelegt. Standardeinstellung: `['auto' \| 'auto']`.

Beispiel:

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

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

Eigenschaften für Tabellendiagramme

Im Folgenden sind die config-Attribute für Tabellendiagramme aufgeführt.

Attribut	Werte	Hinweise
`type`	`'table'`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.
`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`	Zwischen der Summenzeile am Ende der Tabelle wechseln Standardwert: `true`
`show_totals`	`boolean`	Zwischen der Summenzeile am Ende der Tabelle wechseln Standardwert: `true`
`show_row_totals`	`boolean`	Rechts in der Tabelle können Sie die Summe der Zeilen ein- oder ausblenden. Standardwert: `true`
`truncate_text`	`boolean`	Wenn `true`, ist der Zellentext der Tabelle auf eine einzelne Zeile beschränkt und der Content-Überlauf wird mit Auslassungspunkten abgeschnitten. Bei `false` darf der Inhalt in mehreren Zeilen stehen. Standardeinstellung: `true`
`truncate_header`	`boolean`	Wenn `true`, sind die Überschriften der Tabellen auf eine einzelne Zeile beschränkt und der Content-Überlauf wird mit Auslassungspunkten abgeschnitten. Wenn `false`, können die Anzeigentitel in mehreren 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 in Ihrer Antwort akzeptieren.

Attribut	Werte	Hinweise
`cell_visualization`	`boolean`	Schaltet die Inline-Zellenvisualisierung ein oder aus. Die Standardeinstellung für die erste Messung ist `true` und für alle anderen `false`.
`color`	`string`	Geben Sie die Farbe an, die zum Rendern der Visualisierung der Tabellenzelle verwendet wird.
`value_format`	`string`	Ein Zahlenformatierungs-String, der angibt, ob Werte als Währung oder die Gleitkommagenauigkeit gerendert werden sollen, ob Kommas oder Punkte zur Trennung von Tausenden 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>

Kreisdiagramme

Im Folgenden sehen Sie die config-Eigenschaften für Kreisdiagramme.

Attribut	Werte	Hinweise
`type`	`'pie'`
`legend`	`false` (zum Deaktivieren) \| Legendenkonfiguration	Wenn Sie `false` festlegen, wird die Legende deaktiviert. Standardeinstellung: aktiviert. Im Abschnitt Legende finden Sie Konfigurationsoptionen und die Beispielnutzung, wenn die Option aktiviert ist.
`tooltips`	boolean	Aktivieren oder deaktivieren Sie Kurzinfos, die angezeigt werden, wenn Sie den Mauszeiger auf Datenpunkte bewegen. Standardwert: `true`
`series`	Buchreihe im `view_name.field_name`-Format	Im Abschnitt series finden Sie Konfigurationsoptionen und Beispielverwendung.

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 jedes Segment verweisen. `legend` platziert eine separate Legende. Standardeinstellung: `'legend'`
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	Legen Sie die Legende fest, wenn `type: 'legend'`. Standard: `'right'`
`width`	Zahl	Maximale Breite der Legende in Pixeln, wenn `type: 'legend'`. Standard: `300`
`value`	`'label' \| 'label_value' \| 'value' \| 'percent' \| 'label_percent'`	Legt den Legendeninhalt fest: Label, Label und Wert, Wert, Prozent, 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	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>