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

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

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

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

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

الآن بعد أن كتبت رمز العرض المرئي، تعرَّف على كيفية استضافة العرض المرئي.