نوشتن تجسم خود

نوشتن کد مصورسازی

کتابخانه کمکی Looker Studio رابطی بین شما و Looker Studio فراهم می‌کند. برای استفاده از این کتابخانه، یک تابع فراخوانی (callback function) ارائه دهید که تجسم (visualization) را رندر کند.

برجسته‌ترین تابع در این کتابخانه subscribeToData است که دو آرگومان می‌گیرد: یک تابع callback که تجسم را رندر می‌کند و یک شیء options که نوع تبدیلی را که می‌خواهید داده‌هایتان انجام دهند مشخص می‌کند. برای کسب اطلاعات بیشتر، مرجع کتابخانه را بررسی کنید.

در ادامه، خلاصه‌ای از اینکه تجسم‌سازی شما در جاوااسکریپت چگونه می‌تواند باشد، ارائه شده است.

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 فایل‌های جاوا اسکریپت را بارگذاری و اجرا می‌کند، نه فایل‌های HTML. تمام دستکاری‌های DOM باید از طریق جاوا اسکریپت انجام شود.

برای مثال: کد زیر یک div تعریف و به DOM اضافه می‌کند.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

بسته‌بندی کد

مصورسازی‌های انجمن Looker Studio فقط به شما امکان بارگذاری یک فایل جاوا اسکریپت را می‌دهند. کد آپلود شده باید یک فایل واحد باشد که شامل کتابخانه کمکی dscc، هرگونه کتابخانه مصورسازی جاوا اسکریپت و کد مصورسازی شما باشد.

برای انجام این کار در bash، می‌توانید از دستور cat مانند زیر استفاده کنید.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

تعریف مانیفست

فایل مانیفست مصورسازی، فراداده‌هایی در مورد مصورسازی و همچنین اطلاعاتی در مورد مکان منابع مصورسازی ارائه می‌دهد. مکان فایل مانیفست به عنوان "شناسه مؤلفه" شناخته می‌شود و برای بارگذاری مصورسازی یک جامعه استفاده می‌شود.

برای مشاهده نمونه فایل manifest، مرجع manifest را بررسی کنید.

پارامتر devMode در مانیفست، رفتار ذخیره‌سازی (caching) تجسم را تعیین می‌کند. هنگام توسعه تجسم، devMode باید true باشد تا اطمینان حاصل شود که به‌روزرسانی‌های سخت، آخرین نسخه منابع را بارگذاری می‌کنند. پس از پایدار شدن کد، devMode باید false باشد تا اطمینان حاصل شود که گزارش‌های دارای تجسم‌های جامعه به سرعت بارگذاری می‌شوند. برای کسب اطلاعات بیشتر در مورد ذخیره‌سازی، به راهنمای پیشرفته ذخیره‌سازی مراجعه کنید.

مراحل بعدی

حالا که کد مربوط به مصورسازی خود را نوشته‌اید، یاد بگیرید که چگونه مصورسازی خود را میزبانی کنید .