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

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

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

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

הפונקציה הבולטת ביותר בספרייה היא 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

הגדרת המניפסט

קובץ המניפסט של התצוגה החזותית מספק מטא-נתונים על התצוגה החזותית, כמו וגם מידע על המיקום של משאבי ההמחשה. המיקום של קובץ המניפסט נקרא "component ID", והוא משמש לטעינת תצוגה חזותית של קהילות.

בודקים את קובץ העזר של המניפסט כדי לראות מניפסט לדוגמה.

הערה: שם המניפסט חייב להיות manifest.json

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

השלבים הבאים

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