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

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

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

توفّر مكتبة أدوات المساعدة في "مركز البيانات" واجهة بينك وبين "مركز البيانات". لاستخدام المكتبة، يجب توفير دالة رد اتصال تعرض التمثيل المرئي.

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

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

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