1. Einleitung
Mit Data Studio können Sie kostenlos interaktive Live-Dashboards mit ansprechenden Datenvisualisierungen erstellen. Sie können Ihre Daten aus verschiedenen Quellen abrufen und in Data Studio unbegrenzt viele Berichte erstellen. Außerdem haben Sie die Möglichkeit, Berichte zu bearbeiten und freizugeben. Der folgende Screenshot zeigt ein Beispiel für einen Data Studio-Bericht:
( 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. 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 Data Studio-Community-Visualisierung
- Informationen zum Erstellen einer Community-Visualisierung mit der ds-component-Hilfsbibliothek (dscc)
- So verwenden Sie Ihre Community-Visualisierung in einem Data Studio-Bericht.
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
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?
Welche Option beschreibt Ihren Hintergrund am besten?
Welche JavaScript-Visualisierungsbibliotheken möchten Sie verwenden?
Gehen Sie zur nächsten Seite, um Umfrageinformationen einzureichen.
3. Community-Visualisierungen – Übersicht
Mit Community-Visualisierungen in Data Studio können Sie benutzerdefinierte JavaScript-Visualisierungen in Ihren Dashboards erstellen und verwenden.
In diesem Codelab erstellen Sie eine Community-Visualisierung in Form eines Tabellendiagramms, die eine Dimension, einen Messwert und die Formatierung von Tabellenüberschriften unterstützt.
4. Entwicklungsworkflow für Community-Visualisierungen
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 | Metadaten zur Visualisierung und zu den Speicherorten aller Visualisierungsressourcen. |
viz-codelab.json | JSON | Optionen zum Konfigurieren von Daten und Stil für den Eigenschaftenbereich. |
viz-codelab.js | JavaScript | Der JavaScript-Code zum Rendern der Visualisierung. |
viz-codelab.css (optional) | CSS | CSS-Stile für die Visualisierung. |
*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.
5. „Hello, World!“-Visualisierung erstellen
In diesem Abschnitt fügen Sie den Code hinzu, der zum Rendern einer einfachen „Hello, world!“‑Visualisierung erforderlich ist.
JavaScript-Quellcode für die Visualisierung schreiben
Schritt 1:Laden Sie die Datei dscc.min.js von der Seite Data Studio Community Component Library (dscc) herunter und kopieren Sie sie in Ihr Arbeitsverzeichnis.
Schritt 2:Kopieren Sie den folgenden Code in einen Texteditor und speichern Sie ihn als viz-codelab-src.js in Ihrem lokalen Arbeitsverzeichnis.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
JavaScript-Bundle-Datei vorbereiten
Schritt 3:Fassen Sie das gesamte erforderliche JavaScript in einer einzigen Datei zusammen, indem Sie den Inhalt der Visualisierungshilfsbibliothek (dscc.min.js) und Ihrer viz-codelab-src.js-Datei in eine neue Datei mit dem Namen viz-codelab.js kopieren. Mit den folgenden Befehlen können die Dateien verkettet werden. Wiederholen Sie diesen Schritt jedes Mal, wenn Sie den Quellcode für die Visualisierung aktualisieren.
Linux-/macOS-Verkettungsscript
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Windows-Verkettungsskript
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. CSS für die Visualisierung schreiben
In der CSS-Datei wird das Styling für die Visualisierung definiert. Sie ist optional. Kopieren Sie das folgende CSS und speichern Sie es als viz-codelab.css..
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. JSON-Konfiguration schreiben
In der Visualisierungskonfiguration werden die Daten- und Stilattribute definiert, die von Ihrer Visualisierung unterstützt und benötigt werden. Für diese Visualisierung in diesem Codelab sind eine Dimension und ein Messwert erforderlich. Außerdem gibt es ein Stilelement zum Auswählen einer Füllfarbe. Weitere Informationen zu Dimensionen und Messwerten
Kopieren Sie den folgenden Code und speichern Sie ihn als viz-codelab.json.Weitere Informationen zu den konfigurierbaren Attributen finden Sie in der Referenz zur Konfiguration von Community-Visualisierungen.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Cloud Storage-Projekt und -Bucket erstellen
Schritt 1 : Google Cloud Platform-Projekt erstellen oder ein vorhandenes Projekt verwenden
Schritt 2: GCP-Bucket erstellen Die empfohlene Speicherklasse ist „Regional“. Weitere Informationen zu kostenlosen Stufen finden Sie unter Cloud Storage – Preise. Hinweis: Es ist unwahrscheinlich, dass für den Speicher Ihrer Visualisierung Kosten für die Speicherklasse Regional Storage anfallen.
Schritt 3:Notieren Sie sich den Namen/Pfad Ihres Buckets, beginnend mit dem Abschnitt nach Buckets/. Der Pfad wird in Data Studio als „Komponenten-ID“ bezeichnet und dient dazu, eine Visualisierung zu identifizieren und bereitzustellen.
9. Datei „manifest.json“ schreiben
Die Manifestdatei enthält Informationen zum Speicherort und zu den Ressourcen Ihrer Visualisierung. Sie muss den Namen „manifest.json“ haben und sich im Bucket/Pfad befinden, der im vorherigen Schritt erstellt wurde. Das ist derselbe Pfad, 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/table-chart.png",
"organization": "Data Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Visualisierungsdateien in Google Cloud Storage hochladen
- Laden Sie die Dateien
manifest.json,viz-codelab.js,viz-codelab.jsonundviz-codelab.cssüber die Weboberfläche oder das gsutil-Befehlszeilentool in Ihren Google Cloud Storage-Bucket hoch. Wiederholen Sie diesen Vorgang jedes Mal, wenn Sie die Visualisierung aktualisieren.
gsutil-Uploadbefehle
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Community-Visualisierung in Data Studio testen
Bericht erstellen und Daten hinzufügen
Schritt 1:Kopieren Sie die URL für das Beispieldataset für Community-Visualisierungen. Alternativ können Sie eine beliebige Datenquelle verwenden und die folgenden Schritte überspringen.
Schritt 2: In Data Studio anmelden Klicken Sie links oben auf + Erstellen und wählen Sie dann Bericht aus.
Schritt 3:Sie sehen jetzt den Berichtseditor, in dem der Bereich Daten zum Bericht hinzufügen geöffnet ist.
Schritt 4:Wählen Sie auf dem Tab Datenverbindung herstellen den Connector Google Sheets by Google aus.
Schritt 5:Wählen Sie URL aus und fügen Sie die URL der Google-Tabelle aus Schritt 1 ein.
Schritt 6:Klicken Sie rechts unten auf Hinzufügen.
Schritt 7: Wenn Sie aufgefordert werden, die Meldung Sie fügen diesem Bericht Daten hinzu zu bestätigen, klicken Sie auf ZUM BERICHT HINZUFÜGEN. Ein unbenannter Bericht wird erstellt und dem Bericht wird eine Standardtabelle mit Beispieldaten hinzugefügt. Optional können Sie die Standardtabelle auswählen und löschen, sodass Sie einen leeren Bericht erhalten.
Community-Visualisierung zum Bericht hinzufügen
Schritt 1:Klicken Sie in der Symbolleiste auf „Community-Visualisierungen und ‑Komponenten“ 
.
Schritt 2:Klicken Sie auf + Noch mehr entdecken, um die Community-Galerie aufzurufen.
Schritt 3:Klicken Sie auf Eigene Visualisierung erstellen.
Schritt 4:Geben Sie unter Community-Visualisierung testen und hinzufügen den Manifestpfad ein und klicken Sie auf Senden. Der Manifestpfad ist der Name des Google Cloud Storage-Buckets und der Pfad, der auf den Speicherort des Manifests Ihrer Visualisierung verweist. Er muss mit gs://. beginnen, z. B. gs://community-viz-docs/viz-codelab. Wenn Sie einen gültigen Manifestpfad eingegeben haben, sollte eine Visualisierungskarte gerendert werden.
Schritt 5:Klicken Sie auf die Visualisierungskarte, um sie Ihrem Bericht hinzuzufügen.
Schritt 6:Wenn Sie dazu aufgefordert werden, geben Sie Ihr Einverständnis, dass die Visualisierung gerendert werden darf.
Schritt 7:Optional können Sie die ausgewählte Dimension und den Messwert für die Tabelle aktualisieren. Wenn Sie das bereitgestellte Beispiel-Dataset verwenden, legen Sie die Dimension auf Land und den Messwert auf Bevölkerung fest. Das hat erst später im Codelab Auswirkungen auf die Visualisierung.
Im Eigenschaftenbereich auf der rechten Seite werden die in viz-codelab.json konfigurierten Elemente angezeigt.
Im Bereich Einrichtung sind in der Visualisierung eine Dimension und ein Messwert möglich.
Im Bereich Stil hat die Visualisierung ein einzelnes Element zum Formatieren des Tabellen-Headers. Zu diesem Zeitpunkt hat die Stilsteuerung noch keine Auswirkungen auf die Visualisierung. Das ändert sich erst, wenn der Visualisierungscode in einem späteren Schritt aktualisiert wird. Hinweis: Es werden zusätzliche Stiloptionen für die Visualisierung angezeigt, die Sie nicht in der Konfigurationsdatei definiert haben. Das ist normal, da alle Visualisierungen eine Reihe gemeinsamer Steuerelemente haben, die automatisch verfügbar sind.
12. Daten als Tabelle rendern
In diesem Abschnitt aktualisieren Sie Ihre Visualisierung, sodass der Beispieldatensatz für Community-Visualisierungen als Tabelle angezeigt wird.
Die zu rendernden Daten sind im tables-Objekt verfügbar und basieren auf der Transformation, die in der Visualisierung angegeben ist. In diesem Codelab wurde für die Visualisierung das Tabellenformat (tableTransform) angefordert, das ein headers-Objekt und ein rows-Objekt enthält, das alle Daten enthält, die zum Rendern einer Tabelle erforderlich sind.
Schritt 1:Ersetzen Sie den Inhalt von viz-codelab-src.js durch den unten stehenden Code.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Schritt 2:JavaScript-Bundle-Datei vorbereiten, dann Visualisierungsdateien in Google Cloud Storage hochladen und überschreiben
Schritt 3:Aktualisieren Sie den Data Studio-Bericht, um die Community-Visualisierung neu zu laden und zu testen. In der Tabelle werden jetzt Daten (d.h. das Google-Tabellenblatt) gerendert und Spaltenüberschriften basierend auf der ausgewählten Dimension und dem ausgewählten Messwert angezeigt. Ändern Sie die Größe der Visualisierung, um alle Zeilen zu sehen.
13. Stiländerungen dynamisch anwenden
In diesem Abschnitt aktualisieren Sie die Visualisierung, um die Tabellenüberschrift basierend auf der im Bereich Stil ausgewählten Füllfarbe zu formatieren.
Der Status aller Stilelemente ist im Objekt style verfügbar. Jeder Elementschlüssel wird basierend auf der Konfiguration des Visualisierungsstils (viz-codelab.json) definiert. In diesem Abschnitt rufen Sie die ausgewählte Füllfarbe ab und verwenden sie, um die Hintergrundfarbe der Tabellenüberschrift zu aktualisieren.
Schritt 1:Ersetzen Sie den Code in der Datei viz-codelab-src.js durch den unten stehenden Code.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Schritt 2:JavaScript-Bundle-Datei vorbereiten, dann Visualisierungsdateien in Google Cloud Storage hochladen und überschreiben
Schritt 3:Aktualisieren Sie den Data Studio-Bericht, um die Community-Visualisierung neu zu laden und zu testen.
Schritt 4:Verwenden Sie im Bereich Stil die Stilsteuerung Hintergrundfarbe des Headers, um die Hintergrundfarbe des Tabellenheaders zu ändern.
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.
14. Nächste Schritte
Visualisierung erweitern
- Weitere Informationen zu den für Ihre Visualisierung verfügbaren Daten und Formaten
- Weitere Informationen zu verfügbaren Stilelementen und zum Hinzufügen von zusätzlichem Stil zu Ihrer Visualisierung
- Interaktionen zur Visualisierung hinzufügen
- Visualisierung lokal entwickeln
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 in der Galerie für Community-Visualisierungen 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 | ||
Beispiele |