Visualisierungscode schreiben
Die Data Studio-Helferbibliothek bietet eine Schnittstelle zwischen Ihnen und Data Studio. Wenn Sie die Bibliothek verwenden möchten, geben Sie eine Callback-Funktion an, die die Visualisierung rendert.
Die wichtigste Funktion in der Bibliothek ist subscribeToData. Sie verwendet zwei Argumente: eine callback-Funktion, die die Visualisierung rendert, und ein options-Objekt, das die Art der Transformation angibt, die auf Ihre Daten angewendet werden soll. Weitere Informationen finden Sie in der Bibliotheksreferenz.
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 Schreiben einer Community-Visualisierung sind einige wichtige Punkte zu beachten.
Aktualisierungen der Funktion subscribeToData erfolgen, wenn sich die Daten, das Styling oder die Größe des iFrame ä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
}
Data Studio lädt und führt JavaScript-Dateien und keine HTML-Dateien aus. Alle DOM-Manipulationen 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
Bei Community-Visualisierungen in Data Studio kann nur eine JavaScript-Datei geladen werden. Der hochgeladene Code muss eine einzelne Datei sein, die die dscc Helferbibliothek, alle JavaScript-Visualisierungsbibliotheken und Ihren Visualisierungs code 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 Manifestdatei für die Visualisierung enthält Metadaten zur Visualisierung sowie Informationen zum Speicherort 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.
sein.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 Hard-Refreshes 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.