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

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

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

ไลบรารีตัวช่วยของ 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})

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

การอัปเดตจากฟังก์ชัน 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เพื่อให้มั่นใจว่ารายงานที่มี ภาพข้อมูลจากชุมชนจะโหลดได้อย่างรวดเร็ว ดูข้อมูลเพิ่มเติมเกี่ยวกับการแคชได้ที่คู่มือขั้นสูงเกี่ยวกับการแคช

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

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