Visualisierungscode schreiben
Die Looker Studio-Hilfsbibliothek bietet eine Schnittstelle zwischen Ihnen und Looker Studio. Wenn Sie die Bibliothek verwenden möchten, müssen Sie eine Callback-Funktion angeben, mit der die Visualisierung gerendert wird.
Die wichtigste Funktion in der Bibliothek ist subscribeToData. Sie verwendet zwei Argumente: eine callback-Funktion, mit der die Visualisierung gerendert wird, und ein options-Objekt, mit dem angegeben wird, welche Art von Transformation für die Daten verwendet werden soll. Weitere Informationen finden Sie in der Bibliotheksreferenz.
Im Folgenden finden Sie einen Überblick darüber, wie Ihr Visualisierungs-JavaScript 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 sind einige wichtige Punkte zu beachten.
Aktualisierungen durch die Funktion subscribeToData erfolgen, wenn sich die Daten, das Styling 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 geladen und ausgeführt, nicht HTML-Dateien. Alle DOM-Manipulationen müssen über JavaScript erfolgen.
Mit dem folgenden Code wird beispielsweise 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
Bei Community-Visualisierungen in Looker Studio 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 Speicherort von 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. Bei der Entwicklung der Visualisierung sollte devMode auf true gesetzt werden, damit bei einem Hard-Refresh die neueste Version der Ressourcen geladen wird. Sobald der Code stabil ist, sollte devMode auf false gesetzt werden, 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, erfahren Sie, wie Sie Ihre Visualisierung hosten.