Mit Google Data Studio können Nutzer kostenlos interaktive Live-Dashboards mit ansprechenden Datenvisualisierungen erstellen. Nutzer können ihre Daten aus verschiedenen Quellen abrufen und Berichte in Data Studio erstellen. Dabei haben sie die Möglichkeit, Inhalte zu bearbeiten und freizugeben. Hier sehen Sie ein Beispiel für ein Data Studio-Dashboard:
(Klicken Sie hier, um diesen Beispielbericht in Data Studio aufzurufen)
Data Studio bietet mehrere integrierte Diagrammtypen, darunter Linien-, Balken-, Kreis- und Streudiagramme. Mit Community-Visualisierungen können Sie eigene benutzerdefinierte JavaScript-Visualisierungen in Data Studio erstellen und verwenden. Community-Visualisierungen werden von der Data Studio-Entwickler-Community erstellt. Jeder Entwickler kann eine erstellen. Sie können Ihre Community-Visualisierungen auch mit anderen teilen, damit diese sie mit ihren eigenen Daten verwenden können.
Lerninhalte
In diesem Codelab lernen Sie Folgendes:
- Funktionsweise einer Community-Visualisierung in Google Data Studio
- Community-Visualisierung mit der ds-component-Hilfsbibliothek erstellen
- Community-Visualisierung in ein Data Studio-Dashboard einbinden
Voraussetzungen
Für dieses Codelab benötigen Sie Folgendes:
- Zugriff auf das Internet und einen Webbrowser
- Ein Google-Konto
- Zugriff auf einen Google Cloud Platform-Speicher-Bucket
- JavaScript-Vorkenntnisse
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 trifft am ehesten auf Sie zu?
Für welche JavaScript-Visualisierungsbibliotheken interessieren Sie sich?
Gehen Sie zur nächsten Seite, um Umfrageinformationen einzureichen.
Mit Community-Visualisierungen in Data Studio können Sie benutzerdefinierte JavaScript-Visualisierungen erstellen und in Ihre Dashboards einbinden.
In diesem Codelab erstellen Sie eine Community-Visualisierung in Form eines Balkendiagramms, die eine Dimension, einen Messwert und einen Stil für die Balkenfarbe unterstützt.
Wenn Sie eine Community-Visualisierung erstellen möchten, benötigen Sie die folgenden Dateien in einem Google Cloud Platform-Storage-Bucket, den Sie in einem späteren Schritt erstellen.
Dateiname | Dateityp | Zweck |
manifest.json* | JSON | Enthält Metadaten zur Visualisierung und zum Speicherort der anderen Ressourcen. |
myViz.json | JSON | Bietet Optionen zum Konfigurieren von Daten und Stil für den Eigenschaftenbereich. |
myViz.js | JavaScript | Stellt den JavaScript-Code bereit, der zum Anzeigen der Visualisierung erforderlich ist. |
myViz.css (optional) | CSS | Stellt Formatierung für die Visualisierung bereit. |
*Das Manifest ist die einzige Datei, die einen erforderlichen Namen hat. Die anderen Dateien können anders benannt werden, solange ihr Name/Speicherort in der Manifestdatei angegeben ist.
In diesem Abschnitt fügen Sie Ihrer JavaScript-Datei den Code hinzu, der zum Verarbeiten von Daten, Stiländerungen und zum Rendern der Visualisierung erforderlich ist.
Visualisierungsquelle schreiben
Schritt 1 : Laden Sie die Datei „dscc.min.js“ aus der Data Studio Community Component Library herunter und kopieren Sie sie in Ihr Arbeitsverzeichnis.
Schritt 2 : Kopieren Sie den folgenden Code in einen Texteditor und speichern Sie ihn als myVizSource.js in Ihrem lokalen Arbeitsverzeichnis.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Finale JavaScript-Datei vorbereiten
Schritt 3 : Fassen Sie alle erforderlichen JavaScript-Dateien in einer einzigen Datei zusammen, indem Sie den Inhalt der Visualisierungshilfsbibliothek (dscc.min.js) und Ihrer myVizSource.js-Datei in eine neue Datei mit dem Namen myViz.js kopieren. Führen Sie die folgenden Befehle aus, um die Dateien zu verketten. Wiederholen Sie diesen Schritt jedes Mal, wenn Sie den Visualisierungscode aktualisieren.
Linux-/macOS-Verkettungsscript
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsWindows-Script
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsIn der CSS-Datei wird das Styling für die Visualisierung definiert. Kopieren Sie den folgenden Code und speichern Sie ihn als myViz.css..
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}In der JSON-Datei für die Visualisierungskonfiguration werden die Daten- und Stilattribute definiert, die von Ihrer Visualisierung unterstützt und benötigt werden. Die Visualisierung, die Sie in diesem Codelab erstellen, unterstützt eine Dimension und einen Messwert und erfordert ein Stilelement zum Auswählen einer Farbe. Weitere Informationen zu Dimensionen und Messwerten
Kopieren Sie den folgenden Code und speichern Sie ihn als myViz.json.Weitere Informationen zu den konfigurierbaren Attributen finden Sie in der Konfigurationsreferenz.
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}Schritt 1: Google Cloud Platform-Projekt (GCP-Projekt) erstellen
Schritt 2 : GCP-Bucket erstellen. Die empfohlene Speicherklasse ist „Regional“. Weitere Informationen zu kostenlosen Stufen finden Sie unter Cloud Storage – Preise. Es ist unwahrscheinlich, dass für den Speicher Ihrer Visualisierung Kosten für die regionale Speicherklasse anfallen.
Schritt 3: Notieren Sie sich den Namen/Pfad Ihres Buckets, beginnend mit dem Abschnitt nach Buckets/ . In Data Studio wird sie als „Komponenten-ID“ bezeichnet und zum Identifizieren und Bereitstellen verwendet.
Die Manifestdatei enthält Informationen zum Speicherort und zu den Ressourcen Ihrer Visualisierung. Es muss den Namen „manifest.json“ haben und sich in dem Bucket befinden, der im vorherigen Schritt erstellt wurde (derselbe, der für Ihre Komponenten-ID verwendet wird).
Kopieren Sie den folgenden Code in einen Texteditor und speichern Sie ihn als manifest.json..
Weitere Informationen zum Manifest finden Sie in der Manifestreferenz.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- Laden Sie die Dateien
manifest.json,myViz.js,myViz.jsonundmyViz.cssüber die Weboberfläche oder das gsutil-Befehlszeilentool in den Google Cloud Storage-Bucket hoch. Wiederholen Sie diesen Vorgang jedes Mal, wenn Sie Ihre Visualisierung aktualisieren.
gsutil-Befehle zum Hochladen
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETSchritt 1 : Kopieren Sie die URL für das Beispieldataset für Community-Visualisierungen.
Schritt 2: Rufen Sie Data Studio auf und klicken Sie unter Neuen Bericht starten auf Leer.
Schritt 3: Klicken Sie rechts unten auf NEUE DATENQUELLE ERSTELLEN.
Schritt 4: Wählen Sie den Google Sheets-Connector aus.
Schritt 5: Geben Sie im Feld URL die URL des Google-Tabellenblatts aus Schritt 1 oben ein.
Schritt 6: Klicken Sie rechts oben auf der Seite auf VERBINDEN.
Schritt 7: Klicken Sie in der Kopfzeile der Datenquelle auf Zugriff auf Community-Visualisierungen, wählen Sie EIN aus und klicken Sie auf Speichern.
Schritt 7: Klicken Sie im angezeigten Feld auf ZUM BERICHT HINZUFÜGEN, um die Datenquelle dem Bericht hinzuzufügen.
Schritt 6 : Klicken Sie in der Symbolleiste auf die Schaltfläche für Community-Visualisierungen 
. Dadurch wird ein Drop-down-Menü geöffnet.
Schritt 7: Fügen Sie den Namen Ihres Buckets mit dem Präfix gs:// ( ein, z. B. gs://community-viz-docs/myViz), fügen Sie barChart unter „Komponenten-ID“ hinzu und klicken Sie auf „HINZUFÜGEN“. 
Die Visualisierung wird automatisch auf der Arbeitsfläche gezeichnet. Im Eigenschaftenbereich auf der rechten Seite sollten die Elemente in Ihrer myViz.json-Datei angezeigt werden.
Die Visualisierung unterstützt eine Dimension und einen Messwert.
Es wurde ein Style-Element angegeben, wodurch eine Schriftfarbenauswahl mit dem Label „Balkenfarbe“ gerendert wird. Im nächsten Schritt verwenden Sie diesen Selektor, um die Visualisierung zu beeinflussen.
In diesem Abschnitt verwenden Sie das Stilelement für die Farbauswahl, um die Visualisierung zu aktualisieren.
Schritt 1 : Ersetzen Sie den Code in der Datei myVizSource.js durch den unten stehenden Code.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Schritt 2 : Erstellen Sie die kombinierte JavaScript-Datei und laden Sie Ihre Visualisierungsdateien dann noch einmal in Google Cloud Storage hoch.
Schritt 3 : Aktualisieren Sie den Data Studio-Bericht, in dem Sie die Community-Visualisierung getestet haben.
Mit der Auswahl im Stilmenü sollte sich die Farbe des Rechtecks ändern lassen.
In diesem Abschnitt aktualisieren Sie Ihre Visualisierung, um ein Balkendiagramm mit den Daten aus dem Community Visualization sample data set zu erstellen. Hinweis: Data Studio gibt maximal 2.500 Datenzeilen für die Visualisierung zurück.
Schritt 1 : Ersetzen Sie den Code in der Datei myVizSource.js durch den unten stehenden Code.
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Schritt 2 : Erstellen Sie die kombinierte JavaScript-Datei und laden Sie Ihre Visualisierungsdateien dann noch einmal in Google Cloud Storage hoch.
Schritt 3 : Aktualisieren Sie den Data Studio-Bericht, in dem Sie die Community-Visualisierung getestet haben. Sie sollten ein Balkendiagramm mit Labels erhalten, die aus den Daten in der Google-Tabelle generiert wurden. Wenn Sie die Farbe der Balken ändern möchten, ändern Sie die Farbe, die in der Auswahl für den Stil Balkenfarbe ausgewählt ist.
In diesem Abschnitt aktualisieren Sie Ihre Visualisierung, um ein Balkendiagramm mit den Daten aus dem Community Visualization sample data set zu erstellen.
Schritt 1 : Ersetzen Sie den Code in der Datei myVizSource.js durch den unten stehenden Code.
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Schritt 2 : Erstellen Sie die kombinierte JavaScript-Datei und laden Sie Ihre Visualisierungsdateien dann noch einmal in Google Cloud Storage hoch.
Schritt 3 : Aktualisieren Sie den Data Studio-Bericht, in dem Sie die Community-Visualisierung getestet haben. Sie sollten ein Balkendiagramm mit einem Titel sehen, der aus den Daten generiert und mit Ihrer myViz.css-Datei formatiert wurde.
Herzlichen Glückwunsch! Sie haben eine Community-Visualisierung in Data Studio erstellt. Damit sind wir am Ende dieses Codelabs angelangt. Sehen wir uns nun an, welche nächsten Schritte Sie unternehmen können.
Visualisierung erweitern
- Interaktionen in die Visualisierung einfügen
- Visualisierung lokal entwickeln
- 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 Visualization Showcase ein.
- Community-Connector für Data Studio erstellen
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 | ||
Videos | Demnächst | |
Beispiele |