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

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

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

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

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

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

dscc.subscribeToData ลงทะเบียนโค้ดเรียกกลับที่จะมีการเรียกใช้สำหรับเหตุการณ์ postMessage แต่ละรายการจาก Looker Studio โค้ดเรียกกลับจะส่งผ่านออบเจ็กต์ 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-component มีการแปลง 2 รูปแบบ ซึ่งออกแบบมาเพื่อให้คุณเข้าถึงรูปแบบข้อมูลเหล่านี้ได้โดยตรง

การเปลี่ยนรูปแบบทั้ง 2 รายการมีการบันทึกไว้ในการอ้างอิงไลบรารี ซึ่งจะเปลี่ยนรูปแบบแมปเป็นรูปแบบข้อมูลที่ไลบรารีการแสดงภาพ 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});