Visualisierungscode schreiben
Die Looker Studio-Hilfsbibliothek ist eine Schnittstelle zwischen Ihnen und Looker Studio Um die Bibliothek zu verwenden, stellen Sie eine Callback-Funktion bereit, die die Visualisierung.
Die auffälligste Funktion in der Bibliothek ist subscribeToData. Sie benötigt zwei
Argumente: eine callback-Funktion, die die Visualisierung rendert, und ein
options-Objekt, das angibt, welche Art von Transformation Ihre Daten sein sollen.
nehmen. Weitere Informationen finden Sie in der Referenz zur Bibliothek.
Im Folgenden finden Sie einen Überblick darüber, was Ihr JavaScript-Visualisierungscode ausführen könnte. 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})
Es gibt einige wichtige Dinge, die du beim Schreiben einer Community beachten solltest Visualisierung.
Aktualisierungen von der subscribeToData-Funktion erfolgen, wenn die Daten, Stile oder
Änderungen der iFrame-Größe.
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-Änderungen ü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
Bei den Community-Visualisierungen in Looker Studio kann nur ein JavaScript-Code geladen werden -Datei. Der hochgeladene Code sollte eine einzelne Datei sein, die die DSCC-Datei enthält. Hilfsbibliothek, allen JavaScript-Visualisierungsbibliotheken und Ihrer Visualisierung Code.
Dazu können Sie in bash den Befehl cat wie unten verwenden.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Manifest definieren
Die Manifestdatei der Visualisierung enthält Metadaten zur Visualisierung, sowie Informationen zum Speicherort von Visualisierungsressourcen. Standort der Manifestdatei wird als "Komponenten-ID" bezeichnet und zum Laden eines Community-Visualisierung.
In der Manifestreferenz finden Sie ein Beispielmanifest.
Der devMode-Parameter des Manifests bestimmt das Caching-Verhalten des
Visualisierung. Bei der Entwicklung der Visualisierung sollte devMode auf true gesetzt sein,
dass vollständige Aktualisierungen die
neueste Version der Ressourcen laden. Sobald die
stabil ist, sollte devMode auf false gesetzt sein, damit Berichte mit
Community-Visualisierungen
schnell laden. Weitere Informationen zum Caching finden Sie in der
Fortgeschrittener Leitfaden zum Caching.
Nächste Schritte
Nachdem Sie nun den Code für Ihre Visualisierung geschrieben haben, lernen Sie, wie Sie Ihre Visualisierung hosten.