كتابة التصور الخاص بك

ملاحظة: تتوفّر ميزة "التمثيل البصري للمنتدى" ضِمن "معاينة المطوِّر". للتعلّم المزيد حول الميزات والتحسينات القادمة خلال هذه الفترة، تفضل بزيارة صفحة معاينة المطوِّر.

كتابة التعليمة البرمجية التصور

توفّر مكتبة مساعد Looker Studio واجهة بينك وبين Looker. استوديو YouTube. ولاستخدام المكتبة، عليك توفير دالة استدعاء تعرض مؤثرات عرض البيانات.

الدالة الأكثر بروزًا في المكتبة هي 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 لضمان أن تكون التقارير ذات تحميل تصورات المجتمع بسرعة. لمزيد من المعلومات عن التخزين المؤقت، يمكنك الاطّلاع على الدليل المتقدم حول التخزين المؤقت

الخطوات التالية

الآن بعد أن تمت كتابة التعليمة البرمجية للتصور الخاص بك، تعرف على كيفية استضافة التصور