1. Giới thiệu
Looker Studio giúp bạn tạo các trang tổng quan trực tiếp, có tính tương tác với hình ảnh dữ liệu đẹp mắt, hoàn toàn miễn phí. Lấy dữ liệu từ nhiều nguồn và tạo không giới hạn báo cáo trong Looker Studio, với đầy đủ các chức năng chỉnh sửa và chia sẻ. Ảnh chụp màn hình sau đây là ví dụ về báo cáo trong Looker Studio:
( Nhấp vào đây để xem báo cáo mẫu này trong Looker Studio)
Looker Studio cung cấp một số loại biểu đồ tích hợp sẵn, bao gồm biểu đồ dạng đường, biểu đồ thanh, biểu đồ hình tròn và biểu đồ tán xạ. Hình ảnh dữ liệu cộng đồng cho phép bạn tạo và sử dụng hình ảnh dữ liệu JavaScript tuỳ chỉnh của riêng mình trong Looker Studio. Bạn cũng có thể chia sẻ các hình ảnh trực quan do cộng đồng tạo với những người khác để họ có thể sử dụng các hình ảnh đó với dữ liệu của riêng họ.
Kiến thức bạn sẽ học được
Trong lớp học lập trình này, bạn sẽ tìm hiểu:
- Cách hoạt động của hình ảnh dữ liệu cộng đồng trong Looker Studio.
- Cách tạo một hình ảnh dữ liệu cộng đồng bằng cách sử dụng thư viện trợ giúp ds-component (dscc).
- Cách sử dụng hình ảnh hoá dữ liệu cộng đồng trong báo cáo Looker Studio.
Bạn cần có
Để hoàn tất lớp học lập trình này, bạn cần có:
- Có quyền truy cập vào Internet và trình duyệt web.
- Tài khoản Google.
- Quyền truy cập vào một bộ chứa lưu trữ trên Google Cloud Platform.
- Quen thuộc với Javascript.
2. Khảo sát nhanh
Tại sao bạn chọn lớp học lập trình này?
Bạn dự định sử dụng lớp học lập trình/hướng dẫn này như thế nào?
Bạn đánh giá thế nào về trải nghiệm của mình với Looker Studio?
Câu nào mô tả đúng nhất về nền tảng của bạn?
Bạn muốn sử dụng thư viện trực quan hoá JavaScript nào?
Chuyển sang trang tiếp theo để gửi thông tin khảo sát.
3. Tổng quan về hình ảnh dữ liệu cộng đồng
Hình ảnh dữ liệu cộng đồng của Looker Studio cho phép bạn tạo và sử dụng hình ảnh dữ liệu JavaScript tuỳ chỉnh trong trang tổng quan.
Trong lớp học lập trình này, bạn sẽ tạo một hình ảnh dữ liệu cộng đồng dạng biểu đồ bảng hỗ trợ 1 phương diện, 1 chỉ số và kiểu tiêu đề bảng.
4. Quy trình phát triển hình ảnh dữ liệu cộng đồng
Để tạo một hình ảnh dữ liệu cộng đồng, bạn cần có các tệp sau trong một bộ chứa lưu trữ trên Google Cloud Platform (bạn sẽ tạo bộ chứa này ở bước sau):
Tên tệp | Loại tệp | Mục đích |
manifest.json* | JSON | Siêu dữ liệu về hình ảnh trực quan và vị trí của tất cả tài nguyên hình ảnh trực quan. |
viz-codelab.json | JSON | Các lựa chọn về cấu hình dữ liệu và kiểu cho bảng điều khiển Tài sản. |
viz-codelab.js | JavaScript | Mã JavaScript để hiển thị hình ảnh trực quan. |
viz-codelab.css (không bắt buộc) | CSS | Kiểu CSS cho hình ảnh trực quan. |
*Tệp kê khai là tệp duy nhất có tên bắt buộc. Bạn có thể đặt tên khác cho các tệp còn lại, miễn là tên/vị trí của các tệp đó được chỉ định trong tệp kê khai.
5. Viết một hình ảnh trực quan Xin chào, thế giới!
Trong phần này, bạn sẽ thêm mã cần thiết để hiển thị một hình ảnh trực quan đơn giản về Hello, world!
Viết nguồn JavaScript trực quan hoá
Bước 1: Tải tệp dscc.min.js xuống từ trang Thư viện thành phần cộng đồng của Looker Studio (dscc) rồi sao chép tệp đó vào thư mục đang hoạt động của bạn.
Bước 2: Sao chép mã sau vào một trình soạn thảo văn bản rồi lưu dưới dạng viz-codelab-src.js trong thư mục làm việc cục bộ.
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 });
Chuẩn bị tệp gói JavaScript
Bước 3: Kết hợp tất cả JavaScript cần thiết vào một tệp bằng cách sao chép nội dung của thư viện trợ giúp trực quan hoá (dscc.min.js) và tệp viz-codelab-src.js của bạn vào một tệp mới có tên là viz-codelab.js. Bạn có thể thực thi các lệnh sau để nối các tệp. Lặp lại bước này mỗi khi bạn cập nhật mã nguồn trực quan hoá.
Tập lệnh nối Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Tập lệnh nối của 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. Viết CSS trực quan hoá
Tệp CSS xác định kiểu cho hình ảnh trực quan của bạn và là không bắt buộc. Sao chép CSS sau đây và lưu dưới dạng 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. Viết cấu hình JSON
Cấu hình trực quan hoá xác định các thuộc tính dữ liệu và kiểu mà chế độ trực quan hoá của bạn hỗ trợ và yêu cầu. Trực quan hóa này trong lớp học lập trình này yêu cầu một phương diện và một chỉ số, đồng thời có một thuộc tính kiểu để chọn màu nền. Tìm hiểu thêm về phương diện và chỉ số.
Sao chép mã sau đây và lưu mã đó dưới dạng viz-codelab.json.Để tìm hiểu thêm về các thuộc tính mà bạn có thể định cấu hình, hãy xem Tài liệu tham khảo về cấu hình hình ảnh dữ liệu cộng đồng.
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. Tạo dự án và vùng lưu trữ trên đám mây
Bước 1: Tạo một dự án Google Cloud Platform (GCP) hoặc sử dụng một dự án hiện có.
Bước 2: Tạo một vùng chứa GCP. Lớp lưu trữ được đề xuất là Regional. Hãy truy cập vào trang Giá của Cloud Storage để biết thông tin chi tiết về các cấp miễn phí. Lưu ý: Bộ nhớ trực quan hoá của bạn sẽ không phải chịu bất kỳ chi phí nào cho Lớp lưu trữ Khu vực.
Bước 3: Ghi lại tên/đường dẫn của nhóm, bắt đầu bằng phần sau Buckets/. Đường dẫn này được gọi là "mã thành phần" trong Looker Studio và được dùng để xác định cũng như triển khai một hình ảnh trực quan.
9. Viết tệp manifest.json
Tệp kê khai cung cấp thông tin về vị trí và tài nguyên của hình ảnh trực quan. Tệp này phải có tên là "manifest.json" và phải nằm trong nhóm/đường dẫn được tạo ở bước trước, cũng là đường dẫn được dùng cho mã thành phần của bạn.
Sao chép mã sau đây vào một trình soạn thảo văn bản rồi lưu dưới dạng manifest.json.
Để tìm hiểu thêm về tệp kê khai, hãy truy cập vào tài liệu tài liệu tham khảo về tệp kê khai.
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. Tải tệp trực quan hoá lên Google Cloud Storage
- Tải các tệp
manifest.json,viz-codelab.js,viz-codelab.jsonvàviz-codelab.csslên bộ chứa Google Cloud Storage bằng giao diện web hoặc công cụ dòng lệnh gsutil. Lặp lại bước này mỗi khi bạn cập nhật hình ảnh trực quan.
Lệnh tải lên 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. Kiểm thử Hình ảnh dữ liệu cộng đồng trong Looker Studio
Tạo báo cáo và thêm dữ liệu
Bước 1: Sao chép URL cho Tập dữ liệu mẫu của hình ảnh trực quan do cộng đồng tạo. Hoặc bạn có thể sử dụng bất kỳ nguồn dữ liệu nào bạn muốn và bỏ qua các bước sau.
Bước 2: Đăng nhập vào Looker Studio. Ở trên cùng bên trái, hãy nhấp vào + Tạo, rồi chọn Báo cáo.
Bước 3: Bạn sẽ thấy công cụ trình chỉnh sửa báo cáo, trong đó có bảng điều khiển Thêm dữ liệu vào báo cáo đang mở.
Bước 4: Trong thẻ Kết nối với dữ liệu, hãy chọn trình kết nối Google Trang tính của Google.
Bước 5: Chọn URL rồi dán URL của Google Trang tính từ bước 1.
Bước 6: Ở dưới cùng bên phải, hãy nhấp vào Thêm.
Bước 7: Nếu được nhắc xác nhận Bạn sắp thêm dữ liệu vào báo cáo này,hãy nhấp vào THÊM VÀO BÁO CÁO. Một Báo cáo chưa được đặt tên sẽ được tạo và một bảng mặc định sẽ được thêm vào báo cáo cùng với dữ liệu mẫu. Bạn có thể chọn và xoá bảng mặc định để có một báo cáo trống.
Thêm hình ảnh dữ liệu cộng đồng vào báo cáo
Bước 1: Trong thanh công cụ, hãy nhấp vào biểu tượng Hình ảnh dữ liệu cộng đồng và các thành phần 
.
Bước 2: Nhấp vào + Khám phá thêm để mở Thư viện cộng đồng.
Bước 3: Nhấp vào Tạo hình ảnh trực quan của riêng bạn
Bước 4: Trong phần Thử nghiệm và thêm hình ảnh dữ liệu cộng đồng, hãy nhập Đường dẫn tệp kê khai rồi nhấp vào Gửi. Đường dẫn tệp kê khai là tên và đường dẫn bộ chứa Google Cloud Storage trỏ đến vị trí của tệp kê khai trực quan hoá, có tiền tố là gs://. Ví dụ: gs://community-viz-docs/viz-codelab. Nếu bạn đã nhập một đường dẫn tệp kê khai hợp lệ, thì một thẻ trực quan hoá sẽ hiển thị.
Bước 5: Nhấp vào thẻ trực quan hoá để thêm thẻ đó vào báo cáo.
Bước 6: Nếu được nhắc, hãy đồng ý cho phép hiển thị hình ảnh.
Bước 7: Bạn có thể cập nhật phương diện và chỉ số đã chọn cho bảng (nếu muốn). Nếu bạn đang sử dụng tập dữ liệu mẫu được cung cấp, hãy đặt phương diện thành Quốc gia và chỉ số thành Dân số. Việc này sẽ không ảnh hưởng đến hình ảnh cho đến khi bạn thực hiện các bước sau trong lớp học lập trình.
Bảng điều khiển thuộc tính ở bên phải phản ánh các phần tử được định cấu hình trong viz-codelab.json.
Trong bảng Thiết lập, hình ảnh trực quan cho phép hiển thị một Phương diện và một Chỉ số.
Trong bảng điều khiển Kiểu, hình ảnh trực quan có một phần tử duy nhất để tạo kiểu cho Tiêu đề bảng. Tại thời điểm này, chế độ kiểm soát kiểu sẽ không ảnh hưởng đến hình ảnh hoá cho đến khi mã hình ảnh hoá được cập nhật ở bước sau. Lưu ý: Bạn sẽ thấy các lựa chọn về kiểu bổ sung cho hình ảnh trực quan mà bạn chưa xác định trong tệp cấu hình. Đây là kết quả dự kiến, vì tất cả các hình ảnh trực quan đều có một bộ chế độ điều khiển chung được cung cấp tự động.
12. Kết xuất dữ liệu dưới dạng bảng
Trong phần này, bạn sẽ cập nhật hình ảnh trực quan để hiển thị tập dữ liệu mẫu Hình ảnh dữ liệu cộng đồng dưới dạng bảng.
Dữ liệu cần kết xuất có trong đối tượng tables và được cấu trúc dựa trên phép biến đổi do hình ảnh trực quan của bạn chỉ định. Trong lớp học lập trình này, hình ảnh trực quan yêu cầu định dạng bảng (tableTransform) bao gồm một đối tượng headers và một đối tượng rows chứa tất cả dữ liệu chúng ta cần để hiển thị một bảng.
Bước 1: Thay thế nội dung của viz-codelab-src.js bằng mã dưới đây.
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 });
Bước 2: Chuẩn bị tệp gói JavaScript, sau đó tải lên và ghi đè các tệp trực quan hoá của bạn vào Google Cloud Storage.
Bước 3: Làm mới báo cáo Looker Studio để tải lại và kiểm thử hình ảnh dữ liệu cộng đồng. Giờ đây, bảng sẽ hiển thị dữ liệu (tức là Google Trang tính) và các cột tiêu đề dựa trên phương diện và chỉ số đã chọn. Đổi kích thước hình ảnh dữ liệu để xem tất cả các hàng.
13. Áp dụng các thay đổi về kiểu một cách linh động
Trong phần này, bạn sẽ cập nhật hình ảnh trực quan để tạo kiểu cho tiêu đề bảng dựa trên màu nền được chọn trong bảng Style (Kiểu).
Trạng thái của tất cả các phần tử kiểu có trong đối tượng style, trong đó mỗi khoá mục được xác định dựa trên cấu hình kiểu trực quan hoá (viz-codelab.json). Trong phần này, bạn sẽ nhận được màu nền đã chọn và dùng màu đó để cập nhật màu nền của tiêu đề bảng.
Bước 1: Thay thế mã trong tệp viz-codelab-src.js bằng mã dưới đây.
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 });
Bước 2: Chuẩn bị tệp gói JavaScript, sau đó tải lên và ghi đè các tệp trực quan hoá của bạn vào Google Cloud Storage.
Bước 3: Làm mới báo cáo Looker Studio để tải lại và kiểm thử hình ảnh dữ liệu cộng đồng.
Bước 4: Trong bảng Kiểu, hãy dùng chế độ kiểm soát kiểu Màu nền tiêu đề để thay đổi màu nền tiêu đề của bảng.
Xin chúc mừng! Bạn đã tạo một hình ảnh dữ liệu cộng đồng trong Looker Studio! Thao tác này sẽ đưa bạn đến phần cuối của lớp học lập trình này. Bây giờ, hãy xem những bước tiếp theo mà bạn có thể thực hiện.
14. Các bước tiếp theo
Mở rộng hình ảnh trực quan
- Tìm hiểu thêm về dữ liệu và định dạng có sẵn cho hình ảnh trực quan của bạn.
- Tìm hiểu thêm về các phần tử kiểu hiện có và thêm kiểu bổ sung vào hình ảnh trực quan.
- Thêm các lượt tương tác vào hình ảnh trực quan
- Tìm hiểu cách phát triển một hình ảnh trực quan tại địa phương
Làm được nhiều việc hơn nhờ hình ảnh dữ liệu cộng đồng
- Xem lại các tài liệu tham khảo cho thư viện trợ giúp dscc, tệp kê khai và tệp cấu hình.
- Gửi hình ảnh dữ liệu của bạn đến Thư viện hình ảnh dữ liệu cộng đồng của chúng tôi.
- Xây dựng trình kết nối cộng đồng cho Looker Studio.
Tài nguyên khác
Dưới đây là nhiều tài nguyên mà bạn có thể truy cập để tìm hiểu sâu hơn về nội dung được đề cập trong lớp học lập trình này.
Loại tài nguyên | Tính năng người dùng | Các tính năng dành cho nhà phát triển |
Tài liệu | ||
Tin tức và thông tin cập nhật | Đăng ký trong Looker Studio > Cài đặt người dùng | |
Đặt câu hỏi | ||
Ví dụ |