1. Einleitung
Mit Google Data Studio können Sie kostenlos dynamische, interaktive Dashboards mit ansprechenden Datenvisualisierungen erstellen. Community-Visualisierungen sind eine Data Studio-Funktion, mit der Sie benutzerdefinierte Visualisierungen mit JavaScript erstellen können, die in Ihre Data Studio-Berichte eingebunden werden.
Lerninhalte
In diesem Codelab lernen Sie Folgendes:
- Funktionsweise von Community-Visualisierungen in Google Data Studio
- Community-Visualisierung mit unserem Befehlszeilen-Vorlagentool erstellen
- JavaScript-Visualisierungsbibliotheken zum Erstellen von Community-Visualisierungen verwenden
- Community-Visualisierung in ein Data Studio-Dashboard einbinden
Voraussetzungen
Für dieses Codelab benötigen Sie Folgendes:
- Zugriff auf das Internet, einen Webbrowser und ein Terminal sowie Ihren bevorzugten Texteditor
- Ein Google-Konto
- Zugriff auf einen Google Cloud Storage-Bucket
- Kenntnisse von JavaScript, Node.js und der Befehlszeile
In diesem Codelab wird Folgendes vorausgesetzt:
- Sie haben bereits eine Community-Visualisierung erstellt (TODO-Link zum ersten Codelab).
- Sie sind mit Google Cloud Storage vertraut.
Erstellen Sie zuerst eine Kopie dieses Berichts, indem Sie rechts oben auf 
klicken. Lassen Sie ihn in einem anderen Tab geöffnet, während Sie das Codelab durcharbeiten.
2. Kurze Umfrage
Warum haben Sie sich für dieses Codelab entschieden?
Wie möchten Sie dieses Codelab/diese Anleitung verwenden?
Wie würden Sie Ihre Erfahrungen mit Data Studio bewerten?
Was beschreibt Ihren Hintergrund am besten?
Gehen Sie zur nächsten Seite, um Umfrageinformationen einzureichen.
3. Entwicklung von Community-Visualisierungen mit dscc-gen
dscc-gen
dscc-gen ist ein Befehlszeilentool, das vordefinierte Vorlagen und Workflows für Community-Visualisierungen und Community-Connectors bietet. Die Community-Visualisierungsvorlage enthält eine funktionierende Visualisierung und einen Workflow, mit dem Sie die Änderungen an Ihrem Visualisierungscode sofort sehen können. Außerdem sind Skripts zum Validieren, Erstellen und Bereitstellen Ihrer Visualisierungen enthalten.
Einrichtung
dscc-gen verwendet gsutil in Bereitstellungsskripts sowie npm und webpack zum Erstellen von JavaScript-Code für Community-Visualisierungen.
- npm auf dem lokalen Computer installieren
- gsutil-Kurzanleitung durcharbeiten und einen Google Cloud Storage-Bucket einrichten
- Wechseln Sie zu einem lokalen Verzeichnis, in dem Sie Ihr Projekt speichern möchten.
4. Neues dscc-gen-Projekt für Community-Visualisierungen starten
Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:
npx @google/dscc-gen viz
Sie werden von dscc-gen aufgefordert, einen Projektnamen, einen GCS-Speicherort für die Entwicklung und einen Speicherort für die Produktion anzugeben. Geben Sie den Speicherort als URI mit dem gs-Protokoll ein, z.B. gs://my-gs-project/example-dev. Ein „Speicherort“ kann entweder ein Cloud Storage-Bucket oder ein Ordner in diesem Bucket sein. Die beiden Speicherorte müssen sich unterscheiden. Das Tool prüft, ob Sie Zugriff auf die eingegebenen Werte haben. Wenn die Standorte nicht vorhanden sind, werden sie für Sie erstellt.
Nachdem mit dscc-gen eine neue Community-Visualisierung erstellt wurde, wird eine Anleitung für die ersten Schritte ausgegeben. Ihr Terminal sollte in etwa so aussehen (Ihre Eingabe in kursiv fett):
$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...
Created new community viz: barchart
cd barchart and npm run start to begin working on your viz!
Sie bearbeiten die Dateien in src/, insbesondere index.js, index.json und index.css, um die Visualisierung zu erstellen.
Mit den Dateien in dist/ können Sie eine Vorschau Ihrer Visualisierung lokal in einem Browser aufrufen. webpack.config.js wird verwendet, um die Visualisierung lokal auszuführen. README.md bietet eine Übersicht über die Vorlagendateien und Befehle.
5. Visualisierung lokal in der Vorschau ansehen
Folgen Sie der Anleitung und führen Sie die folgenden Befehle im Terminal aus:
cd <folder name>
npm run start
Ein Browser wird mit einer Webseite geöffnet, die so aussieht:
Weitere Informationen finden Sie im nächsten Schritt.
6. [Info] So soll der dscc-gen-Workflow funktionieren
Die Visualisierungsvorlage „dscc-gen“ enthält eine funktionierende Visualisierung und eine Anleitung zur Verwendung der Vorlage. Das sind die wichtigsten Funktionen:
Lokale Mitteilung aktualisieren:In der Vorlage ist eine Beispielmitteilung enthalten, die wahrscheinlich nicht dem Anwendungsfall entspricht, den Sie unterstützen möchten. Laden Sie Beispieldaten herunter, die der Visualisierung entsprechen, die Sie erstellen möchten.
Lokaler Entwicklungs-Workflow: Verwenden Sie die Daten aus Lokale Daten aktualisieren, um Ihren Code lokal zu schreiben und zu testen.
Visualisierung erstellen und bereitstellen:Erstellen Sie Ihren Code und laden Sie ihn in Ihre Google Cloud Storage-Buckets hoch.
Visualisierung in Data Studio laden:Fügen Sie die Visualisierung in Ihren Data Studio-Bericht ein.
7. Konfiguration definieren
Die Konfigurationsdatei ist der Vertrag zwischen Ihnen (dem Visualisierungsentwickler) und dem Berichtseditor, der die Visualisierung verwendet. Damit werden die Optionen definiert, die verfügbar sind, wenn die Visualisierung in Data Studio geladen wird.
Für diese Balkendiagramm-Visualisierung enthält die Konfiguration eine Dimension und einen Messwert sowie ein Stilelement, mit dem der Berichtersteller den Stil des Balkendiagramms ändern kann.
Ersetzen Sie den Inhalt von src/index.json durch Folgendes. Achten Sie darauf, dass Sie alle Klammern angeben. Wenn Sie den Code neu eingeben, achten Sie auf den Unterschied zwischen eckigen und geschweiften Klammern und auf die Verschachtelungsstruktur.
index.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "dimension",
"label": "Dimensions",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "metric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "barStyling",
"label": "Bar Styles",
"elements": [
{
"id": "barColor",
"label": "Bar Color",
"type": "FILL_COLOR",
"defaultValue": {
"color": "#1E555C"
}
}
]
}
]
}
8. Aktualisierte Nachricht herunterladen
Führen Sie Folgendes aus, um Ihre lokal gespeicherten Daten zu aktualisieren:
npm run update_message
Ihr Terminal sollte in etwa so aussehen:
barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object
Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev
Mit diesem Befehl wird eine Visualisierung in Data Studio bereitgestellt, in der die empfangenen Daten in einer lokalen Visualisierung ausgegeben werden. In den Skripts wird der Bereitstellungsort Ihrer Visualisierung ausgegeben (oben hervorgehoben). Sie verwenden diesen Speicherort, um Ihre Visualisierung in Data Studio zu laden.
Wenn Sie Ihre Visualisierung laden möchten, öffnen Sie den Bericht, den Sie zuvor kopiert haben.
- „Bericht bearbeiten“ aufrufen
- Klicken Sie in der Symbolleiste auf „Community-Visualisierungen und ‑Komponenten“.
- Klicken Sie auf „Weitere Informationen“.
- Klicken Sie auf „Eigene Visualisierung erstellen“.
- Geben Sie den Manifestpfad ein (den
gs://...-Speicherort, der in Ihrem Terminal ausgegeben wird) und klicken Sie auf „Senden“.
- Klicken Sie auf die gerenderte Karte, um sie dem Bericht hinzuzufügen.
Die Visualisierung sollte JSON rendern, das in etwa so aussieht:
Kopieren Sie die gesamte Nachricht, indem Sie mit der rechten Maustaste klicken und „Alle auswählen“ auswählen. Ersetzen Sie dann den Inhalt von src/localMessage.js durch den kopierten Text. Speichern Sie die Datei.
Die Visualisierung, die lokal in Ihrem Browser ausgeführt wird, sollte nicht mehr angezeigt werden. Wenn Sie in der Konsole nachsehen, sehen Sie einen Fehler.
9. JavaScript für ein Balkendiagramm schreiben
Führen Sie zuerst den folgenden Befehl aus, um d3.js als Abhängigkeit hinzuzufügen.
npm install d3
Ersetzen Sie dann src/index.js durch den folgenden Code. Änderungen gegenüber dem letzten Schritt sind fett formatiert.
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;
const drawViz = (message) => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]));
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Wenn der lokale Server weiterhin ausgeführt wird, prüfen Sie Ihren Browser. Auf der Webseite für die lokale Entwicklung sollte jetzt ein Balkendiagramm wie unten zu sehen sein.
10. Manifest aktualisieren (optional)
Das Visualisierungsmanifest enthält Metadaten zur Visualisierung sowie den Speicherort von JavaScript, Konfiguration und CSS der Visualisierung. Aktualisieren Sie die Werte in Ihrem Manifest. Sie werden verwendet, um dem Endnutzer Informationen zu Ihrer Visualisierung bereitzustellen.
Bearbeiten Sie „src/manifest.json“, um Ihre Visualisierung zu beschreiben. Unten sehen Sie ein Beispielmanifest.
src/manifest.json
{
"name": "Bar Chart",
"organization": "[My name]",
"description": "Bar chart",
"logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
"organizationUrl": "https://github.com/googledatastudio/",
"supportUrl": "http://github.com/googledatastudio/community-visualizations",
"privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
"termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
"packageUrl": "",
"devMode": "DEVMODE_BOOL",
"components": [
{
"id": "Bar chart",
"name": "Bar chart",
"description": "My first Community Visualization",
"iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
"resource": {
"js": "YOUR_GCS_BUCKET/index.js",
"config": "YOUR_GCS_BUCKET/index.json",
"css": "YOUR_GCS_BUCKET/index.css"
}
}
]
}
11. Visualisierung bereitstellen
Ändern Sie in src/index.js die Konstante LOCAL zu „false“. Die Visualisierung in Ihrem Browser sollte nicht mehr funktionieren. Die geänderte Codezeile ist fett formatiert. Mit diesem booleschen Wert wird konfiguriert, ob im Code eine „lokale“ Datendatei oder die von Data Studio empfangenen Daten verwendet werden sollen.
src/index.js (abridged)
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;
const drawViz = (message) => {...}
Führen Sie dann im Terminal folgenden Befehl aus:
npm run build:dev
npm run push:dev
Mit dem Befehl build:dev werden Ihre JavaScript-Abhängigkeiten in einer nicht minimierten Ausgabe gebündelt und die Werte in Ihrem Manifest ersetzt, um das Caching zu deaktivieren und auf den zuvor konfigurierten „dev“-Bucket zu verweisen.
Mit dem Befehl push:dev werden Ihre Visualisierungsressourcen in den Bucket „dev“ hochgeladen, den Sie in Schritt 1 konfiguriert haben. Der Bucket-Speicherort wird in der Konsole ausgegeben.
Aktualisieren Sie den Data Studio-Bericht. Es sollte ein Balkendiagramm angezeigt werden. Ändern Sie die Daten- und Stiloptionen im Eigenschaftenbereich. Wenn Sie die Daten ändern, ändern sich auch die Balken. Die Auswahl des Balkenfarbstils funktioniert jedoch noch nicht.
12. Farbauswahl des Berichtseditors im Balkendiagramm verwenden
Wenn Sie den Code lokal bearbeiten möchten, aktualisieren Sie zuerst die const LOCAL-Variable in src/index.js zu true. Fügen Sie dann eine neue Funktion mit dem Namen styleVal() hinzu und aktualisieren Sie den Code in drawViz(). Ihre Datei „src/index.js“ sollte so aussehen:
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// parse the style value
const styleVal = (message, styleId) => {
if (typeof message.style[styleId].defaultValue === "object") {
return message.style[styleId].value.color !== undefined
? message.style[styleId].value.color
: message.style[styleId].defaultValue.color;
}
return message.style[styleId].value !== undefined
? message.style[styleId].value
: message.style[styleId].defaultValue;
};
const drawViz = message => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// get the user-selected bar color
let barColor = styleVal(message, "barColor");
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]))
.attr("fill", barColor);
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.attr("fill", barColor)
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Speichern Sie „src/index.js“ und kehren Sie dann zu Ihrer lokalen Browsersitzung zurück. Sehen Sie sich die lokale Ausführung an und ändern Sie dann „const LOCAL“ in false.
Laden Sie die aktualisierten Dateien in Google Cloud Storage hoch, indem Sie Folgendes ausführen:
npm run build:dev
npm run push:dev
Aktualisieren Sie Ihren Data Studio-Bericht. Sie sollten jetzt die Farbe Ihrer Balken ändern können.
13. Prod-Bereitstellungen
Prod-Bereitstellungen
Wenn Sie mit der Visualisierung zufrieden sind, prüfen Sie, ob „const LOCAL“ in src/index.js auf „false“ gesetzt ist, und führen Sie den Code dann aus.
npm run build:prod
npm run push:prod
Dadurch werden Ihre Dateien am GCS-Bucket-Speicherort „prod“ bereitgestellt. Außerdem wird das Caching aktiviert und das gebündelte JavaScript entsprechend minimiert.
Wie zuvor wird der Speicherort Ihrer Bereitstellung in der Konsole ausgegeben. Mit diesem Manifestpfad können Sie Ihre „prod“-Visualisierung in einen Data Studio-Bericht laden.
Glückwunsch! Sie haben Ihre erste Community-Visualisierung mit dem Tool „dscc-gen“ erstellt.
14. Nächste Schritte
Visualisierung erweitern
- Interaktionen in die Visualisierung einfügen
- Weitere Informationen zu verfügbaren Stilelementen und zum Hinzufügen von zusätzlichem Stil zu Ihrer Visualisierung
Mehr Möglichkeiten mit Community-Visualisierungen
- Sehen Sie sich die Referenzen für die DSCC-Hilfsbibliothek, das Manifest und die Konfigurationsdatei an.
- Reichen Sie Ihre Visualisierung für die Community-Visualisierungs-Galerie ein.
- Erstellen Sie einen Community-Connector für Data Studio.
Zusätzliche Ressourcen
Die folgenden Links bieten Ihnen die Möglichkeit, tiefer in das Thema dieses Codelabs einzusteigen.
Ressourcentyp | Nutzerfunktionen | Entwicklerfunktionen |
Dokumentation | ||
Neuigkeiten und Updates | Registrieren Sie sich in Data Studio > Nutzereinstellungen. | |
Fragen stellen | Stack Overflow [google-data-studio]Data Studio Developers Forum | |
Videos | Demnächst | |
Beispiele |