Benutzerdefinierte Kurzinfos

Sie können die Kurzinfos anpassen, die angezeigt werden, wenn Nutzer den Mauszeiger auf Elemente in Looker-Visualisierungen bewegen. Mit benutzerdefinierten Kurzinfos können Sie mehr Kontext bereitstellen, zusätzliche Messwerte anzeigen und die Informationen anpassen, die Ihren Nutzern präsentiert werden. Mit der Visualisierungseinstellung Benutzerdefinierter Kurzinfo können Sie Kurzinfos im Visualisierungseditor für explorative Datenanalysen konfigurieren. Dazu verwenden Sie eine Kombination aus UI-Einstellungen und einem HTML-Editor, der Liquid-Vorlagen unterstützt.

Auf dieser Seite finden Sie eine Anleitung zum Aktivieren und Verwenden der Visualisierungseinstellung Benutzerdefinierte Kurzinfos in Ihrer Looker-Instanz (Original). Diese Seite enthält die folgenden Abschnitte:

Nutzer- und Instanzanforderungen

Damit Sie auf die Visualisierungseinstellung Benutzerdefinierte Kurzinfos zugreifen können, müssen die folgenden Voraussetzungen erfüllt sein:

  • Auf Ihrer Looker (Original)-Instanz muss Looker 26.4 oder höher ausgeführt werden.
  • Wenn Sie benutzerdefinierte Kurzinfos in Explores erstellen möchten, benötigen Sie die Berechtigung explore und Zugriff auf das zugrunde liegende LookML-Modell.

Beschränkungen

Für die Vorschaufunktion Benutzerdefinierte Kurzinfos gelten die folgenden Einschränkungen:

Benutzerdefinierte Kurzinfos verwenden

Wenn Sie die erforderlichen Berechtigungen haben, können Sie die Kurzinfo für eine Reihe in Ihrer Explore-Visualisierung anpassen. Gehen Sie dazu so vor:

  1. Öffnen oder erstellen Sie eine Explore-Abfrage und wählen Sie einen unterstützten Visualisierungstyp aus.
  2. Klicken Sie auf dem Tab Visualisierung unter „Erkunden“ auf Bearbeiten, um den Visualisierungseditor zu öffnen.
  3. Klicken Sie auf den Tab Buchreihe.
  4. Suchen Sie im Bereich Anpassungen nach der Reihe, der Sie die Kurzinfo hinzufügen möchten. Wenn es mehrere Reihen gibt, maximieren Sie die Reihe, der Sie eine Kurzinfo hinzufügen möchten.
  5. Klicken Sie auf den Ein/Aus-Button Benutzerdefinierte Kurzinfo, um die Funktion für die jeweilige Reihe oder das jeweilige Diagramm zu aktivieren.
  6. Im Bereich Benutzerdefinierte Kurzinfo können Sie das grundlegende Erscheinungsbild der Kurzinfo mit den verfügbaren Optionen anpassen:
    • Schriftgröße: Legt die Schriftgröße der Kurzinfo fest.
    • Schriftfamilie: Legt die Schriftfamilie der Quickinfo-Schriftart fest.
    • Rahmenradius: Legt fest, wie stark die Ecken des Tooltips abgerundet werden. Je höher die Zahl, desto runder die Tooltip-Kanten.
    • Schatten: Legt den Schatten des Tooltip-Felds fest.
    • Schriftfarbe: Legt die Schriftfarbe der Kurzinfo fest.
    • Hintergrundfarbe: Legt die Hintergrundfarbe des Tooltips fest.
    • Rahmenfarbe: Legt die Rahmenfarbe des Tooltips fest.
    • Textausrichtung: Legt die Ausrichtung der Schriftart für den Kurzinfo-Text fest. Wählen Sie Links ausrichten, Zentriert ausrichten oder Rechts ausrichten aus. Links ausrichten ist die Standardeinstellung.
  7. Zusätzlich oder alternativ zu den vorherigen Optionen können Sie erweiterte Formatierungsoptionen anwenden, indem Sie auf Tooltip-Inhalt bearbeiten klicken, um den HTML-Editor Tooltip-Inhalt bearbeiten zu öffnen.

  8. Im Editor Tooltip-Inhalt bearbeiten können Sie HTML und Liquid-Variablen verwenden, um den Tooltip zu strukturieren und mit Inhalten zu füllen.

    • Verwenden Sie Standard-HTML-Tags, um die Quickinfo-Inhalte zu formatieren (z. B. <div>, <span>, <strong>, <table>,<ul>, <ol>). Das gerenderte HTML unterliegt den HTML-Bereinigungsregeln von Looker.
    • Möglicherweise werden nicht alle Liquid-Variablen für benutzerdefinierte Kurzinfos unterstützt.

  9. Während Sie den benutzerdefinierten Kurzinfo-Inhalt bearbeiten, können Sie eine Vorschau der Kurzinfo aufrufen, indem Sie auf Vorschau klicken (oder die Tastenkombination „Befehlstaste + Return“ für Mac oder „Strg + Eingabetaste“ für PC verwenden) und den Mauszeiger auf die Datenpunkte im Vorschaufenster der Visualisierung bewegen.

  10. Klicken Sie im HTML-Editor auf Speichern und speichern Sie dann den Explore-Bericht als Look oder als Dashboard-Kachel, um die Änderungen beizubehalten.

Beispiele

Die folgenden Beispiele veranschaulichen Anwendungsfälle für verschiedene Stufen der Tooltip-Anpassung:

Benutzerdefinierte Kurzinfo mit mehreren Messwerten

Benutzerdefinierte Kurzinfos können hilfreich sein, wenn Sie Nutzern mehr Kontext zu einem Datenpunkt in einer Visualisierung geben möchten. In einem Diagramm mit einem einzelnen Wert wird beispielsweise nur der Wert einer Messung angezeigt. Mit einer benutzerdefinierten Kurzinfo können Sie mehr Daten präsentieren und Nutzern so mehr Kontext zu den Daten im Diagramm bieten.

In diesem Beispiel wird in einem Diagramm mit einem einzelnen Wert mit dem Titel „Anzahl der Bestellungen im Jahr 2025“ der Wert für Orders Count für das Users Country „USA“ angezeigt. Das Diagramm basiert auf einer Explore-Abfrage, die auch Order Items Count enthält. Der Wert für Order Items Count wird jedoch nicht im Diagramm angezeigt.

Der folgende HTML-Code wird im Editor Tooltip-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben. Damit wird der Inhalt so festgelegt, dass der Wert Anzahl der Artikel in der Bestellung im Kurzinfo enthalten ist:

<div style="padding: 5px; font-family: Arial, sans-serif; font-size: 13px;">
  <div>
    <strong>Order Items Count:</strong> {{ order_items.count }}
  </div>
  <div>
    <strong>Orders Count:</strong> {{ orders.count }}
  </div>
</div>

In der Kurzinfo für das Einzelwertdiagramm „Anzahl der Bestellungen“ wird der Wert „Anzahl der Bestellartikel“ von 54.340 € und der Wert „Anzahl der Bestellungen“ von 39.189 angezeigt.

Nutzer können die Werte für beide Felder, Anzahl der Bestellungen und Anzahl der Bestellartikel, sehen und erhalten so mehr Kontext für die Daten, die im Diagramm dargestellt werden.

Benutzerdefinierte Kurzinfo mit ausgeblendeten Werten in Tabellenform

Wie auf dieser Seite unter Einschränkungen beschrieben, können benutzerdefinierte Kurzinfos nur auf Felder verweisen, die in einer Explore-Abfrage enthalten sind. Möglicherweise möchten Sie jedoch nicht alle Felder im Diagramm darstellen. Mit einem benutzerdefinierten Kurzinfo-Fenster können Sie Nutzern Daten aus Feldern präsentieren, die in Visualisierungen ausgeblendet sind, ohne sie in ein Diagramm einzufügen.

In diesem Beispiel enthält eine Explore-Datentabelle die Messwerte Anzahl der Bestellungen und Anzahl der Bestellpositionen, gruppiert nach den Dimensionen Nutzerstatus und Bestellstatus. Der Entwickler möchte Nutzern eine kleine Tabelle präsentieren und blendet die Felder Bestellstatus und Anzahl der Artikel in der Bestellung aus dem Tabellendiagramm aus. Der Entwickler möchte jedoch, dass Nutzer die Werte Bestellstatus und Anzahl der Bestellartikel sehen, die mit einer bestimmten Anzahl der Bestellungen verknüpft sind.

Der folgende HTML-Code wird im Editor Tooltip-Inhalte bearbeiten für die Reihe Anzahl der Bestellungen eingegeben. Damit wird festgelegt, dass die Werte für Bestellstatus und Anzahl der Artikel in der Bestellung im Tooltip als Tabelle dargestellt werden:

<div>
    <div>
        <table border="1">
          <!-- Table Body -->
          <tbody>
            <!-- Row 1 -->
            <tr>
              <td>
                <strong>Order status</strong>
              </td>
              <td>
                {{ orders.status }}
              </td>
            </tr>
            <!-- Row 2 -->
            <tr>
              <td>
                <strong>State</strong>
              </td>
              <td>
                {{ users.state }}
              </td>
            </tr>
            <!-- Row 3 -->
            <tr>
              <td>
                <strong>Count of orders</strong>
              </td>
              <td>
                {{ orders.count }}
              </td>
            </tr>
            <!-- Row 4 -->
            <tr>
              <td>
                <strong>Count of order items</strong>
              </td>
              <td>
                {{ order_items.count }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

In einem Kurzinfo-Fenster für den Wert „Anzahl der Bestellungen“ in einem Tabellendiagramm werden die Werte für „Nutzerstatus“, „Bestellstatus“, „Anzahl der Bestellungen“ und „Anzahl der Bestellpositionen“ in einer zweispaltigen Tabelle angezeigt.

Nutzer können alle Daten der Explore-Abfrage sehen, ohne die zusätzlichen Felder, die im Tabellendiagramm angezeigt werden.

Benutzerdefinierter Kurzinfo-Text mit gängigen Liquid-Funktionen

Benutzerdefinierte Kurzinfos unterstützen gängige Liquid-Funktionen wie Piping und Downcast-Anweisungen. In diesem Beispiel wird ein Säulendiagramm mit Anzahl der Bestellungen gruppiert nach Bestellstatus angezeigt. Der Entwickler möchte die Kurzinfo so formatieren, dass Nutzer den Unterschied zwischen der Anzahl der Bestellungen für den Bestellstatus „ABGEBROCHEN“ und „ABGESCHLOSSEN“ schnell erkennen können.

Der folgende HTML- und Liquid-Code wird im Editor Tooltip-Inhalte bearbeiten für die Reihe Anzahl der Bestellungen eingegeben. Damit wird der Tooltip-Wert für Bestellungen mit dem Status „CANCELLED“ (Abgebrochen) rot und für Bestellungen mit dem Status „COMPLETED“ (Abgeschlossen) grün dargestellt. Im Code werden eine Variablendefinition und Pipes verwendet, um die Richtigkeit des Strings zu gewährleisten und die angegebene bedingte Formatierung anzuwenden:

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "completed" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

Der Wert Anzahl der Bestellungen für die Spalte Bestellstatus „ABGESCHLOSSEN“ wird in der Kurzinfo in grüner Schrift angezeigt.

In einem Kurzinfo-Fenster wird der Wert „Anzahl der Bestellungen“ in der Spalte „Status der ABGESCHLOSSENEN Bestellungen“ grün angezeigt.

Der Wert Anzahl der Bestellungen für die Spalte Bestellstatus „ABGEBROCHEN“ wird in der Kurzinfo in roter Schrift angezeigt.

In einem Kurzinfo-Fenster wird der Wert „Anzahl der Bestellungen“ in der Spalte „Status der ABGESCHLOSSENEN Bestellungen“ grün angezeigt.

Nutzer können im Säulendiagramm schnell zwischen stornierten und abgeschlossenen Bestellungen unterscheiden.