Sử dụng thư viện trình trợ giúp

Looker Studio sử dụng giao diện postMessage để cung cấp dữ liệu và thông tin định kiểu cho iframe chứa hình ảnh cộng đồng. Hướng dẫn này cung cấp thêm thông tin chi tiết về cách sử dụng thư viện trợ giúp.

Đối với hình ảnh trực quan cộng đồng, ds-component phục vụ hai hàm.

  1. Lấy kích thước của iframe
  2. Quản lý hoạt động liên lạc bằng Looker Studio

Đăng ký sự kiện

Khi người dùng tương tác với hình ảnh trực quan của bạn, chẳng hạn như thay đổi các trường đã chọn, kiểu hoặc đổi kích thước thành phần, Looker Studio sẽ gửi các sự kiện đến hình ảnh trực quan của bạn.

dscc.subscribeToData đăng ký một lệnh gọi lại sẽ được gọi cho mỗi sự kiện postMessage qua Looker Studio. Lệnh gọi lại được truyền một đối tượng 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});

Dữ liệu được trả về

Cả hai quá trình biến đổi dữ liệu đều trả về một đối tượng có 5 khoá.

Khoá Mục đích
style Thông tin về kiểu mặc định và do người dùng chọn
fields Thông tin về các trường do người dùng chọn
interactions Các lượt tương tác do người dùng chọn
theme Thông tin về chủ đề báo cáo
tables Hàng dữ liệu
dateRanges Phạm vi ngày mặc định và phạm vi ngày so sánh

Định dạng dữ liệu:

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById),
}

Mỗi hình thức trực quan hoá yêu cầu định dạng dữ liệu riêng. 2 định dạng phổ biến là mảng mảng hoặc mảng đối tượng. Thư viện thành phần ds cung cấp 2 phép biến đổi được thiết kế để giúp bạn chuyển thẳng đến các định dạng dữ liệu này.

Hai phép biến đổi này được ghi lại trong library-reference (tham chiếu thư viện). Các biến đổi này dễ dàng ánh xạ tới các định dạng dữ liệu thường được các thư viện trực quan hoá JavaScript mong đợi. 2 phép biến đổi được hỗ trợ là: objectTransform (trả về một mảng đối tượng) và tableTransform (trả về một mảng gồm các mảng).

dscc.objectTransform

Một số hình ảnh trực quan yêu cầu dữ liệu dưới dạng một mảng đối tượng.

Ví dụ:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

Mã sau đây cho biết cách truy cập một mảng đối tượng từ định dạng 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]
    };
  };

}

Nếu các mục dữ liệu được xác định để người dùng có thể nhập nhiều trường (ví dụ: nếu có hai phương diện được xác định cho biểu đồ khoá tìm kiếm), thì biến đổi sẽ tuỳ thuộc vào trường hợp sử dụng của bạn, vì định dạng dữ liệu mà Looker Studio trả về sẽ trông giống như sau:


var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

dscc.tableTransform

Một số thư viện hình ảnh yêu cầu một mảng mảng.

Ví dụ:

var data = [
  ['hello', 1],
  ['world', 2]
];

Mã sau đây cho biết cách truy cập một hàng gồm các hàng từ định dạng 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});