Visualisierungscode schreiben
Die Looker Studio-Hilfsbibliothek bietet eine Schnittstelle zwischen Ihnen und Looker Studio. Wenn Sie die Bibliothek verwenden möchten, stellen Sie eine Callback-Funktion bereit, die die Visualisierung rendert.
Die auffälligste Funktion in der Bibliothek ist subscribeToData mit zwei Argumenten: einer callback-Funktion, die die Visualisierung rendert, und einem options-Objekt, das angibt, welche Art von Transformation Sie für Ihre Daten verwenden möchten. Weitere Informationen
Im Folgenden finden Sie einen Überblick darüber, wie Ihr JavaScript-Code für die Visualisierung aussehen könnte.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
Beim Erstellen einer Community-Visualisierung gibt es einige wichtige Dinge zu beachten.
Aktualisierungen über die Funktion subscribeToData werden vorgenommen, wenn sich die Daten, der Stil oder die iFrame-Größe ändern.
Beispiel:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
In Looker Studio werden JavaScript-Dateien (keine HTML-Dateien) geladen und ausgeführt. Alle DOM-Änderungen müssen über JavaScript erfolgen.
Beispiel: Mit dem folgenden Code wird ein div definiert und an das DOM angehängt.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Code bündeln
In Looker Studio-Community-Visualisierungen kann nur eine JavaScript-Datei geladen werden. Der hochgeladene Code sollte eine einzelne Datei sein, die die DSCC-Hilfsbibliothek, alle JavaScript-Visualisierungsbibliotheken und Ihren Visualisierungscode enthält.
In Bash können Sie dazu den Befehl cat verwenden, wie unten gezeigt.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Manifest definieren
Die Visualisierungsmanifestdatei enthält Metadaten zur Visualisierung sowie Informationen zum Standort der Visualisierungsressourcen. Der Speicherort der Manifestdatei wird als „Komponenten-ID“ bezeichnet und zum Laden einer Community-Visualisierung verwendet.
In der Manifestreferenz finden Sie ein Beispielmanifest.
Der Parameter devMode des Manifests bestimmt das Caching-Verhalten der Visualisierung. Während der Entwicklung der Visualisierung sollte devMode auf true gesetzt sein, damit bei vollständigen Aktualisierungen die neueste Version der Ressourcen geladen wird. Sobald der Code stabil ist, sollte devMode auf false gesetzt sein, damit Berichte mit Community-Visualisierungen schnell geladen werden. Weitere Informationen zum Caching finden Sie im erweiterten Leitfaden zum Caching.
Nächste Schritte
Nachdem Sie den Code für Ihre Visualisierung geschrieben haben, lesen Sie die Informationen zum Hosten der Visualisierung.