In Looker Studio werden über die postMessage-Oberfläche Daten- und Stilinformationen für den iFrame mit der Community-Visualisierung bereitgestellt. In diesem Leitfaden finden Sie weitere Informationen zur Verwendung der Hilfsbibliothek.
Für Community-Visualisierungen hat ds-component zwei Funktionen.
- Abmessungen des iFrame abrufen
- Kommunikation mit Looker Studio verwalten
Ereignisse abonnieren
Wenn ein Nutzer mit Ihrer Visualisierung interagiert, z. B. ausgewählte Felder oder den Stil oder die Größe der Komponente ändert, sendet Looker Studio Ereignisse an Ihre Visualisierung.
dscc.subscribeToData
registriert einen Callback, der für jedes postMessage
-Ereignis aus Looker Studio aufgerufen wird. An den Callback wird ein data
-Objekt übergeben.
function drawViz(data){
// obtain the height and width to scale your visualization appropriately
var height = dscc.getHeight();
var width = dscc.getWidth();
// write your visualization code here
console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, ' '));
}
// call drawViz every time Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
Die zurückgegebenen Daten
Beide Datentransformationen geben ein Objekt mit fünf Schlüsseln zurück.
Schlüssel | Zweck |
---|---|
style |
Vom Nutzer ausgewählte und standardmäßige Stilinformationen |
fields |
Informationen aus vom Nutzer ausgewählten Feldern |
interactions |
Vom Nutzer ausgewählte Interaktionen |
theme |
Informationen zum Berichtdesign |
tables |
Datenzeilen |
dateRanges |
Standard- und Vergleichszeiträume |
Format der Daten:
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById),
}
Verschiedene Visualisierungen erfordern unterschiedliche Datenformate. Zwei gängige Formate sind ein Array von Arrays oder ein Array von Objekten. Die ds-component-Bibliothek bietet zwei Transformationen, mit denen Sie direkt zu diesen Datenformaten gelangen.
Die beiden Transformationen sind in der library-reference dokumentiert. Diese Transformationen lassen sich leicht den Datenformaten zuordnen, die häufig von JavaScript-Visualisierungsbibliotheken erwartet werden. Die beiden unterstützten Transformationen sind: objectTransform
, das ein Array von Objekten zurückgibt, und tableTransform
, das ein Array von Arrays zurückgibt.
dscc.objectTransform
Einige Visualisierungen erwarten Daten als Array von Objekten.
Beispiel:
var data = [
{'colA': 'hello', 'colB', 'world'},
{'colA': 'hello', 'colB', 'world'}
];
Der folgende Code zeigt, wie auf ein Array von Objekten aus dem Format dscc.objectTransform
zugegriffen wird.
function drawViz(data){
// what the object transform could look like
// [
// {'configId1': ['hello'], 'configId2': [1] },
// {'configId1': ['world'], 'configId2': [2] }
// ]
var dsccObjectTransformData = data.tables.DEFAULT;
// creating an array of objects
var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
return {
'configId1': d.configId1[0],
'configId2': d.configId2[0]
};
};
}
Wenn Datenabschnitte so definiert sind, dass ein Nutzer mehrere Felder eingeben kann (z. B. wenn für ein Sankey-Diagramm zwei Dimensionen definiert wurden), hängt die Transformation von Ihrem Anwendungsfall ab, da das von Looker Studio zurückgegebene Datenformat etwa so aussieht:
var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]
dscc.tableTransform
Einige Visualisierungsbibliotheken erwarten ein Array von Arrays.
Beispiel:
var data = [
['hello', 1],
['world', 2]
];
Der folgende Code zeigt, wie auf eine Zeile mit Zeilen aus dem Format dscc.tableTransform
zugegriffen wird.
function drawViz(data);
// what the below object looks like
// {
// headers: [{
// "id": "qt_ky8sltutsb",
// "name": "dimension",
// "type": "TEXT",
// "concept": "DIMENSION",
// "configId": "configId1"
// }, {
// "id": "qt_m9dtntutsb",
// "name": "metric",
// "type": "NUMBER",
// "concept": "METRIC",
// "configId": "configId2"
// }],
// rows: [
// ['hello', 1],
// ['world', 2]
// ];
// }
var dsccTableTransformObject = data.tables.DEFAULT;
// accessing the row of rows
var rowOfRows = dsccTableTransformObject.rows;
// accessing the header row
var headers = dsccTableTransformObject.headers;
}
dscc.subscribeToData(drawViz, {transform: tableTransform});