כתיבת התצוגה החזותית

הערה: התכונה 'תצוגה חזותית של הקהילה' נמצאת ב'תצוגה מקדימה למפתחים'. מידע נוסף על התכונות והשיפורים שיתווספו במהלך התקופה הזו זמין בדף תצוגה מקדימה למפתחים.

כתיבת קוד התצוגה החזותית

ספריית העזרה של Looker Studio מספקת ממשק ביניכם לבין Looker Studio. כדי להשתמש בספרייה, צריך לספק פונקציית קריאה חוזרת שמציגה את התצוגה החזותית.

הפונקציה הבולטת ביותר בספרייה היא subscribeToData, שכוללת שני ארגומנטים: פונקציית 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() צריכה למחוק את אזור העריכה בכל פעם שקוראים לה. אחרת, הוא עלול להוסיף באופן קבוע תצוגות חזותיות ל-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.json

הפרמטר devMode של המניפסט קובע את התנהגות השמירה במטמון של התצוגה החזותית. בזמן פיתוח התצוגה החזותית, הערך devMode צריך להיות true כדי לוודא שרענונים קשיחים טוענים את הגרסה העדכנית של המשאבים. ברגע שהקוד יציב, הערך devMode אמור להיות false כדי להבטיח שדוחות עם תצוגות חזותיות של הקהילה נטענים במהירות. במדריך המתקדם בנושא שמירה במטמון תוכלו לקרוא מידע נוסף על שמירה במטמון.

השלבים הבאים

אחרי שיצרתם את הקוד להמחשה, תוכלו ללמוד איך לארח את התצוגה החזותית.