使用帮助程序库

Looker Studio 使用 postMessage 接口向包含 和社区可视化图表本指南详细介绍了如何使用帮助程序库。

对于社区可视化图表，ds-component 提供两项功能。

  1. 获取 iframe 的尺寸
  2. 管理与 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});