כתיבת קוד התצוגה החזותית
ספריית העזרה של 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.
לדוגמה:
// 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
הגדרת המניפסט
קובץ המניפסט של הוויזואליזציה מספק מטא-נתונים על התצוגה החזותית, וכן מידע על המיקום של משאבי התצוגה החזותית. המיקום של קובץ המניפסט נקרא 'מזהה רכיב', והוא משמש לטעינת תצוגה חזותית של הקהילה.
בודקים את קובץ העזר של המניפסט כדי לראות מניפסט לדוגמה.
הפרמטר devMode
של המניפסט קובע את התנהגות השמירה במטמון
של התצוגה החזותית. בזמן פיתוח התצוגה החזותית, הערך devMode
צריך להיות true
כדי לוודא שרענונים קשיחים טוענים את הגרסה העדכנית של המשאבים. ברגע שהקוד יציב, הערך devMode
אמור להיות false
כדי להבטיח שדוחות עם תצוגות חזותיות של הקהילה נטענים במהירות. במדריך המתקדם בנושא שמירה במטמון תוכלו לקרוא מידע נוסף על שמירה במטמון.
השלבים הבאים
אחרי שיצרתם את הקוד להמחשה, תוכלו ללמוד איך לארח את התצוגה החזותית.