Looker Studio 使用 postMessage 接口向包含 和社区可视化图表本指南详细介绍了如何使用帮助程序库。
对于社区可视化图表,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 库提供 转换,旨在帮助您直接了解这些数据格式。
这两种转换记录在 library-reference 中。它们可轻松映射到 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});