Visualisierungen mit dem Diagramm-Konfigurationseditor anpassen

Mit dem Diagramm-Konfigurationseditor können Sie die Formatierungsoptionen für Looker-Visualisierungen anpassen, die die HighCharts API verwenden. Dazu gehören die meisten kartesischen Diagramme, z. B. Säulendiagramme, Balkendiagramme und Liniendiagramme.

Wenn Gemini-Funktionen in Looker aktiviert sind, können Sie mit dem Visualisierungsassistenten JSON-Formatierungsoptionen aus textbasierten Prompts generieren, um die Anpassung von Looker-Visualisierungen zu beschleunigen.

Vorbereitung

Zum Zugriff auf den Konfigurationseditor für Diagramme benötigen Sie die Berechtigung can_override_vis_config.

Visualisierung anpassen

So passen Sie eine Visualisierung mit dem Diagramm-Konfigurationseditor an:

  1. Sie können eine Visualisierung in einem Explore aufrufen oder eine Visualisierung in einem Look oder Dashboard bearbeiten.
  2. Öffnen Sie in der Visualisierung das Menü Bearbeiten.

  3. Klicken Sie auf dem Tab Plot auf die Schaltfläche Diagrammkonfiguration bearbeiten. In Looker wird das Dialogfeld Diagrammkonfiguration bearbeiten angezeigt.

    • Der Bereich Diagrammkonfiguration (Quelle) enthält das ursprüngliche JSON Ihrer Visualisierung und kann nicht bearbeitet werden.

    • Der Bereich Diagrammkonfiguration (Überschreiben) enthält das JSON-Objekt, mit dem das JSON-Objekt der Quelle überschrieben werden soll. Wenn Sie das Dialogfeld Diagrammkonfiguration bearbeiten zum ersten Mal öffnen, fügt Looker dem Bereich einige Standard-JSON-Daten hinzu. Sie können mit diesem JSON-Code beginnen oder ihn löschen und ein beliebiges gültiges HighCharts-JSON eingeben.

  4. Wählen Sie den Bereich Diagrammkonfiguration (Überschreiben) aus und geben Sie eine gültige HighCharts-JSON-Datei ein. Die neuen Werte überschreiben alle Werte im Abschnitt Diagrammkonfiguration (Quelle).

    • Im Abschnitt Beispiele finden Sie Beispiele für gültige HighCharts-JSON-Dateien.
    • In Looker sind alle gültigen JSON-Werte zulässig. In Looker sind keine Funktionen, Datumsangaben oder nicht definierten Werte zulässig.

  5. Klicken Sie auf <> (Code formatieren), damit Looker Ihr JSON-Format richtig formatiert.

  6. Klicken Sie auf Vorschau, um Ihre Änderungen zu testen.

  7. Klicken Sie auf Übernehmen, um die Änderungen zu übernehmen. Die Visualisierung wird mit den benutzerdefinierten JSON-Werten angezeigt.

Nachdem Sie die Visualisierung angepasst haben, können Sie sie speichern. Wenn Sie sich die Visualisierung in einem Explore angesehen haben, speichern Sie das Explore. Wenn Sie einen Look oder ein Dashboard bearbeitet haben, klicken Sie auf Speichern.

Wenn Sie versuchen, eine Vorschau von Code mit ungültigem JSON zu öffnen, wird in Looker die Fehlermeldung Invalid JSON detected angezeigt. Ungültigen JSON-Code können Sie mit der Option Code automatisch korrigieren unten im Bereich Diagrammkonfiguration (Überschreiben) bereinigen.

Wenn Sie die Standardvisualisierungsoptionen bearbeiten möchten, entfernen Sie zuerst alle Änderungen, die Sie im Diagramm-Konfigurationseditor vorgenommen haben, und ersetzen Sie sie dann später. Gehen Sie dazu so vor:

  1. Klicken Sie auf dem Tab Plot auf die Schaltfläche Diagrammkonfiguration bearbeiten. In Looker wird das Dialogfeld Diagrammkonfiguration bearbeiten angezeigt.
  2. Kopieren Sie den Text im Bereich Diagrammkonfiguration (Überschreiben).
  3. Klicken Sie auf die Schaltfläche Überschreibungen für Diagramme löschen, um alle Änderungen zu löschen.
  4. Klicken Sie auf Übernehmen.
  5. Bearbeiten Sie die Visualisierung mit den Standardoptionen.
  6. Klicken Sie auf dem Tab Plot auf die Schaltfläche Diagrammkonfiguration bearbeiten. In Looker wird das Dialogfeld Diagrammkonfiguration bearbeiten angezeigt.
  7. Geben Sie im Bereich Diagrammkonfiguration (Überschreiben) gültiges HighCharts-JSON ein. Sie können den Text, den Sie in Schritt 2 kopiert haben, als Vorlage verwenden. Testen Sie Ihre Änderungen jedoch mit der Schaltfläche Vorschau, um sicherzustellen, dass keine Konflikte auftreten.
  8. Klicken Sie auf Übernehmen.

Bedingte Formatierung mit series formatters

Der Diagramm-Konfigurationseditor akzeptiert die meisten gültigen HighCharts-JSON-Dateien. Außerdem wird das Attribut series formatters akzeptiert, das nur in Looker vorhanden ist. Jede Reihe kann mehrere Formatierungsoptionen haben, um verschiedene Stilregeln zu kombinieren.

Das Attribut series formatters akzeptiert zwei Attribute: select und style.

  • Geben Sie im Attribut select einen logischen Ausdruck ein, um anzugeben, welche Datenwerte formatiert werden sollen.
  • Geben Sie JSON-Code in das Attribut style ein, um anzugeben, wie die Datenwerte formatiert werden sollen.

Im folgenden JSON-Code wird beispielsweise jeder Datenwert orange eingefärbt, wenn er größer oder gleich 380 ist:

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

In den folgenden Abschnitten werden die möglichen Werte der Attribute select und style genauer beschrieben.

Das select-Attribut

Sie können die folgenden Werte in einem select-Ausdruck verwenden:

  • value: Diese Variable gibt den Wert der Reihe zurück. Sie können diesen Wert in Vergleichen verwenden, wie in den folgenden Beispielen:
  • max: Mit select: max können Sie das Targeting auf den Wert der Reihe mit dem höchsten Wert festlegen.
  • min: Verwenden Sie select: min, um den Wert der Reihe mit dem Minimum auszuwählen.
  • percent_rank: Diese Variable ist auf den Reihenwert mit einem bestimmten Prozentrang ausgerichtet. Mit select: percent_rank >= 0.9 können Sie beispielsweise das Targeting auf Werte in der 90. Perzentile festlegen.
  • name: Diese Variable gibt den Dimensionswert der Reihe zurück. Wenn Sie beispielsweise ein Diagramm mit den Bestellungen „Verkauft“, „Storniert“ und „Zurückgegeben“ haben, können Sie mit select: name = Sold die Reihe auswählen, bei der der Dimensionswert „Verkauft“ ist.
  • AND/OR Verwenden Sie AND und OR, um mehrere logische Ausdrücke zu kombinieren.

Eine Implementierung dieser Ausdrücke im Diagrammkonfigurationseditor finden Sie im Beispiel Höchst-, Mindest- und Perzentilwerte farblich hervorheben.

Das style-Attribut

Mit dem Attribut style können Stile angewendet werden, die von HighCharts unterstützt werden. So können Sie beispielsweise mit style.color die Werte von Datenreihen färben, mit style.borderColor die Rahmen von Datenreihen färben und mit style.borderWidth die Breite der Rahmen von Datenreihen festlegen. Eine vollständige Liste der Stiloptionen finden Sie in den Highcharts-Optionen für series.column.data.

Verwenden Sie für Linienvisualisierungen style.marker.fillColor und style.marker.lineColor anstelle von style.color. Eine vollständige Liste der Optionen für den Linienstil finden Sie in den Highcharts-Optionen für series.line.data.marker.

Eine Beispielkonfiguration für die Farbformatierung im Diagrammkonfigurationseditor finden Sie im Artikel Höchst-, Mindest- und Perzentilwerte farblich hervorheben.

Feldmetadaten

Im Drop-down-Menü Feldmetadaten können Sie den Namen der Reihe für jedes Feld in Ihrer Visualisierung kopieren. Sie können diesen Reihennamen verwenden, um mithilfe des Attributs series formatters Werte aus verschiedenen Reihen zu vergleichen. Ein Beispiel finden Sie im Abschnitt Farbreihe im Vergleich zu anderen Reihenwerten.

Beispiele

In den folgenden Abschnitten finden Sie Beispiele für einige gängige Anwendungsfälle des Diagramm-Konfigurationseditors. Eine vollständige Liste der Attribute, die Sie bearbeiten können, finden Sie in der HighCharts API-Dokumentation.

Hintergrundfarbe und Achsentextfarbe ändern

Mit dem Attribut chart.backgroundColor können Sie die Hintergrundfarbe einer Visualisierung ändern.

Mit den folgenden Attributen können Sie die Textfarbe der Achsen in einer Visualisierung ändern:

Im folgenden HighCharts-JSON-Code wird die Hintergrundfarbe der Visualisierung zu Lila und der Text der Achsentitel und ‑labels zu Weiß geändert.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

Farbe der Kurzinfo anpassen

Mit den folgenden Attributen können Sie die Farbe der Kurzinfo anpassen:

Im folgenden HighCharts-JSON-Code wird die Hintergrundfarbe des Kurzinfofelds zu Cyan und die Farbe des Kurzinfotexts zu Schwarz geändert.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

Inhalt und Stil von Kurzinfos anpassen

Verwenden Sie die folgenden Attribute, um den Inhalt der Kurzinfo anzupassen:

Im folgenden HighCharts-JSON-Code wird das Tooltip-Format so geändert, dass der Wert der X-Achse oben im Tooltip in einer größeren Schrift angezeigt wird, gefolgt von einer Liste aller Werte der Reihe an diesem Punkt.

In diesem Beispiel werden die folgenden HighCharts-Funktionen und -Variablen verwendet:

  • {key} ist eine Variable, die den X‑Achsenwert des ausgewählten Punkts zurückgibt. (in diesem Beispiel der Monat und das Jahr).
  • {#each points}{/each} ist eine Funktion, die den eingeschlossenen Code für jede Reihe im Diagramm wiederholt.
  • {series.name} ist eine Variable, die den Namen der Reihe zurückgibt.
  • {y:.2f} ist eine Variable, die den Wert der Y-Achse des ausgewählten Punkts auf zwei Dezimalstellen gerundet zurückgibt.
    • {y} ist eine Variable, die den Wert der Y-Achse des ausgewählten Punkts zurückgibt.
    • {variable:.2f} rundet variable auf zwei Dezimalstellen. Weitere Beispiele für die Formatierung von Werten finden Sie in der Highcharts-Dokumentation zu Vorlagen.
{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

Diagrammanmerkungen und -beschriftungen hinzufügen

Verwenden Sie das Attribut annotations, um eine Anmerkung hinzuzufügen. Verwenden Sie das Attribut caption, um dem Diagramm eine Bildunterschrift hinzuzufügen.

Wenn Sie die Koordinaten für einen Punkt abrufen möchten, klicken Sie oben im Dialogfeld Diagrammkonfiguration bearbeiten auf Punktmetadaten prüfen. Bewegen Sie den Mauszeiger dann auf den Datenpunkt, den Sie mit Anmerkungen versehen möchten. In Looker wird eine Punkt-ID angezeigt, die Sie im Attribut annotations.labels.point verwenden können.

Im folgenden HighCharts-JSON werden dem Diagramm zwei Anmerkungen hinzugefügt, um einen Rückgang der Inventarelemente nach bestimmten Zeiträumen zu erklären. Außerdem wird unten im Diagramm eine Bildunterschrift hinzugefügt, in der die Anmerkungen genauer erläutert werden.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

Dynamische Anmerkungen hinzufügen

Mit den Parametern annotationsSource und annotationsTarget können Sie auch Daten aus einem Feld als Anmerkung verwenden.

Die Feldnamen finden Sie im Drop-down-Menü Feldmetadaten. Das Feld annotationsTarget muss ein Messwert sein.

Im folgenden HighCharts-JSON-Code wird der Wert aus dem Feld orders.annotations als Anmerkung für das Feld orders.count verwendet:

{
  annotations: [{
    labels: [{
      annotationsSource: 'orders.annotations',
      annotationsTarget: 'orders.count'
    }]
  }]
}

Vertikale Referenzbereiche hinzufügen

Verwenden Sie das Attribut xAxis.plotBands, um einen vertikalen Referenzbereich hinzuzufügen.

Im folgenden HighCharts-JSON wird ein vertikaler Referenzbereich zwischen dem 24. November 2022 und dem 29. November 2022 hinzugefügt, um einen Sonderangebotszeitraum anzugeben. Außerdem wird unten im Diagramm eine Bildunterschrift hinzugefügt, in der die Bedeutung der Zone erläutert wird.

Die Attribute to und from von xAxis.plotBands müssen den Datenwerten im Diagramm entsprechen. Da die Daten in diesem Beispiel zeitbasiert sind, werden für die Attribute Unix-Zeitstempelwerte akzeptiert (1669680000000 für den 29. November 2022 und 1669248000000 für den 24. November 2022). Stringbasierte Datumsformate wie MM/TT/JJJJ und TT-MM-JJ werden in den HighCharts-Attributen to und from nicht unterstützt.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

Gepunktete und gestrichelte Linien hinzufügen

Mit dem Attribut series.dashStyle können Sie durchgezogene Linien in gepunktete oder gestrichelte Linien ändern.

Im folgenden HighCharts-JSON-Code wird das dashStyle-Attribut der Reihe Customers in eine gestrichelte Linie und das dashStyle-Attribut der Reihe Sales in eine gepunktete Linie geändert.

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

Höchst-, Mindest- und Prozentrangwerte einfärben

Auf der Seite Looker-Visualisierungen optimal nutzen: Bedingte Formatierung in kartesischen Diagrammen anpassen finden Sie ein ausführliches Beispiel zum Färben der Höchst-, Mindest- und Prozentrangwerte einer kartesischen Visualisierung.

Farbreihe im Vergleich zu anderen Reihenwerten

Ab Looker 25.0 können Sie mit dem Parameter formatters.select den aktuellen Datenwert mit Werten aus anderen Reihen vergleichen.

Angenommen, Sie haben eine Visualisierung, in der der durchschnittliche Sonderangebotspreis und der Medianwert des Sonderangebotspreises für mehrere Städte angezeigt werden. Im folgenden HighCharts-JSON-Code wird die Farbe des durchschnittlichen Sonderangebotspreises in Grün geändert, wenn er dem Medianwert des Sonderangebotspreises entspricht oder darüber liegt. Andernfalls wird die Farbe zu „Maroon“ geändert:

{
  chart: {},
  series: [{
    name: 'Average Sale Price',
    formatters: [{
        select: 'value >= order_items.median_sale_price',
        style: {
          color: 'green',
          dataLabels: {
            color: 'green'
          }
        }
      },
      {
        select: 'value < order_items.median_sale_price',
        style: {
          color: 'maroon',
          dataLabels: {
            color: 'maroon'
          }
        }
      }
    ]
  }, {
    name: 'Median Sale Price'
  }]
}

Beachten Sie, dass Zeile select: 'value >= order_items.median_sale_price' auf das Feld Medianer Sonderangebotspreis im Format VIEW_NAME.FIELD_NAME verweist. Wenn Sie diesen Feldwert direkt kopieren möchten, klicken Sie im Dialogfeld Diagrammkonfiguration bearbeiten auf das Drop-down-Menü Feldmetadaten und wählen Sie den Feldnamen aus.

Reihenwerte mit dem Mittelwert oder Medianwert vergleichen

Der Parameter formatters.select unterstützt das Keyword mean in Looker 25.0 und höher sowie das Keyword median in Looker 25.2 und höher. Mit diesen Keywords können Sie den aktuellen Datenwert mit dem arithmetischen Mittelwert oder dem Median der Reihe vergleichen.

Angenommen, Sie möchten eine Visualisierung erstellen, in der der Auftragsgewinn für jeden Monat des letzten Jahres dargestellt wird. Im folgenden HighCharts-JSON-Code wird die Farbe jedes Balkens in Grau (Hex-Code #aaa) geändert, wenn der Bestellgewinn unter dem durchschnittlichen Bestellgewinn liegt:

{
  chart: {},
  series: [{
    name: 'Order Profit',
    formatters: [{
      select: 'value < mean',
      style: {
        color: '#aaa'
      }
    }]
  }]
}

Wenn Sie den Reihenwert mit dem Median statt mit dem Mittelwert vergleichen möchten, ändern Sie die Zeile select: 'value < mean' in select: 'value < median'.

Konfigurationen mithilfe von Vorlagen speichern und freigeben

Sie können eine Konfiguration als Vorlage speichern, um sie in anderen Visualisierungen wiederzuverwenden oder als Ausgangspunkt für andere Nutzer freizugeben.

Vorlage speichern

Wenn Sie HighCharts-JSON im Diagramm-Konfigurationseditor bearbeiten, können Sie den Code als Vorlage speichern. Gehen Sie dazu so vor:

  1. Klicken Sie im Dialogfeld „Diagrammkonfigurationseditor“ auf Als Vorlage speichern.
  2. Geben Sie Ihrer Vorlage einen eindeutigen Namen.
  3. Geben Sie eine Beschreibung ein, die anderen Nutzern mitteilt, wozu Ihre Vorlage dient.
  4. Bearbeiten Sie den Code nach Bedarf und sehen Sie sich eine Vorschau an.
  5. Klicken Sie auf Speichern, um den Code zu bestätigen.
  6. Beheben Sie alle Validierungsfehler.
  7. Klicken Sie noch einmal auf Speichern, um die Vorlage zu speichern.

Beachten Sie beim Erstellen einer Vorlage Folgendes:

  • Einbettete Nutzer können keine Vorlagen erstellen, bearbeiten oder anwenden.
  • Alle Nutzer in Ihrer Instanz, die keine eingebetteten Nutzer sind und Zugriff auf den Editor für die Diagrammkonfiguration haben, können Ihre Vorlage sehen.
  • Nicht alle Vorlagen eignen sich für alle Visualisierungstypen. Geben Sie im Feld Beschreibung an, mit welchem Visualisierungstyp Ihre Vorlage verwendet werden soll.

Vorlage anwenden

Sie können eine Vorlage auf Ihre aktuelle Visualisierung anwenden. Beachten Sie beim Anwenden einer Vorlage Folgendes:

  • Wenn Sie eine Vorlage anwenden, wird der Code überschrieben, den Sie im Editor für die Diagrammkonfiguration geschrieben haben.
  • Nicht alle Vorlagen eignen sich für alle Visualisierungstypen. Wenn der Ersteller einer Vorlage beispielsweise Code für ein Balkendiagramm geschrieben hat, kann dieser Code auf ein Liniendiagramm andere Auswirkungen haben.

So wenden Sie eine Vorlage an:

  1. Klicken Sie im Dialogfeld „Diagrammkonfigurationseditor“ auf Gespeicherte Vorlagen.
  2. Klicken Sie auf eine Vorlage und dann auf Vorlage anwenden.
  3. Klicken Sie auf Weiter.

Die Vorlage wird in Looker angewendet und Sie können im Editor für Diagramm-Konfigurationen weitere Änderungen vornehmen.

So löschen Sie eine Vorlage:

So löschen Sie eine Vorlage:

  1. Klicken Sie im Dialogfeld „Diagrammkonfigurationseditor“ auf Gespeicherte Vorlagen.
  2. Klicken Sie auf das Dreipunkt-Menü neben der Vorlage, die Sie löschen möchten.
  3. Klicken Sie auf Löschen.

Wenn Sie mit den Änderungen fertig sind, klicken Sie im Dialogfeld „Gespeicherte Vorlagen“ auf das X, um zum Dialogfeld „Editor für Diagramm-Konfigurationen“ zurückzukehren.

Vorlage bearbeiten

So bearbeiten Sie eine Vorlage:

  1. Klicken Sie im Dialogfeld „Diagrammkonfigurationseditor“ auf Gespeicherte Vorlagen.
  2. Klicken Sie auf das Dreipunkt-Menü neben der Vorlage, die Sie bearbeiten möchten.
  3. Klicken Sie auf Bearbeiten.
  4. Wenn Sie alle Änderungen vorgenommen haben, klicken Sie auf Speichern.

Neue Visualisierungstypen erstellen

Mit dem Diagramm-Konfigurationseditor können Sie Visualisierungstypen erstellen, die nicht zu den Standardvisualisierungstypen von Looker gehören. In den folgenden Artikeln finden Sie Beispiele für einige der Visualisierungen, die Sie mit dem Diagramm-Konfigurationseditor erstellen können: