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

Diese Seite wurde von der Cloud Translation API übersetzt.

Visualisierungen mit dem Diagrammkonfigurationseditor 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 wie das Säulendiagramm, das Balkendiagramm und das Liniendiagramm.

Vorbereitung

Für den Zugriff auf den Diagrammkonfigurationseditor benötigen Sie die Berechtigung can_override_vis_config.

Visualisierung anpassen

So passen Sie eine Visualisierung mit dem Diagrammkonfigurationseditor an:

Zeigen Sie eine Visualisierung in einem Explore an oder bearbeiten Sie eine Visualisierung in einem Look oder Dashboard.
Öffnen Sie in der Visualisierung das Menü Bearbeiten.
Klicken Sie auf dem Tab Diagramm auf die Schaltfläche Diagrammkonfiguration bearbeiten. In Looker wird das Dialogfeld Diagrammkonfiguration bearbeiten angezeigt.
- Der Bereich Diagrammkonfiguration (Quelle) enthält den ursprünglichen JSON-Code der Visualisierung und kann nicht bearbeitet werden.
- Der Bereich Diagrammkonfiguration (Überschreiben) enthält die JSON-Datei, die die Quell-JSON-Datei überschreiben 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 dieser JSON-Datei beginnen oder sie löschen und ein gültiges HighCharts-JSON eingeben.
Wählen Sie den Abschnitt Chart Config (Override) (Diagrammkonfiguration (Überschreiben)) aus und geben Sie ein gültiges HighCharts-JSON ein. Die neuen Werte überschreiben alle Werte im Abschnitt Diagrammkonfiguration (Quelle).
- Im Abschnitt Beispiele dieses Artikels finden Sie Beispiele für gültige HighCharts-JSON-Dateien.
- In Looker sind alle gültigen JSON-Werte zulässig. Looker akzeptiert keine Funktionen, Datumsangaben oder undefinierte Werte.
Klicken Sie auf <>. (Code formatieren), damit Looker die JSON-Datei richtig formatieren kann.
Klicken Sie auf Vorschau, um Ihre Änderungen zu testen.
Klicken Sie auf Übernehmen, um die Änderungen zu übernehmen. Die Visualisierung wird mithilfe der benutzerdefinierten JSON-Werte angezeigt.

Nachdem Sie die Visualisierung angepasst haben, können Sie sie speichern. Wenn Sie 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 des Codes mit ungültigem JSON zu öffnen, wird in Looker eine Invalid JSON detected-Fehlermeldung angezeigt. Sie können ungültige JSON-Daten mit der Option Autofix-Code unten im Bereich Diagrammkonfiguration (Überschreiben) bereinigen.

Wenn Sie die Standardoptionen für die Visualisierung bearbeiten möchten, entfernen Sie zunächst alle Änderungen, die Sie im Diagrammkonfigurationseditor vorgenommen haben, und ersetzen Sie diese später. Gehen Sie dabei so vor:

Klicken Sie auf dem Tab Diagramm auf die Schaltfläche Diagrammkonfiguration bearbeiten. In Looker wird das Dialogfeld Diagrammkonfiguration bearbeiten angezeigt.
Kopieren Sie den Text im Bereich Diagrammkonfiguration (Überschreiben).
Klicken Sie auf die Schaltfläche Diagrammüberschreibungen löschen, um alle Änderungen zu löschen.
Klicken Sie auf Anwenden.
Bearbeiten Sie Ihre Visualisierung mit den Standardoptionen.
Klicken Sie auf dem Tab Plot auf die Schaltfläche Diagrammkonfiguration bearbeiten. In Looker wird das Dialogfeld Diagrammkonfiguration bearbeiten angezeigt.
Geben Sie im Bereich Diagrammkonfiguration (Überschreiben) gültige HighCharts-JSON-Dateien 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.
Klicken Sie auf Anwenden.

Bedingte Formatierung mit `series formatters`

Der Diagramm-Konfigurationseditor akzeptiert die meisten gültigen HighCharts-JSON-Dateien. Außerdem wird das Attribut series formatters unterstützt, das nur in Looker vorhanden ist. Jede Reihe kann mehrere Formatierer 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 potenziellen Werte der Attribute select und style ausführlicher 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 beispielsweise select: value > 0 verwenden, um ein Targeting auf alle positiven Werte vorzunehmen, oder value = 100, um nur Serien mit einem Wert von 100 zu finden.
max: Verwenden Sie select: max, um ein Targeting auf den Reihenwert mit dem Höchstwert vorzunehmen.
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. Sie können beispielsweise select: percent_rank >= 0.9 verwenden, um ein Targeting auf Reihenwerte im 90. Perzentil vorzunehmen.
name: Diese Variable gibt den Dimensionswert der Reihe zurück. Wenn Sie beispielsweise ein Diagramm mit verkauften, stornierten und zurückgegebenen Aufträgen haben, können Sie select: name = Sold verwenden, um das Targeting auf die Datenreihen mit dem Dimensionswert „Verkauft“ vorzunehmen.
AND/OR Mit AND und OR können Sie mehrere logische Ausdrücke 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. Sie können beispielsweise Werte für Reihen mit style.color, Rahmen für Rahmen mit style.borderColor und Rahmenbreite für Reihen mit style.borderWidth festlegen. Eine vollständige Liste der Stiloptionen finden Sie unter 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 Beispielanwendung der Farbformatierung im Diagrammkonfigurationseditor finden Sie im Artikel Höchst-, Mindest- und Perzentilwerte farblich hervorheben.

Beispiele

Die folgenden Abschnitte enthalten Beispiele für einige häufige Anwendungsfälle für den Diagrammkonfigurationseditor. Eine vollständige Liste der Attribute, die Sie bearbeiten können, finden Sie in der HighCharts API-Dokumentation.

Hintergrundfarbe und Textfarbe der Achse ändern
Farbe der Kurzinfo anpassen
Diagrammanmerkungen und -unterschriften hinzufügen
Vertikale Referenzbereiche hinzufügen
Maximal-, Minimal- und Perzentilwerte farblich kennzeichnen

Hintergrundfarbe und Textfarbe der Achse ä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"
      }
    }
  }
}

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"
    }
  }
}

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

Im folgenden HighCharts-JSON wird das Format der Kurzinfo so geändert, dass der Wert für die X-Achse in größerer Schrift oben in der Kurzinfo angezeigt wird, gefolgt von einer Liste aller Reihenwerte an diesem Punkt.

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

{key} ist eine Variable, die den Wert der X-Achse 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 Wertformatierung finden Sie in der Dokumentation zu Highcharts-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. Halten Sie dann den Mauszeiger über den Datenpunkt, den Sie annotieren 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 den Rückgang der Inventarelemente nach bestimmten Zeiträumen zu erklären. Außerdem wird unten im Diagramm eine Bildunterschrift hinzugefügt, um die Anmerkungen im Detail zu erläutern.

{
  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"
      },
    ]
  }]
}

Vertikale Referenzbereiche hinzufügen

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

Im folgenden HighCharts-JSON-Code 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 Band 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, akzeptieren die Attribute Unix-Zeitstempelwerte (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

Wenn Sie durchgehende Linien in gepunktete oder gestrichelte Linien ändern möchten, verwenden Sie das Attribut series.dashStyle.

Im folgenden HighCharts-JSON wird das Attribut dashStyle der Reihe Customers in eine gestrichelte Linie und das Attribut dashStyle 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-Rezepte: Bedingte Formatierung in kartesischen Diagrammen anpassen finden Sie ein ausführliches Beispiel zum Färben der Höchst-, Mindest- und Prozentrangwerte einer kartesischen Visualisierung.

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: