إنشاء عروض مرئية مخصّصة في Looker Studio

1. مقدمة

تتيح لك Looker Studio إنشاء لوحات بيانات مباشرة وتفاعلية تحتوي على عروض مرئية رائعة للبيانات، وذلك مجانًا. يمكنك استرجاع بياناتك من مجموعة متنوعة من المصادر وإنشاء تقارير غير محدودة في Looker Studio، مع إمكانيات التعديل والمشاركة الكاملة. لقطة الشاشة التالية هي مثال على تقرير Looker Studio:

ec3de192ad28e93e.png

( انقر هنا لعرض نموذج التقرير هذا في Looker Studio)

توفّر أداة Looker Studio العديد من أنواع الرسوم البيانية المدمجة، بما في ذلك الرسوم البيانية الخطية والرسوم البيانية الشريطية والرسوم البيانية الدائرية والرسوم البيانية بالنقاط المبعثرة. تسمح لك العروض المرئية للمنتدى بإنشاء واستخدام مرئيات JavaScript مخصّصة في Looker Studio. يمكنك أيضًا مشاركة تصورات منتداك مع الآخرين ليتمكنوا من استخدامها مع بياناتهم الخاصة.

ما ستتعرَّف عليه

في هذا التمرين المعملي من التعليمات البرمجية، ستتعلم ما يلي:

  • طريقة عمل العرض المرئي للمنتدى في Looker Studio
  • كيفية إنشاء عرض مرئي للمنتدى باستخدام مكتبة مساعد مكوّنات dscc
  • كيفية استخدام التمثيل البصري للمنتدى في تقرير Looker Studio

المتطلبات

لإكمال هذا التمرين المعملي عن التعليمات البرمجية، ستحتاج إلى:

  • الوصول إلى الإنترنت ومتصفّح الويب
  • حساب على Google
  • الوصول إلى حزمة تخزين على Google Cloud Platform
  • الإلمام بلغة JavaScript.

2. استطلاع سريع

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

يهمّني العرض المرئي للبيانات بشكل عام. أريد معرفة المزيد من المعلومات عن أداة Looker Studio. أريد إنشاء مرئيات للمنتدى خاصة بي. أحاول دمج Looker Studio مع منصة أخرى. أنا مهتم بحلول Google Cloud.

كيف تخطط لاستخدام هذا الدرس التطبيقي/البرنامج التعليمي حول الترميز؟

تنقَّل بين عناصر البيانات فقط. اقرأ التعليمات وأكمِل التمارين.

ما هو تقييمك لتجربتك في استخدام Looker Studio؟

لم أسمع عنها من قبل. أعرف ما هي، ولكنّني لا أستخدمها أستخدمها من حين لآخر أستخدمه بانتظام. أنا مستخدم خبير.

ما هو أفضل وصف لخلفيتك؟

مطوّر البرامج مصمِّم / أخصائي في تجربة المستخدم: النشاط التجاري / البيانات / المحلل المالي. عالِم بيانات / مهندس بيانات. خبير مختص في التسويق / وسائل التواصل الاجتماعي / التحليلات الرقمية. غير ذلك.

ما هي مكتبات التصوير في JavaScript التي تهتم باستخدامها؟

D3.js قوائم الأغاني الرائجة من Google Chart.js كتيّب Highcharts Plot.ly غير ذلك

انتقِل إلى الصفحة التالية لإرسال معلومات الاستطلاع.

3- نظرة عامة على تصورات المنتدى

تسمح لك العروض المرئية لمنتدى Looker Studio بإنشاء واستخدام مرئيات JavaScript مخصّصة في لوحات البيانات.

في هذا الدرس التطبيقي حول الترميز، ستتمكّن من إنشاء تمثيل بصري لمنتدى رسم بياني على شكل جدول يتيح استخدام سمة واحدة ومقياس واحد وتصميم عنوان الجدول.

cde32c0546ea89af.gif

4. سير عمل تطوير المرئيات في المنتدى

لإنشاء عرض مرئي للمنتدى، يجب توفّر الملفات التالية في حزمة تخزين على Google Cloud Platform، والتي ستنشئها في خطوة لاحقة:

اسم الملف

نوع الملف

الغرض

manifest.json*

JSON

بيانات التعريف حول التصور ومواقع جميع موارد التصور

viz-codelab.json

JSON

البيانات وخيارات ضبط النمط للوحة "الخصائص"

viz-codelab.js

JavaScript

رمز JavaScript لعرض التصور.

viz-codelab.css (اختياري)

CSS

أنماط CSS للتمثيل البصري.

*البيان هو الملف الوحيد الذي له اسم مطلوب. يمكن تسمية الملفات الأخرى بشكل مختلف، طالما تم تحديد اسمها/موقعها في ملف البيان.

5- كتابة مرحبًا بالعالم! التصور

في هذا القسم، ستضيف التعليمة البرمجية المطلوبة لعرض رسالة Hello, world بسيطة! مؤثرات عرض البيانات.

كتابة مصدر JavaScript للعرض المرئي

الخطوة 1: نزِّل ملف dscc.min.js من صفحة مكتبة مكونات منتدى Looker Studio (dscc) وانسخه إلى دليل العمل.

الخطوة 2: انسخ الرمز التالي في محرِّر نصوص واحفظه باسم viz-codelab-src.js في دليل العمل المحلي.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

تحضير ملف حزمة JavaScript

الخطوة 3: يمكنك دمج كل ملفات JavaScript المطلوبة في ملف واحد عن طريق نسخ محتوى مكتبة مساعد العروض المرئية (dscc.min.js) وملف viz-codelab-src.js إلى ملف جديد باسم viz-codelab.js. يمكن تنفيذ الأوامر التالية لإجراء سلسلة من الملفات. كرِّر هذه الخطوة في كل مرة تُعدِّل فيها رمز التمثيل البصري للمصدر.

نص برمجي للتسلسل في نظام التشغيل Linux/Mac

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

النص البرمجي للتسلسل في Windows

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6- كتابة تصور CSS

يحدد ملف CSS نمط التصور الخاص بك، وهو اختياري. انسخ خدمة مقارنة الأسعار (CSS) التالية واحفظها باسم viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. كتابة إعدادات JSON

تحدد تهيئة التصورات سمات البيانات والنمط المدعومة والمطلوبة من قِبل التصور. يتطلّب هذا العرض المرئي في هذا الدرس التطبيقي حول الترميز بُعدًا واحدًا ومقياسًا واحدًا، كما يتضمّن عنصر نمط واحدًا لاختيار لون تعبئة. مزيد من المعلومات عن السمات والمقاييس

انسخ الرمز التالي واحفظه باسم viz-codelab.json.لمزيد من المعلومات عن المواقع التي يمكنك ضبطها، راجِع مرجع إعداد العروض المرئية للمنتدى.

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. إنشاء مشروع وحزمة على Cloud Storage

الخطوة 1: إنشاء مشروع Google Cloud Platform (GCP) أو استخدام مشروع حالي

الخطوة 2: إنشاء حزمة Google Cloud Platform فئة مساحة التخزين المقترَحة هي "الإقليمية". يُرجى الانتقال إلى مقالة أسعار Cloud Storage للحصول على تفاصيل حول الفئات المجانية. ملاحظة: من غير المحتمل أن تتحمّل مساحة تخزين العرض المرئي أي تكاليف لفئة التخزين الإقليمية.

الخطوة 3: دوِّن اسم/مسار الحزمة، بدءًا من القسم بعد الحزم/. ويُشار إلى المسار باسم "رقم تعريف المكوّن" في Looker Studio وتُستخدم لتحديد التصور ونشره.

49cd3d8692e6bf51.png

9. كتابة ملفian.json

يوفر ملف البيان معلومات حول موقع التصوير والموارد. يجب تسميتها "manifest.json" وموضعها في الحزمة/المسار الذي تم إنشاؤه في الخطوة السابقة، أي المسار نفسه المستخدَم في رقم تعريف المكوِّن.

انسخ الرمز التالي في محرِّر نصوص واحفظه باسم manifest.json.

لمزيد من المعلومات حول البيان، يُرجى الانتقال إلى مستندات مرجع البيان.

ملف البيان.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. تحميل ملفات العروض المرئية إلى Google Cloud Storage

  1. حمِّل ملفات manifest.json وviz-codelab.js وviz-codelab.json وviz-codelab.css إلى حزمة Google Cloud Storage باستخدام واجهة الويب أو أداة سطر الأوامر gsutil. كرر هذا في كل مرة تقوم فيها بتحديث التصور الخاص بك.

84c15349e32d9fa6.png

أوامر التحميل في أداة gsutil

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. اختبار "التمثيل البصري للمنتدى" في Looker Studio

5ce4532d02aac5e8.gif

إنشاء تقرير وإضافة البيانات

الخطوة 1: انسخ عنوان URL لمجموعة بيانات نماذج "التمثيل البصري للمنتدى". يمكنك بدلاً من ذلك استخدام أي مصدر بيانات تفضّله وتخطّي الخطوات التالية.

الخطوة 2: سجِّل الدخول إلى Looker Studio. في أعلى يمين الصفحة، انقر على + إنشاء، ثم اختَر تقرير.

الخطوة 3: ستظهر لك أداة تعديل التقارير مع فتح لوحة إضافة بيانات إلى التقرير.

الخطوة 4: في علامة التبويب الربط بالبيانات، اختَر موصِّل "جداول بيانات Google" من Google.

الخطوة 5: اختَر عنوان URL والصِق عنوان URL لـ "جدول بيانات Google" من الخطوة 1.

الخطوة 6: في أسفل يسار الصفحة، انقر على إضافة.

الخطوة 7: إذا طُلب منك تأكيد أنت على وشك إضافة بيانات إلى هذا التقرير، انقر على إضافة إلى التقرير. يتمّ إنشاء تقرير بلا عنوان، ويُضاف جدول تلقائي إلى التقرير يحتوي على عيّنات بيانات. اختياريًا، حدِّد الجدول التلقائي واحذفه بحيث يتوفّر لك تقرير فارغ.

إضافة مرئيات المنتدى إلى التقرير

الخطوة 1: في شريط الأدوات، انقر على رمز المرئيات والمكوّنات في المنتدى 1d6173ab730fc552.png .

الخطوة 2: انقر على + استكشاف المزيد لفتح معرض المنتدى.

الخطوة 3: انقر على إنشاء التمثيل البصري الخاص بك

الخطوة 4: ضمن اختبار التمثيل البصري للمنتدى وإضافته، أدخِل مسار البيان وانقر على إرسال. مسار البيان هو اسم حزمة Google Cloud Storage ومسارها يشيران إلى موقع ملف بيان العرض المرئي، مسبوقًا بـ gs://.، على سبيل المثال: gs://community-viz-docs/viz-codelab. في حال أدخلت مسار بيان صالحًا، من المفترض أن يتم عرض بطاقة التمثيل البصري.

الخطوة 5: انقر على بطاقة العرض المرئي لإضافتها إلى تقريرك.

الخطوة 6: امنح موافقتك على السماح بعرض التمثيل البصري إذا طُلب منك ذلك.

الخطوة 7: يمكنك اختياريًا تعديل السمة والمقياس المحدّدَين للجدول. إذا كنت تستخدم مجموعة البيانات النموذجية المقدَّمة، اضبط السمة على البلد والمقياس على السكان. لن يكون لذلك أي تأثير على مؤثرات عرض التصور إلا في وقت لاحق من الدرس التطبيقي حول الترميز.

تعكس لوحة الخصائص على الجانب الأيسر العناصر التي تم ضبطها في viz-codelab.json.

ضمن لوحة الإعداد، يسمح التمثيل البصري بسمة واحدة ومقياس واحد.

6ebe61619e340878.png

ضمن لوحة النمط، يشتمل العرض المرئي على عنصر واحد لتحديد نمط عنوان الجدول. في هذه المرحلة، لن يكون للتحكم في النمط أي تأثير على التصور حتى يتم تحديث التعليمة البرمجية للمرئيات في خطوة لاحقة. ملاحظة: سترى خيارات نمط إضافية للتمثيل البصري لم تُحدِّدها في ملف الإعداد. هذا أمر متوقع، نظرًا لأن جميع التصورات تحتوي على مجموعة من عناصر التحكم المشتركة المتاحة تلقائيًا.

2b78982c01d6359f.png

12. عرض البيانات كجدول

في هذا القسم، ستُعدِّل التمثيل البصري لعرض مجموعة البيانات النموذجية للتمثيل البصري للمنتدى كجدول.

وتتوفّر البيانات المطلوب عرضها في الكائن tables، ويتم تنظيمها استنادًا إلى عملية التحويل التي يحدِّدها التمثيل البصري. في هذا الدرس التطبيقي حول الترميز، طلب العرض المرئي تنسيق الجدول (tableTransform) الذي يتضمّن كائن headers وكائن rows يحتوي على جميع البيانات التي نحتاجها لعرض الجدول.

الخطوة 1: استبدل محتوى viz-codelab-src.js بالرمز أدناه.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

الخطوة 2: إعداد ملف حزمة JavaScript، ثم تحميل ملفات العروض المرئية واستبدالها في Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير Looker Studio لإعادة تحميل التمثيل البصري للمنتدى واختباره. يعرض الجدول الآن البيانات (أي جدول بيانات Google) ويعرض أعمدة العناوين استنادًا إلى السمة والمقياس المحدّدَين. تغيير حجم التمثيل البصري للاطّلاع على جميع الصفوف.

66db5bde61501b01.png

13. تطبيق تغييرات النمط ديناميكيًا

في هذا القسم، ستُعدِّل العرض المرئي لتصميم عنوان الجدول استنادًا إلى لون التعبئة المحدّد في لوحة النمط.

تتوفر حالة جميع عناصر النمط في الكائن style، حيث يتم تحديد كل مفتاح عنصر استنادًا إلى إعدادات نمط التمثيل البصري (viz-codelab.json). بالنسبة لهذا القسم، ستحصل على لون التعبئة المحدد وتستخدمه لتحديث لون خلفية رأس الجدول.

الخطوة الأولى: استبدِل الرمز في ملف viz-codelab-src.js بالرمز أدناه.

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

الخطوة 2: إعداد ملف حزمة JavaScript، ثم تحميل ملفات العروض المرئية واستبدالها في Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير Looker Studio لإعادة تحميل التمثيل البصري للمنتدى واختباره.

الخطوة 4: ضمن لوحة النمط، استخدِم عنصر التحكّم في نمط لون خلفية العنوان لتغيير لون خلفية رأس الجدول.

cde32c0546ea89af.gif

تهانينا! لقد أنشأت رسمًا بيانيًا للمنتدى في Looker Studio. بهذا نصلك إلى نهاية هذا الدرس التطبيقي حول الترميز. والآن، لنرى الخطوات التالية التي يمكنك اتخاذها.

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

توسيع نطاق التصور

إنجاز المزيد باستخدام العروض المرئية للمنتدى

مراجع إضافية

في ما يلي مصادر مختلفة يمكنك الوصول إليها لمساعدتك في فهم المواد التي يتناولها هذا الدرس التطبيقي حول الترميز.

نوع المورد

ميزات المستخدم

ميزات المطوّرين

الوثائق

مركز المساعدة

مستندات المطوِّرين

أخبار و التعديلات

الاشتراك في Looker Studio > إعدادات المستخدم

القائمة البريدية للمطوّرين

طرح الأسئلة

منتدى المستخدمين

أمثلة

الإبلاغ عن المعرض

مستودع البرامج المفتوحة المصدر