การใช้ไลบรารีผู้ช่วย

Looker Studio ใช้ postMessage ในการให้ข้อมูลและข้อมูลการจัดรูปแบบลงใน iframe ที่มี การแสดงภาพข้อมูลจากชุมชน คู่มือนี้ให้รายละเอียดเพิ่มเติมเกี่ยวกับการใช้ตัวช่วย ไลบรารี

สำหรับการแสดงภาพข้อมูลจากชุมชน ds-component ทำหน้าที่ 2 อย่าง

1. รับขนาดของ iframe
2. จัดการการสื่อสารด้วย Looker Studio

การสมัครรับข้อมูลกิจกรรม

เมื่อผู้ใช้โต้ตอบกับการแสดงภาพของคุณ เช่น เปลี่ยนช่องที่เลือก หรือการปรับขนาดคอมโพเนนต์ก็ได้ โดย Looker Studio จะส่งเหตุการณ์ไปยัง การแสดงข้อมูลผ่านภาพ

dscc.subscribeToData จะลงทะเบียน Callback ที่จะมีการเรียกใช้สำหรับ postMessage เหตุการณ์จาก Looker Studio Callback ผ่านการตรวจสอบ 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});

ข้อมูลที่ส่งคืน

การแปลงข้อมูลทั้ง 2 รายการจะแสดงออบเจ็กต์ที่มี 5 คีย์

คีย์	วัตถุประสงค์
style	ข้อมูลรูปแบบที่ผู้ใช้เลือกและเริ่มต้น
fields	ข้อมูลช่องที่ผู้ใช้เลือก
interactions	การโต้ตอบที่ผู้ใช้เลือก
theme	รายงานข้อมูลธีม
tables	แถวข้อมูล
dateRanges	ช่วงวันที่เริ่มต้นและช่วงวันที่เปรียบเทียบ

รูปแบบของข้อมูล:

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

การแสดงภาพที่ต่างกันต้องใช้รูปแบบข้อมูลที่ต่างกัน รูปแบบที่พบได้ทั่วไป 2 รูปแบบคือ อาร์เรย์ของอาร์เรย์ หรืออาร์เรย์ของออบเจ็กต์ ไลบรารีคอมโพเนนต์ ds มี ใหม่ ซึ่งออกแบบมาเพื่อพาคุณไปยังรูปแบบข้อมูลเหล่านี้ได้ทันที

เราได้บันทึกการเปลี่ยนแปลงทั้ง 2 แบบไว้ใน library-reference เหล่านี้ แปลงแผนที่ให้เป็นรูปแบบข้อมูลที่ JavaScript ปกติต้องการได้โดยง่าย และไลบรารีการแสดงข้อมูลผ่านภาพ การเปลี่ยนรูปแบบที่รองรับ 2 รายการ ได้แก่ 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]
    };
  };

}

หากมีการกำหนดส่วนข้อมูลเพื่อให้ผู้ใช้ป้อนข้อมูลหลายช่องได้ ตัวอย่างเช่น หากมีการกำหนดมิติข้อมูล 2 รายการสำหรับแผนภาพ Sankey) แอตทริบิวต์ การเปลี่ยนรูปแบบจะขึ้นอยู่กับกรณีการใช้งานของคุณ เนื่องจากรูปแบบข้อมูลที่ 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});