Mit dem Diagrammkonfigurationseditor 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.
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. Looker zeigt das Dialogfeld Diagrammkonfiguration bearbeiten an.
Der Bereich Diagrammkonfiguration (Quelle) enthält die ursprüngliche JSON-Datei 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, wird der Bereich von Looker mit Standard-JSON gefüllt. Sie können mit diesem JSON-Code beginnen oder ihn löschen und ein beliebiges gültiges HighCharts-JSON-Objekt eingeben.
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 dieses Artikels finden Sie Beispiele für gültiges HighCharts-JSON.
- Looker akzeptiert alle gültigen JSON-Werte. 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 die Änderungen zu testen.
Klicken Sie auf Übernehmen, um die Änderungen zu übernehmen. Die Visualisierung wird mit den benutzerdefinierten JSON-Werten angezeigt.
Nachdem Sie Ihre 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 von Code mit ungültigem JSON-Format aufzurufen, zeigt Looker die Fehlermeldung Invalid JSON detected
an . 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 dazu so vor:
- Klicken Sie auf dem Tab Diagramm auf die Schaltfläche Diagrammkonfiguration bearbeiten. Looker zeigt das Dialogfeld Diagrammkonfiguration bearbeiten an.
- 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 Diagramm auf die Schaltfläche Diagrammkonfiguration bearbeiten. Looker zeigt das Dialogfeld Diagrammkonfiguration bearbeiten an.
- Geben Sie im Bereich Diagrammkonfiguration (Überschreiben) gültiges HighCharts-JSON ein. Sie können den in Schritt 2 kopierten Text als Vorlage verwenden. Testen Sie Ihre Änderungen jedoch unbedingt mithilfe 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
akzeptiert, 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 im Attribut
style
JSON 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 Attribut select
Sie können die folgenden Werte in einem select
-Ausdruck verwenden:
value
: Diese Variable gibt den Wert der Reihe zurück. Sie können beispielsweiseselect: value > 0
verwenden, um ein Targeting auf alle positiven Werte vorzunehmen, odervalue = 100
, um nur Serien mit einem Wert von 100 zu finden.max
: Mitselect: max
können Sie das Targeting auf den Wert der Reihe mit dem höchsten Wert ausrichten.min
: Verwenden Sieselect: min
, um ein Targeting auf den Reihenwert mit dem Mindestwert vorzunehmen.percent_rank
: Diese Variable zielt auf den Reihenwert mit einem angegebenen Perzentil ab. Sie können beispielsweiseselect: 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 in Ihrem Bericht beispielsweise verkaufte, stornierte und zurückgegebene Aufträge angezeigt werden, können Sieselect: name = Sold
verwenden, um das Targeting auf die Datenreihen mit dem Dimensionswert „Verkauft“ vorzunehmen.AND/OR
MitAND
undOR
können Sie mehrere logische Ausdrücke kombinieren.
Im Beispiel Farbe für Höchst-, Mindest- und Perzentilwerte sehen Sie, wie diese Ausdrücke im Diagrammkonfigurationseditor implementiert sind.
Das Attribut style
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
, Rahmenlinien mit style.borderColor
und Rahmenbreite für Reihen mit style.borderWidth
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 Linienarten finden Sie unter Highcharts-Optionen für series.line.data.marker
.
Informationen dazu, wie die im Diagrammkonfigurationseditor implementierte Farbformatierung dargestellt wird, finden Sie im Beispiel Maximal-, Mindest- und Perzentilwerte einfärben.
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 Dokumentation zur HighCharts API.
- Hintergrundfarbe und Achsentextfarbe ändern
- Farbe der Kurzinfo anpassen
- Diagrammanmerkungen und -untertitel 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.
Wenn Sie die Textfarbe der Achsen in einer Visualisierung ändern möchten, verwenden Sie die folgenden Attribute:
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 wird die Hintergrundfarbe der Kurzinfo in Cyan und die Farbe des Texts der Kurzinfo in Schwarz geändert.
{
tooltip: {
backgroundColor: "cyan",
style: {
color: "black"
}
}
}
Inhalte und Stile 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 Wert der X-Achse des ausgewählten Punkts zurückgibt. (in diesem Beispiel Monat und 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}
rundetvariable
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
},
}
Anmerkungen und Bildunterschriften zu Diagrammen hinzufügen
Verwenden Sie das Attribut annotations
, um eine Anmerkung hinzuzufügen. Mit dem Attribut caption
können Sie dem Diagramm eine Bildunterschrift hinzufügen.
Um die Koordinaten für einen Punkt abzurufen, 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
Um einen vertikalen Referenzbereich hinzuzufügen, verwenden Sie das Attribut xAxis.plotBands
.
Beim folgenden HighCharts-JSON wird zwischen dem 24. November 2022 und dem 29. November 2022 ein vertikaler Referenzbereich hinzugefügt, um einen Angebotszeitraum anzugeben. Außerdem wird am unteren Rand des Diagramms ein Text hinzugefügt, der die Bedeutung der Band erklärt.
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'
}
}]
},
}
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 Visualisierungsarten erstellen
Mit dem Diagrammkonfigurationseditor können Sie Visualisierungstypen erstellen, die in den Standardvisualisierungstypen von Looker nicht enthalten sind. Die folgenden Artikel enthalten Beispiele für einige der Visualisierungen, die Sie mit dem Diagrammkonfigurationseditor entwerfen können:
- Bullet-Diagramm mit dem Diagrammkonfigurationseditor erstellen
- Mit dem Diagrammkonfigurationseditor ein Tachometerdiagramm erstellen
- Streamdiagramm mit dem Diagrammkonfigurationseditor erstellen
- Baumkartendiagramm mit dem Diagrammkonfigurationseditor erstellen
- Sankey-Diagramme mit dem Diagrammkonfigurationseditor erstellen
- Ven-Diagramm mit dem Diagrammkonfigurationseditor erstellen
- Sonnenstrahlendiagramm mit dem Diagrammkonfigurationseditor erstellen