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 về kiểu cho iframe chứa hình ảnh trực quan của cộng đồng. Hướng dẫn này cung cấp thông tin chi tiết hơn về cách sử dụng thư viện trợ giúp.

Đối với hình ảnh dữ liệu cộng đồng, ds-component có 2 chức năng.

  1. Lấy kích thước của iframe
  2. Quản lý thông tin liên lạc với Looker Studio

Đăng ký nhận thông báo về 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, kiểu hoặc kích thước thành phần đã chọ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 từ 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 phép 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 do người dùng chọn và kiểu mặc định
fields Thông tin về các trường do người dùng chọn
interactions Tương tác do người dùng chọn
theme Thông tin về giao diện 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),
}

Các phương pháp trực quan hoá khác nhau yêu cầu các định dạng dữ liệu khác nhau. Hai định dạng phổ biến là mảng của mảng hoặc mảng của đối tượng. Thư viện ds-component cung cấp 2 phép biến đổi được thiết kế để đưa bạn đến thẳng 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. Những phép biến đổi này dễ dàng liên kết với các định dạng dữ liệu mà các thư viện trực quan hoá JavaScript thường mong đợi. Hai phép biến đổi được hỗ trợ là: objectTransform, trả về một mảng các đối tượng và tableTransform, trả về một mảng các mảng.

dscc.objectTransform

Một số hình ảnh hoá dự kiến dữ liệu sẽ là một mảng các đối tượng.

Ví dụ:

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

Đoạn mã sau đây cho biết cách truy cập vào 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 phần dữ liệu được xác định sao cho người dùng có thể nhập nhiều trường (ví dụ: nếu có 2 phương diện được xác định cho một biểu đồ Sankey), thì phép biến đổi sẽ phụ thuộc vào trường hợp sử dụng của bạn, vì định dạng dữ liệu do Looker Studio trả về sẽ có dạng như sau:


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

dscc.tableTransform

Một số thư viện trực quan hoá mong đợi một mảng các mảng.

Ví dụ:

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

Đoạn mã sau đây cho biết cách truy cập vào một hàng trong số các hàng ở đị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});