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

Dynamisches Dashboardbild mit Liquid und HTML erstellen

Sie können Bilder zu Looker-Dashboards hinzufügen, indem Sie eine Bild-URL in einer Markdown-Textkachel hartcodieren. Bilder in Textkacheln sind jedoch statisch und werden nicht anhand der Ergebnisse aktualisiert. Wie können Sie vorgehen, wenn Sie möchten, dass sich ein Dashboard-Bild basierend auf einem vom Nutzer ausgewählten Filterwert dynamisch ändert?

Auf dieser Seite mit Best Practices wird gezeigt, wie Sie mit Liquid und dem Parameter html ein dynamisches Dashboardbild erstellen.

Die Lösung

Die folgende Lösung basiert auf einem E-Commerce-Dataset, das das Feld users.state enthält, das die Zustände in einem hypothetischen E-Commerce-Dataset darstellt:

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

Angenommen, Sie möchten das Bild der Flagge eines Bundesstaates auf einem Dashboard anzeigen, das basierend auf dem Status aktualisiert wird, nach dem der Benutzer die Dashboard-Ergebnisse filtert.

Zum Erstellen des dynamischen Dashboardbilds sind drei Schritte erforderlich:

Erstellen Sie eine Bilddimension in LookML.
Erstellen Sie eine Dashboard-Kachel mit dynamischen Bildern.
Fügen Sie Dashboard-Filter hinzu und abschließende Anpassungen.

Schritt 1: Bilddimension in LookML erstellen

So erstellen Sie eine Bildabmessung in LookML:

Rufen Sie zuerst das Projekt und die Ansichtsdatei auf, die die Dimension enthält, der Sie Bilder hinzufügen möchten. Erstellen Sie dann basierend auf diesem Feld eine neue Dimension, insbesondere für die Anzeige der Bilder.

Fügen Sie einen html-Parameter für jeden Wert hinzu, für den Sie ein Bild anzeigen möchten, um eine bedingte {% dynamic if %}-Anweisung für Liquid mit der Variable value zu definieren.

Die folgende Dimension state_flag_image legt beispielsweise eine Bedingung für die Anzeige der angegebenen Bilder (mit html <img> -Tags) fest, wenn der Wert von state "California", "New York", "Colorado" oder "Illinois" ist. Für alle anderen Bundesstaaten können Sie das Symbol "Kein Bild verfügbar" anzeigen:

      dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% dynamic if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% dynamic else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% dynamic endif %} ;;
      }

Erstellen Sie eine Wertbedingung für jeden Wert, für den ein Bild angezeigt werden soll. Alternativ können Sie ein dynamisches Bildfeld mit der Liquid-Variable value erstellen, wie im Communitybeitrag Bilder zu Visualisierungen hinzufügen beschrieben.

Als Nächstes können Sie eine Dashboardkachel für die Bilddimension erstellen.

Schritt 2: Dashboard-Kachel mit dynamischen Bildern erstellen

Nachdem Sie nun die Bilddimension (state_flag_image) erstellt haben, können Sie ein Explore erstellen, das zur Dashboardkachel für dynamische Bilder wird.

Erstellen Sie Ihr Explore anhand der folgenden Kriterien:

Fügen Sie einen Filter für die ursprüngliche Dimension hinzu (in diesem Fall state). Legen Sie den Filter auf einen beliebigen Wert fest. Die Statusmarkierung zeigt in diesem Fall das Bild „Kein Bild verfügbar“ an, da kein bestimmter Filterwert ausgewählt wurde. Dieser Filterwert wird entsprechend der Auswahl des Benutzers für den Dashboard-Filter aktualisiert.
Wählen Sie die Bildabmessung (in diesem Fall state_flag_image) sowie alle anderen Dimensionen aus, die für die Abfrage zur Bestimmung des Bildes erforderlich sein könnten. Wenn Sie beispielsweise ein Datum einbeziehen möchten, können Sie auch ein Datum angeben.
Ändern Sie das Zeilenlimit in eine Zeile.
Ändern Sie den Visualisierungstyp in Visualisierung mit einem einzelnen Wert und blenden Sie alle anderen Spalten mit Ausnahme der Bilddimension (state_flag_image) aus.

Im Explore wird das erste Bildergebnis in der Einzelwertvisualisierung im Bereich Visualisierung angezeigt. Das Anzeigebild ändert sich je nach Filterwert, den der Nutzer im letzten Dashboard auswählt:

Speichern Sie das Explore in einem Dashboard als Kachel.

Schritt 3: Dashboard-Filter und letzte Schliffe hinzufügen

Nun müssen Sie dem Dashboard Dashboard-Filter hinzufügen. Die Filter im Dashboard aktualisieren den Filter im Explore, um das angezeigte Bild je nach Benutzerauswahl zu ändern.

Erstellen Sie den Filter im Bearbeitungsmodus des Dashboards:

Öffnen Sie das Fenster „Filter hinzufügen“.
Wählen Sie das Feld aus, nach dem gefiltert werden soll. Das Filterfeld sollte die Dimension enthalten, auf der die Bildabmessung basiert. In diesem Beispiel lautet das Feld für den Filter state.
Wählen Sie auf dem Tab Zu aktualisierende Kacheln die Bildkachel aus Schritt 2 aus.
Wählen Sie die ursprüngliche Dimension (in diesem Fall state) im Drop-down-Menü Zu filterndes Feld aus.
Passen Sie den Filter nach Bedarf an. Wenn Sie die Option Erweiterte Filterwerte auswählen, müssen Sie die Option Mehrere Filterwerte zulassen deaktivieren, die automatisch für die Steuerelementoption Erweitert aktiviert ist.

Jetzt wird die Bildkachel mit der Auswahl des Benutzerfilters aktualisiert.

Filtert ein Nutzer nach „Kalifornien“, werden im Dashboard die Flagge und die Daten für den Bundesstaat Kalifornien angezeigt:

Wenn ein Nutzer nach „Colorado“ filtert, werden im Dashboard die Flagge und die Daten für den Bundesstaat Colorado angezeigt: