Hilfsbibliothek verwenden

In Looker Studio werden die postMessage um Daten und Stilinformationen für den iFrame bereitzustellen, der die Community-Visualisierung. In diesem Leitfaden finden Sie weitere Informationen zur Verwendung des Hilfsprogramms Bibliothek.

Bei Community-Visualisierungen ds-component hat zwei Funktionen.

  1. Abmessungen des iFrames ermitteln
  2. Kommunikation mit Looker Studio verwalten

Ereignisse abonnieren

Wenn Nutzende mit Ihrer Visualisierung interagieren, z. B. durch Ändern ausgewählter Felder, oder die Größe der Komponente anpassen, sendet Looker Studio Ereignisse an Ihre Visualisierung.

dscc.subscribeToData registriert einen Callback, der für jede postMessage-Ereignis aus Looker Studio. Dem Callback wird ein data-Element übergeben, -Objekt enthält.

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 zu vom Nutzer ausgewählten Feldern
interactions Vom Nutzer ausgewählte Interaktionen
theme Informationen zum Berichtsdesign
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),
}

Unterschiedliche Visualisierungen erfordern unterschiedliche Datenformate. Zwei gängige Formate sind ein Array aus 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 verwendet. Diese Transformationen lassen sich problemlos Datenformaten zuordnen, die häufig von JavaScript erwartet werden. Visualisierungsbibliotheken. Die beiden unterstützten Transformationen sind: objectTransform, und tableTransform, die ein Array zurückgibt. von Arrays.

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 Sie über die dscc.objectTransform-Format.


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 (für Wenn für ein Sankey-Diagramm zwei Dimensionen definiert sind, Transformation abhängig vom Anwendungsfall, da das von Looker zurückgegebene Datenformat Studio sieht dann ungefähr so aus:


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 Sie über die dscc.tableTransform-Format.


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});