۱. مقدمه
Looker Studio به شما امکان میدهد داشبوردهای زنده و تعاملی با تجسمهای زیبای دادهها را به صورت رایگان بسازید. دادههای خود را از منابع مختلف دریافت کنید و گزارشهای نامحدودی را در Looker Studio با قابلیتهای ویرایش و اشتراکگذاری کامل ایجاد کنید. تصویر زیر نمونهای از گزارش Looker Studio است:
( برای مشاهده این نمونه گزارش در Looker Studio اینجا کلیک کنید )
Looker Studio چندین نوع نمودار داخلی از جمله نمودارهای خطی، نمودارهای میلهای، نمودارهای دایرهای و نمودارهای پراکندگی را ارائه میدهد. تجسمهای اجتماعی به شما امکان میدهند تجسمهای جاوا اسکریپت سفارشی خود را در Looker Studio بسازید و استفاده کنید. همچنین میتوانید تجسمهای اجتماعی خود را با دیگران به اشتراک بگذارید تا آنها بتوانند از آنها با دادههای خود استفاده کنند.
آنچه یاد خواهید گرفت
در این آزمایشگاه کد، شما یاد خواهید گرفت:
- نحوهی کار تجسم جامعهی Looker Studio.
- نحوه ساخت تجسم جامعه با استفاده از کتابخانه کمکی ds-component (dscc) .
- نحوه استفاده از تجسم جامعه خود در گزارش Looker Studio.
آنچه نیاز دارید
برای تکمیل این آزمایشگاه کد، به موارد زیر نیاز دارید:
- دسترسی به اینترنت و مرورگر وب.
- یک حساب گوگل.
- دسترسی به مخزن ذخیرهسازی پلتفرم ابری گوگل.
- آشنایی با جاوا اسکریپت.
۲. بررسی سریع
چرا این آزمایشگاه کد را انتخاب کردید؟
چگونه قصد دارید از این آزمایشگاه کد/آموزش استفاده کنید؟
تجربه خود را با استودیو Looker چگونه ارزیابی میکنید؟
چه چیزی پیشینه شما را به بهترین شکل توصیف میکند؟
به استفاده از کدام کتابخانههای مصورسازی جاوا اسکریپت علاقهمند هستید؟
برای ارسال اطلاعات نظرسنجی به صفحه بعد بروید.
۳. مروری بر مصورسازیهای جامعه
تجسمهای انجمن Looker Studio به شما امکان میدهد تجسمهای جاوا اسکریپت سفارشی را در داشبوردهای خود ایجاد و استفاده کنید.
در این آزمایشگاه کد، شما یک نمودار جدولی برای تجسم جامعه ایجاد خواهید کرد که از یک بُعد، یک معیار و استایلدهی هدر جدول پشتیبانی میکند.
۴. گردش کار توسعه تجسم جامعه
برای ایجاد تجسم جامعه، به فایلهای زیر در یک مخزن ذخیرهسازی پلتفرم ابری گوگل نیاز دارید که در مرحله بعد ایجاد خواهید کرد:
نام فایل | نوع فایل | هدف |
مانیفست.json* | جیسون | فراداده درباره مصورسازی و مکانهای همه منابع مصورسازی. |
viz-codelab.json | جیسون | گزینههای پیکربندی دادهها و سبک برای پنل Property. |
viz-codelab.js | جاوا اسکریپت | کد جاوا اسکریپت برای رندر کردن تصویرسازی. |
viz-codelab.css (اختیاری) | سی اس اس | سبکهای CSS برای تجسم. |
*فایل manifest تنها فایلی است که نام آن الزامی است. سایر فایلها میتوانند نامهای متفاوتی داشته باشند، البته تا زمانی که نام/مکان آنها در فایل manifest مشخص شده باشد.
۵. یک تصویرسازی از سلام دنیا! بنویسید
در این بخش، کد مورد نیاز برای رندر کردن یک تجسم ساده Hello, world! را اضافه خواهید کرد.
منبع جاوا اسکریپت تجسم را بنویسید
مرحله ۱: فایل dscc.min.js را از صفحه Looker Studio Community Component Library (dscc) دانلود کرده و آن را در دایرکتوری کاری خود کپی کنید.
مرحله ۲: کد زیر را در یک ویرایشگر متن کپی کنید و آن را با نام 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 });
فایل بسته جاوا اسکریپت را آماده کنید
مرحله ۳: تمام جاوا اسکریپتهای مورد نیاز را با کپی کردن محتویات کتابخانه کمکی مصورسازی ( dscc.min.js ) و فایل viz-codelab-src.js خود در یک فایل جدید به نام viz-codelab.js ، در یک فایل واحد ترکیب کنید. دستورات زیر را میتوان برای الحاق فایلها اجرا کرد. هر بار که کد مصورسازی منبع را بهروزرسانی میکنید، این مرحله را تکرار کنید .
اسکریپت الحاق لینوکس/مک او اس
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
۶. 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;
}
۷. پیکربندی 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"
}
]
}
]
}
۸. یک پروژه و باکت ذخیرهسازی ابری ایجاد کنید
مرحله ۱: یک پروژه پلتفرم ابری گوگل (GCP) ایجاد کنید یا از یک پروژه موجود استفاده کنید.
مرحله ۲: یک GCP bucket ایجاد کنید . کلاس ذخیرهسازی توصیهشده، Regional است. برای جزئیات بیشتر در مورد سطوح رایگان، به Cloud Storage Pricing مراجعه کنید. توجه: بعید است که ذخیرهسازی تجسم شما هزینهای برای کلاس ذخیرهسازی منطقهای داشته باشد.
مرحله ۳: نام/مسیر باکت خود را یادداشت کنید، که از بخش بعد از Buckets/ شروع میشود. این مسیر در Looker Studio به عنوان "شناسه کامپوننت" شناخته میشود و برای شناسایی و استقرار یک تجسم استفاده میشود.
۹. نوشتن فایل manifest.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"
}
}
]
}
۱۰. فایلهای مصورسازی خود را در فضای ابری گوگل آپلود کنید
- فایلهای
manifest.json،viz-codelab.js،viz-codelab.jsonوviz-codelab.cssرا با استفاده از رابط وب یا ابزار خط فرمان gsutil در مخزن ذخیرهسازی ابری گوگل خود بارگذاری کنید. این کار را هر بار که بصریسازی خود را بهروزرسانی میکنید، تکرار کنید.
دستورات آپلود 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
۱۱. تجسم جامعه خود را در Looker Studio آزمایش کنید
ایجاد گزارش و افزودن داده
مرحله ۱: آدرس اینترنتی (URL) مجموعه دادههای نمونه Community Visualization را کپی کنید. روش دیگر این است که از هر منبع دادهای که ترجیح میدهید استفاده کنید و مراحل زیر را نادیده بگیرید.
مرحله ۲: وارد Looker Studio شوید . در بالا سمت چپ، روی + Create کلیک کنید، سپس Report را انتخاب کنید.
مرحله ۳: ابزار ویرایشگر گزارش را مشاهده خواهید کرد که پنل «افزودن داده به گزارش» در آن باز است.
مرحله ۴: در تب Connect to data ، گزینه Google Sheets by Google connector را انتخاب کنید.
مرحله ۵: آدرس اینترنتی (URL) را انتخاب کنید و آدرس اینترنتی گوگل شیت (Google Sheet) مرحله ۱ را در آن جایگذاری کنید.
مرحله ۶: در پایین سمت راست، روی «افزودن» کلیک کنید.
مرحله ۷ : اگر از شما خواسته شد که تأیید کنید که میخواهید دادهها را به این گزارش اضافه کنید، روی «افزودن به گزارش» کلیک کنید. یک گزارش بدون عنوان ایجاد میشود و یک جدول پیشفرض با دادههای نمونه به گزارش اضافه میشود. در صورت تمایل، جدول پیشفرض را انتخاب و حذف کنید تا یک گزارش خالی باقی بماند.
تجسم جامعه خود را به گزارش اضافه کنید
مرحله ۱: در نوار ابزار، روی «تجسمها و اجزای جامعه» کلیک کنید 
.
مرحله ۲: برای باز کردن گالری انجمن، روی + Explore more کلیک کنید.
مرحله ۳: روی «ساخت تجسم خودتان» کلیک کنید
مرحله ۴: در قسمت Test and add your community visualization ، مسیر Manifest را وارد کرده و روی Submit کلیک کنید. مسیر manifest، نام و مسیر مخزن ذخیرهسازی ابری گوگل است که به محل manifest مربوط به visualization شما اشاره میکند و با پیشوند gs://. به عنوان مثال: gs://community-viz-docs/viz-codelab . اگر مسیر Manifest معتبری وارد کرده باشید، یک کارت visualization باید رندر شود.
مرحله ۵: روی کارت تجسم کلیک کنید تا به گزارش شما اضافه شود.
مرحله ۶: در صورت درخواست، رضایت خود را برای رندر شدن تجسم اعلام کنید.
مرحله ۷: در صورت تمایل، بُعد و معیار انتخاب شده برای جدول را بهروزرسانی کنید. اگر از مجموعه دادههای نمونه ارائه شده استفاده میکنید، بُعد را روی کشور و معیار را روی جمعیت تنظیم کنید. این کار تا بعداً در codelab هیچ تاثیری بر تجسم نخواهد داشت.
پنل ویژگیها در سمت راست، عناصر پیکربندیشده در viz-codelab.json را نشان میدهد.
در زیر پنل تنظیمات ، تجسم امکان استفاده از یک بُعد (Dimension) و یک معیار (Metric) را فراهم میکند.
در زیر پنل Style ، تجسم یک عنصر واحد برای استایلدهی به سربرگ جدول دارد. در این مرحله، کنترل استایل هیچ تاثیری بر تجسم نخواهد داشت تا زمانی که کد تجسم در مرحله بعدی بهروزرسانی شود. توجه: گزینههای استایل اضافی برای تجسم خود خواهید دید که در فایل پیکربندی تعریف نکردهاید. این مورد قابل انتظار است، زیرا همه تجسمها مجموعهای از کنترلهای مشترک دارند که به طور خودکار در دسترس هستند.
۱۲. دادهها را به صورت جدول رندر کنید
در این بخش، شما تجسم خود را بهروزرسانی خواهید کرد تا مجموعه دادههای نمونه تجسم جامعه را به صورت یک جدول نمایش دهید.
دادههایی که باید رندر شوند در شیء tables موجود هستند و بر اساس تبدیل مشخص شده توسط تجسم شما ساختار یافتهاند. در این آزمایشگاه کد، تجسم، فرمت جدول ( tableTransform ) را درخواست کرده است که شامل یک شیء headers و یک شیء rows است که شامل تمام دادههایی است که برای رندر یک جدول نیاز داریم.
مرحله ۱: محتویات 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 });
مرحله ۲: فایل بسته جاوا اسکریپت را آماده کنید، سپس فایلهای مصورسازی خود را در فضای ذخیرهسازی ابری گوگل آپلود و بازنویسی کنید.
مرحله ۳: گزارش Looker Studio را برای بارگذاری مجدد و آزمایش تجسم جامعه خود، رفرش کنید. جدول اکنون دادهها (یعنی Google Sheet) را رندر میکند و ستونهای سربرگ را بر اساس بُعد و معیار انتخاب شده نمایش میدهد. برای مشاهده همه ردیفها، اندازه تجسم را تغییر دهید.
۱۳. اعمال تغییرات سبک به صورت پویا
در این بخش، شما تصویرسازی را بهروزرسانی خواهید کرد تا سربرگ جدول را بر اساس رنگ پر کردن انتخاب شده در پنل Style ، استایلدهی کند.
وضعیت تمام عناصر استایل در شیء 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 });
مرحله ۲: فایل بسته جاوا اسکریپت را آماده کنید، سپس فایلهای مصورسازی خود را در فضای ذخیرهسازی ابری گوگل آپلود و بازنویسی کنید.
مرحله ۳: گزارش Looker Studio را رفرش کنید تا تجسم جامعه خود را مجدداً بارگذاری و آزمایش کنید.
مرحله ۴: در زیر پنل Style ، از کنترل سبک Header Background Color برای تغییر رنگ پسزمینه هدر جدول استفاده کنید.
تبریک! شما یک تصویرسازی جامعه در Looker Studio ایجاد کردهاید! به پایان این آزمایشگاه کد رسیدیم. حالا، ببینیم قدمهای بعدی که میتوانید بردارید چیست.
۱۴. مراحل بعدی
تجسم خود را گسترش دهید
- درباره دادهها و قالبهای موجود برای مصورسازی خود بیشتر بدانید.
- درباره عناصر سبک موجود بیشتر بدانید و سبکهای اضافی را به تجسم خود اضافه کنید.
- تعاملات را به تجسم خود اضافه کنید
- یاد بگیرید که یک تجسم را به صورت محلی توسعه دهید
با تجسمهای اجتماعی کارهای بیشتری انجام دهید
- منابع مربوط به کتابخانه کمکی dscc ، فایل مانیفست و فایل پیکربندی را بررسی کنید.
- تجسم خود را به گالری تجسم اجتماعی ما ارسال کنید.
- یک رابط اجتماعی برای Looker Studio بسازید.
منابع اضافی
در زیر منابع مختلفی وجود دارد که میتوانید برای کمک به شما در درک عمیقتر مطالب مطرح شده در این آزمایشگاه کد به آنها دسترسی داشته باشید.
نوع منبع | ویژگیهای کاربر | ویژگیهای توسعهدهنده |
مستندات | ||
اخبار و بهروزرسانیها | ثبت نام در Looker Studio > تنظیمات کاربر | |
سوال بپرسید | ||
مثالها |