Looker Studio 使用 postMessage 介面,將資料和樣式資訊提供給包含社群視覺呈現的 iframe。本指南將詳細說明如何使用輔助程式庫。
針對社群視覺呈現,ds-component 提供兩種函式。
- 取得 iframe 的尺寸
- 管理與 Looker Studio 之間的通訊
訂閱活動
使用者與視覺呈現互動時 (例如變更所選欄位、樣式或調整元件大小),Looker Studio 會將事件傳送至視覺化圖表。
dscc.subscribeToData
會註冊回呼,因 Looker Studio 中的每個 postMessage
事件叫用這個回呼。回呼會傳遞 data
物件。
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});
傳回的資料
這兩種資料轉換都會傳回含有五個鍵的物件。
鍵 | 目的 |
---|---|
style |
使用者選取的預設樣式資訊 |
fields |
使用者選取的欄位資訊 |
interactions |
使用者所選互動 |
theme |
報表主題資訊 |
tables |
資料列 |
dateRanges |
預設與比較日期範圍 |
資料格式:
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById),
}
不同的圖表需要的資料格式不同。兩種常見的格式是陣列或物件陣列。ds-component 程式庫提供兩種轉換作業,可讓您直接使用這些資料格式。
這兩個轉換作業的資訊列載於程式庫參考資料中。這類轉換作業可輕鬆對應至 JavaScript 視覺化程式庫常用的資料格式。這兩個支援的轉換如下:objectTransform
、傳回物件陣列,以及會傳回陣列陣列的 tableTransform
。
dscc.objectTransform
部分圖表會預期資料以物件陣列的形式呈現。
例如:
var data = [
{'colA': 'hello', 'colB', 'world'},
{'colA': 'hello', 'colB', 'world'}
];
以下程式碼顯示如何以 dscc.objectTransform
格式存取物件陣列。
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]
};
};
}
如果資料區段定義讓使用者可以輸入多個欄位 (例如,如果針對三條形圖定義兩個維度),則轉換將取決於您的用途,因為 Looker Studio 傳回的資料格式會如下所示:
var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]
dscc.tableTransform
部分視覺化程式庫需要陣列的陣列。
例如:
var data = [
['hello', 1],
['world', 2]
];
以下程式碼顯示如何以 dscc.tableTransform
格式存取資料列。
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});