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

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

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

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

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

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

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