使用輔助程式庫

Looker Studio 使用 postMessage 介面，將資料和樣式資訊提供給包含社群視覺呈現的 iframe。本指南將詳細說明如何使用輔助程式庫。

針對社群視覺呈現，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 程式庫提供兩種轉換作業，可讓您直接使用這些資料格式。

這兩個轉換作業的資訊列載於程式庫參考資料中。這類轉換作業可輕鬆對應至 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});