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

Data 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 dữ liệu 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ý hoạt động giao tiếp với Data Studio

Đăng ký nhận sự kiện

Khi người dùng tương tác với hình ảnh dữ liệu 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), Data Studio sẽ gửi sự kiện đến hình ảnh dữ liệu 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ừ Data Studio. Lệnh gọi lại được truyền một data đối tượng.

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 Data 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 Các lượt 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 của 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 dữ liệu 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 chứa các mảng hoặc mảng chứa các đố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 được ghi lại trong tài liệu tham khảo về thư viện . Các phép biến đổi này dễ dàng ánh xạ đến các định dạng dữ liệu mà thư viện hình ảnh dữ liệu JavaScript thường mong đợi. Hai phép biến đổi được hỗ trợ là: objectTransform (trả về một mảng chứa các đối tượng) và tableTransform (trả về một mảng chứa các mảng).

dscc.objectTransform

Một số hình ảnh dữ liệu mong đợi dữ liệu ở dạng mảng chứa 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 chứa các đố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 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 Data Studio trả về sẽ giống như:


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

dscc.tableTransform

Một số thư viện hình ảnh dữ liệu mong đợi một mảng chứa 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 chứa 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});