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

Looker Studio sử dụng postMessage để cung cấp thông tin dữ liệu và kiểu vào iframe chứa hình ảnh dữ liệu 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 trình trợ giúp thư viện của bạn.

Để xem hình ảnh dữ liệu cộng đồng, ds-component cung cấp hai chức năng.

  1. Lấy kích thước của iframe
  2. Quản lý hoạt động giao tiếp 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, chẳng hạn như thay đổi các trường đã chọn, định kiểu hoặc đổi kích thước thành phần, Looker Studio sẽ gửi sự kiện đến trực quan.

dscc.subscribeToData đăng ký một lệnh gọi lại sẽ được gọi cho mỗi postMessage sự kiện từ Looker Studio. Lệnh gọi lại được truyền một 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 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 Lượt tương tác do người dùng chọn
theme Báo cáo thông tin về chủ đề
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 hình ảnh trực quan khác nhau đòi hỏi định dạng dữ liệu khác nhau. Hai định dạng phổ biến là một mảng mảng hoặc một mảng các đối tượng. Thư viện thành phần ds cung cấp hai được thiết kế để giúp bạn chuyển thẳng đến các định dạng dữ liệu này.

Hai biến đổi được ghi lại trong library-reference. Các biến đổi bản đồ một cách dễ dàng sang các định dạng dữ liệu thường được JavaScript mong đợi các thư viện trực quan hoá. Hai biến đổi được hỗ trợ là: objectTransform, phương thức này trả về một mảng các đối tượng và tableTransform trả về một mảng mảng.

dscc.objectTransform

Một số hình ảnh trực quan yêu cầu dữ liệu ở dạng một mảng đố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 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 để người dùng có thể nhập nhiều trường (ví dụ: ví dụ: nếu có hai chiều được xác định cho một sơ đồ sankey), 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 do Looker trả về Studio 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 trực quan hoá yêu cầu một mảng các mảng.

Ví dụ:

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

Mã sau đây biểu thị cách truy cập vào một hàng của Đị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});