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