این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

تجسم های سفارشی را در Looker Studio ایجاد کنید

1. مقدمه

Looker Studio به شما امکان می دهد داشبوردهای زنده و تعاملی را با تجسم داده های زیبا به صورت رایگان بسازید. داده های خود را از منابع مختلف واکشی کنید و گزارش های نامحدود در استودیو Looker ایجاد کنید، با قابلیت ویرایش و اشتراک گذاری کامل. تصویر زیر نمونه ای از گزارش Looker Studio است:

( برای مشاهده این گزارش نمونه در Looker Studio اینجا را کلیک کنید )

Looker Studio چندین نوع نمودار داخلی از جمله نمودارهای خطی، نمودار میله ای، نمودار دایره ای و نمودارهای پراکنده را ارائه می دهد. تجسم‌های انجمن به شما این امکان را می‌دهند که تجسم‌های جاوا اسکریپت سفارشی خود را در Looker Studio بسازید و استفاده کنید. همچنین می توانید تجسم های انجمن خود را با دیگران به اشتراک بگذارید تا آنها بتوانند از آنها با داده های خود استفاده کنند.

چیزی که یاد خواهید گرفت

در این آزمایشگاه کد، یاد خواهید گرفت:

نحوه عملکرد تجسم جامعه Looker Studio.
چگونه با استفاده از کتابخانه کمکی ds-component (dscc) یک تجسم جامعه بسازیم.
نحوه استفاده از تجسم انجمن خود در گزارش Looker Studio.

آنچه شما نیاز دارید

برای تکمیل این آزمایشگاه کد، شما نیاز دارید:

دسترسی به اینترنت و مرورگر وب.
یک اکانت گوگل
دسترسی به سطل فضای ذخیره سازی Google Cloud Platform.
آشنایی با جاوا اسکریپت.

2. نظرسنجی سریع

چرا این کد لبه را انتخاب کردید؟

من به طور کلی به تجسم داده ها علاقه مند هستم.

من می خواهم درباره Looker Studio اطلاعات بیشتری کسب کنم.

من می خواهم تجسم جامعه خود را ایجاد کنم.

من سعی می کنم استودیو Looker را با یک پلتفرم دیگر ادغام کنم.

من به راه حل های Google Cloud علاقه مند هستم.

چگونه می خواهید از این نرم افزار / آموزش استفاده کنید؟

فقط از طریق سرکشی.

آن را بخوانید و تمرینات را کامل کنید.

تجربه خود را با استودیو Looker چگونه ارزیابی می کنید؟

هرگز در مورد آن نشنیده اید.

میدونم چیه ولی استفاده نمیکنم

من گهگاه از آن استفاده می کنم.

من به طور منظم از آن استفاده می کنم.

من یک کاربر متخصص هستم.

چه چیزی پیشینه شما را بهتر توصیف می کند؟

توسعه دهنده.

طراح / متخصص UX.

تجارت / داده / تحلیلگر مالی.

دانشمند داده / مهندس داده.

کارشناس بازاریابی / رسانه های اجتماعی / تجزیه و تحلیل دیجیتال.

دیگر

علاقه مند به استفاده از چه کتابخانه های تجسمی جاوا اسکریپت هستید؟

D3.js

نمودارهای گوگل

Chart.js

جزوه

نمودارهای برتر

Plot.ly

دیگر

برای ارسال اطلاعات نظرسنجی به صفحه بعدی بروید.

3. مروری بر تجسم های جامعه

تجسم‌های انجمن Looker Studio به شما امکان می‌دهد تجسم‌های جاوا اسکریپت سفارشی را در داشبورد خود ایجاد و استفاده کنید.

در این لبه کد، شما یک تجسم جامعه نمودار جدول ایجاد می کنید که از 1 بعد، 1 متریک و استایل هدر جدول پشتیبانی می کند.

4. گردش کار توسعه تجسم جامعه

برای ایجاد تجسم انجمن، به فایل‌های زیر در یک سطل ذخیره‌سازی Google Cloud Platform نیاز دارید که در مرحله بعد ایجاد خواهید کرد:

نام فایل	نوع فایل	هدف
manifest.json*	JSON	فراداده در مورد تجسم و مکان همه منابع تجسم.
viz-codelab.json	JSON	گزینه های پیکربندی داده و سبک برای پانل Property.
viz-codelab.js	جاوا اسکریپت	کد جاوا اسکریپت برای ارائه تجسم.
viz-codelab.css (اختیاری)	CSS	سبک های CSS برای تجسم

*مانیفست تنها فایلی است که نام مورد نیاز دارد. تا زمانی که نام/محل آنها در فایل مانیفست مشخص شده باشد، می‌توان سایر فایل‌ها را متفاوت نام‌گذاری کرد.

5. یک سلام دنیا بنویس! تجسم

در این بخش، کد مورد نیاز برای ارائه یک Hello, world ساده را اضافه می کنید! تجسم

منبع جاوا اسکریپت تجسم را بنویسید

مرحله 1: فایل dscc.min.js را از صفحه Looker Studio Community Component Library (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 });

فایل باندل جاوا اسکریپت را آماده کنید

مرحله 3: تمام جاوا اسکریپت مورد نیاز را با کپی کردن محتویات کتابخانه کمکی تجسم ( dscc.min.js ) و فایل viz-codelab-src.js خود در یک فایل جدید به نام viz-codelab.js در یک فایل ترکیب کنید. دستورات زیر را می توان برای الحاق فایل ها اجرا کرد. هر بار که کد تجسم منبع را به روز می کنید، این مرحله را تکرار کنید .

اسکریپت الحاق لینوکس/مک OS

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

اسکریپت الحاق ویندوز

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 را بنویسید

پیکربندی تجسم، داده‌ها و ویژگی‌های سبک مورد نیاز و پشتیبانی شده توسط تجسم شما را تعریف می‌کند. این تجسم در این Codelab به یک بعد و یک متریک نیاز دارد و یک عنصر سبک برای انتخاب رنگ پر دارد. درباره ابعاد و معیارها بیشتر بیاموزید .

کد زیر را کپی کرده و به عنوان 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. یک پروژه ذخیره سازی ابری و سطل ایجاد کنید

مرحله 1: یک پروژه Google Cloud Platform (GCP) ایجاد کنید یا از یک پروژه موجود استفاده کنید.

مرحله 2: یک سطل GCP ایجاد کنید . کلاس ذخیره سازی توصیه شده منطقه ای است. برای جزئیات بیشتر در مورد سطوح رایگان، از قیمت گذاری فضای ذخیره سازی ابری دیدن کنید. توجه: بعید است فضای ذخیره سازی تجسم شما هزینه ای برای کلاس ذخیره سازی منطقه ای داشته باشد.

مرحله 3: نام/مسیر سطل خود را یادداشت کنید و با قسمت بعد از Buckets/ شروع کنید. این مسیر در استودیو Looker به عنوان "شناسه مؤلفه" نامیده می شود و برای شناسایی و استقرار تصویرسازی استفاده می شود.

9. فایل manifest.json را بنویسید

فایل مانیفست اطلاعاتی درباره مکان تجسم و منابع شما ارائه می دهد. باید " manifest.json " نامگذاری شود، و باید در سطل/مسیری که در مرحله قبل ایجاد شده است، قرار گیرد، همان مسیری که برای شناسه کامپوننت شما استفاده شده است.

کد زیر را در یک ویرایشگر متن کپی کنید و آن را به عنوان manifest.json.

برای کسب اطلاعات بیشتر درباره مانیفست، از مستندات مرجع مانیفست دیدن کنید.

manifest.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 آپلود کنید

فایل‌های manifest.json ، viz-codelab.js ، viz-codelab.json ، و viz-codelab.css را با استفاده از رابط وب یا ابزار خط فرمان gsutil در سطل فضای ذخیره‌سازی Google Cloud خود آپلود کنید. هر بار که تجسم خود را به روز می کنید این کار را تکرار کنید.

دستورات آپلود 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 تست کنید

یک گزارش ایجاد کنید و داده ها را اضافه کنید

مرحله 1: نشانی وب مجموعه داده نمونه تجسم جامعه را کپی کنید. از طرف دیگر، از هر منبع داده ای که ترجیح می دهید استفاده کنید و مراحل زیر را نادیده بگیرید.

مرحله 2: به استودیوی Looker وارد شوید . در بالا سمت چپ، روی + ایجاد کلیک کنید، سپس گزارش را انتخاب کنید.

مرحله 3: ابزار ویرایشگر گزارش را می بینید که پانل افزودن داده به گزارش باز است.

مرحله 4: در برگه اتصال به داده ، رابط Google Sheets by Google را انتخاب کنید.

مرحله 5: URL را انتخاب کنید و از مرحله 1 URL صفحه Google Sheet را جایگذاری کنید.

مرحله 6: در سمت راست پایین، روی افزودن کلیک کنید.

مرحله 7 : اگر از شما خواسته شد تأیید کنید که در شرف افزودن داده به این گزارش هستید، روی افزودن به گزارش کلیک کنید. یک گزارش بدون عنوان ایجاد می شود و یک جدول پیش فرض با داده های نمونه به گزارش اضافه می شود. در صورت تمایل، جدول پیش فرض را انتخاب و حذف کنید تا یک گزارش خالی برای شما باقی بماند.

تجسم جامعه خود را به گزارش اضافه کنید

مرحله 1: در نوار ابزار، روی Community visualizations and components کلیک کنید .

مرحله 2: برای باز کردن گالری انجمن، روی + Explore more کلیک کنید.

مرحله 3: روی Build your own visualization کلیک کنید

مرحله 4: در قسمت تست و تجسم جامعه خود را اضافه کنید ، مسیر Manifest را وارد کرده و روی ارسال کلیک کنید. مسیر مانیفست نام و مسیر سطل فضای ذخیره‌سازی Google Cloud است که به مکان مانیفست تجسم شما با پیشوند gs://. به عنوان مثال: gs://community-viz-docs/viz-codelab . اگر یک مسیر مانیفست معتبر وارد کرده‌اید، یک کارت تجسم باید ارائه شود.

مرحله 5: روی کارت تجسم کلیک کنید تا آن را به گزارش خود اضافه کنید.

مرحله 6: اگر از شما خواسته شد، رضایت خود را اعلام کنید تا تصویرسازی ارائه شود.

مرحله 7: به صورت اختیاری، ابعاد و متریک انتخابی جدول را به روز کنید. اگر از مجموعه داده‌های نمونه ارائه شده استفاده می‌کنید، بعد را روی کشور و متریک را روی جمعیت تنظیم کنید. این هیچ تاثیری بر روی تجسم تا زمانی که بعداً در Codelab وجود دارد، نخواهد داشت.

پانل ویژگی در سمت راست عناصر پیکربندی شده در viz-codelab.json را منعکس می کند.

در پانل Setup ، تجسم امکان یک بعد و یک متریک را فراهم می کند.

در زیر پانل Style ، تجسم دارای یک عنصر واحد برای استایل دادن به سربرگ جدول است. در این مرحله، کنترل سبک هیچ تاثیری بر روی تصویرسازی نخواهد داشت تا زمانی که کد تجسم در مرحله بعد به روز شود. توجه: گزینه های سبک دیگری را برای تجسم خود خواهید دید که در فایل پیکربندی تعریف نکرده اید. این مورد انتظار است، زیرا همه تجسم ها دارای مجموعه ای از کنترل های مشترک هستند که به طور خودکار در دسترس هستند.

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: فایل بسته جاوا اسکریپت را آماده کنید، سپس فایل های تجسم خود را در Google Cloud Storage آپلود و بازنویسی کنید.

مرحله 3: گزارش Looker Studio را برای بارگیری مجدد و آزمایش تجسم جامعه خود بازخوانی کنید. جدول اکنون داده ها (به عنوان مثال Google Sheet) را ارائه می دهد و ستون های سرصفحه را بر اساس بعد و متریک انتخاب شده نمایش می دهد. اندازه تجسم را تغییر دهید تا همه ردیف ها را ببینید.

13. تغییرات سبک را به صورت پویا اعمال کنید

در این بخش، تجسم را به‌روزرسانی می‌کنید تا هدر جدول را بر اساس رنگ پر انتخاب شده در پانل Style استایل کنید.

وضعیت همه عناصر سبک در شیء style موجود است، جایی که هر کلید آیتم بر اساس پیکربندی سبک تجسم شما تعریف می شود ( viz-codelab.json ). برای این بخش، رنگ پر انتخاب شده را دریافت می کنید و از آن برای به روز رسانی رنگ پس زمینه هدر جدول استفاده می کنید.

مرحله 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);

  // 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: فایل بسته جاوا اسکریپت را آماده کنید، سپس فایل های تجسم خود را در Google Cloud Storage آپلود و بازنویسی کنید.

مرحله 3: گزارش Looker Studio را برای بارگیری مجدد و آزمایش تجسم جامعه خود بازخوانی کنید.

مرحله 4: در پانل Style ، از کنترل سبک Header Background Color برای تغییر رنگ پس‌زمینه هدر جدول استفاده کنید.

تبریک می گویم! شما یک تجسم انجمن در Looker Studio ایجاد کرده اید! این شما را به پایان این کد لبه می رساند. حال، بیایید ببینیم چه گام های بعدی می توانید بردارید.

14. مراحل بعدی

تجسم خود را گسترش دهید

درباره داده ها و قالب های موجود برای تجسم خود بیشتر بیاموزید.
درباره عناصر سبک موجود بیشتر بیاموزید و استایل بیشتری به تجسم خود اضافه کنید.
تعاملات را به تجسم خود اضافه کنید
یاد بگیرید که به صورت محلی تجسم ایجاد کنید

با تجسم های جامعه کارهای بیشتری انجام دهید

مراجع مربوط به کتابخانه کمکی dscc ، مانیفست و فایل پیکربندی را مرور کنید.
تجسم خود را به گالری تجسم انجمن ما ارسال کنید.
یک رابط انجمن برای Looker Studio بسازید.

منابع اضافی

در زیر منابع مختلفی وجود دارد که می‌توانید به آنها دسترسی داشته باشید تا به شما کمک کند تا در مطالبی که در این کد لابلای پوشش داده شده است عمیق‌تر بگردید.

نوع منبع	ویژگی های کاربر	ویژگی های توسعه دهنده
مستندات	مرکز راهنمایی	مستندات توسعه دهنده
اخبار و به روز رسانی	در Looker Studio > تنظیمات کاربر ثبت نام کنید	لیست پستی برنامه نویس
سوال بپرسید	انجمن کاربر	سرریز پشته [looker-studio] انجمن توسعه دهندگان Looker Studio
نمونه ها	گالری گزارش	مخزن منبع باز