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

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

كتابة رمز التصور

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

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

بعد كتابة الرمز البرمجي الخاص بتصميمك، تعرَّف على كيفية استضافة التصميم.