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, die Ihren Nutzern präsentiert werden, anpassen. Mit der Visualisierungseinstellung Benutzerdefinierter Kurzinfo können Sie Kurzinfos im Visualisierungseditor für Explore 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:

Anforderungen an Nutzer und Instanzen

Damit Sie auf die Visualisierungseinstellung Benutzerdefinierte Kurzinfos zugreifen können, müssen Sie die folgenden Anforderungen erfüllen:

  • 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 entsprechenden Berechtigungen haben, können Sie die Kurzinfo für eine Reihe in Ihrer Explore-Visualisierung anpassen. So passen Sie den Kurzinfo-Text an:

  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 Schalter Benutzerdefinierter 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 folgenden 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 des Tooltips fest.
    • Hintergrundfarbe: Legt die Hintergrundfarbe des Tooltips fest.
    • Rahmenfarbe: Legt die Rahmenfarbe des Kurzinfos fest.
    • Textausrichtung: Hiermit wird die Ausrichtung der Quickinfo-Schriftart festgelegt. 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 Daten 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 Inhalt des benutzerdefinierten Kurzinfos bearbeiten, können Sie eine Vorschau des Kurzinfos aufrufen, indem Sie auf Vorschau klicken (oder die Tastenkombination „Befehlstaste + Eingabetaste“ 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 Anpassung von Kurzinfos:

Benutzerdefinierte Kurzinfo mit mehreren Messwertwerten

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 Kennzahl angezeigt. Mit einer benutzerdefinierten Kurzinfo können Sie mehr Daten präsentieren und Ihren Nutzern mehr Kontext zu den Daten im Diagramm bieten.

In diesem Beispiel wird in einem Einzelwertdiagramm mit dem Titel „Anzahl der Bestellungen im Jahr 2025“ der Wert für Anzahl der Bestellungen für das Land der Nutzer „USA“ angezeigt. Das Diagramm basiert auf einer Explore-Abfrage, die auch Anzahl der Artikel in Bestellungen enthält. Der Wert für Anzahl der Bestellpositionen 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 angezeigt 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 Explore-Felder in einem 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 Bestellartikel, gruppiert nach den Dimensionen Bundesstaat der Nutzer und Bestellstatus. Der Entwickler möchte Nutzern eine kleine Tabelle präsentieren und blendet die Felder Bestellstatus und Anzahl der Bestellpositionen aus dem Tabellendiagramm aus. Der Entwickler möchte jedoch, dass Nutzer die Werte Orders Status (Bestellstatus) und Order Items Count (Anzahl der Bestellartikel) sehen, die mit einer bestimmten Orders Count (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 Inhalte die Werte für Bestellstatus und Anzahl der Artikel in der Bestellung in der Kurzinfo enthalten sollen, strukturiert als Tabelle:

<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 Bestellartikel“ 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 die Verwendung von Downcast-Anweisungen. In diesem Beispiel wird ein Säulendiagramm mit der Anzahl der Bestellungen angezeigt, gruppiert nach Bestellstatus. Der Entwickler möchte das Kurzinfo so formatieren, dass Nutzer den Unterschied zwischen der Anzahl der Bestellungen für den Bestellstatus „ABGEBROCHEN“ und den Bestellstatus „ABGESCHLOSSEN“ schnell erkennen können.

Der folgende HTML- und Liquid-Code wird im Editor Tooltip-Inhalt bearbeiten für die Reihe Anzahl der Bestellungen eingegeben. Damit wird festgelegt, dass der Tooltip-Wert für Bestellungen mit dem Status „ABGEBROCHEN“ rot und für Bestellungen mit dem Status „ABGESCHLOSSEN“ grün angezeigt wird. Im Code werden eine Variablenausgabe und Piping 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 rotem Text 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.