การเขียนการแสดงภาพ

หมายเหตุ: ฟีเจอร์การแสดงภาพข้อมูลจากชุมชนอยู่ใน "ตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์" หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์และการปรับปรุงที่กำลังจะเกิดขึ้นในช่วงระยะเวลานี้ ให้ไปที่หน้าตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์

การเขียนโค้ดการแสดงภาพ

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

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

ข้อมูลต่อไปนี้จะแสดงให้เห็นลักษณะของ JavaScript การแสดงผล

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

มีสิ่งสำคัญ 2-3 อย่างที่ควรคำนึงถึงเมื่อเขียนการแสดงภาพข้อมูลจากชุมชน

การอัปเดตจากฟังก์ชัน subscribeToData จะเกิดขึ้นเมื่อข้อมูล การจัดรูปแบบ หรือขนาดของ iframe มีการเปลี่ยนแปลง

ประเด็นหลัก: ฟังก์ชัน drawViz() ควรล้าง Canvas ทุกครั้งที่เรียก มิฉะนั้น ระบบอาจเพิ่มการแสดงภาพลงใน iframe อย่างต่อเนื่อง

เช่น

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

Looker Studio จะโหลดและเรียกใช้ไฟล์ JavaScript ไม่ใช่ HTML การปรับแต่ง DOM ทั้งหมด ต้องเกิดขึ้นผ่าน JavaScript

ตัวอย่างเช่น โค้ดต่อไปนี้จะกำหนดและเพิ่ม div ต่อท้าย DOM

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

การรวมโค้ด

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

หากต้องการดำเนินการดังกล่าวใน Bash ให้ใช้คำสั่ง cat ตามตัวอย่างด้านล่างนี้

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

การกําหนดไฟล์ Manifest

ไฟล์ Manifest ของการแสดงภาพให้ข้อมูลเมตาเกี่ยวกับภาพ ตลอดจนข้อมูลเกี่ยวกับตำแหน่งของทรัพยากรภาพ ตำแหน่งของไฟล์ Manifest จะเรียกว่า "รหัสคอมโพเนนต์" และใช้เพื่อโหลดการแสดงภาพข้อมูลจากชุมชน

ตรวจสอบการอ้างอิงไฟล์ Manifest เพื่อดูตัวอย่างไฟล์ Manifest

หมายเหตุ: ชื่อไฟล์ Manifest ต้องเป็น manifest.json

พารามิเตอร์ devMode ของไฟล์ Manifest จะกำหนดพฤติกรรมการแคชของการแสดงผล ขณะพัฒนาการแสดงภาพ devMode ควรเป็น true เพื่อให้แน่ใจว่าการรีเฟรชใหม่ทั้งหมดโหลดทรัพยากรเวอร์ชันล่าสุด เมื่อโค้ดเสถียรแล้ว devMode ควรเป็น false เพื่อให้รายงานที่มีการแสดงภาพข้อมูลจากชุมชนโหลดได้อย่างรวดเร็ว ดูข้อมูลเพิ่มเติมเกี่ยวกับการแคชได้ในคำแนะนำขั้นสูงสำหรับการแคช

ขั้นตอนถัดไป

เมื่อคุณเขียนโค้ดสำหรับการแสดงภาพแล้ว โปรดดูวิธีโฮสต์การแสดงภาพ