1. Giới thiệu
Looker Studio cho phép bạn tạo trang tổng quan có tính tương tác trực tiếp với hình ảnh dữ liệu trực quan đẹp mắt, hoàn toàn miễn phí. Tìm nạp dữ liệu từ nhiều nguồn và tạo báo cáo không giới hạn trong Looker Studio, với toàn bộ khả năng chỉnh sửa và chia sẻ. Ảnh chụp màn hình sau đây là một báo cáo mẫu của 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, trong đó có 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 xây dựng và sử dụng hình ảnh trực quan hoá JavaScript tuỳ chỉnh của riêng mình trong Looker Studio. Bạn cũng có thể chia sẻ hình ảnh dữ liệu cộng đồng của mình với người khác để họ có thể sử dụng 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 hình ảnh dữ liệu cộng đồng bằng thư viện trình trợ giúp thành phần dscc (dscc).
- Cách sử dụng hình ảnh dữ liệu cộng đồng trong báo cáo Looker Studio.
Bạn cần có
Để hoàn thành lớp học lập trình này, bạn sẽ cầ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 bộ chứa lưu trữ của 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 sử dụng Looker Studio?
Lựa chọn nào mô tả chính xác nhất bối cảnh của bạn?
Bạn muốn sử dụng thư viện trực quan hoá JavaScript nào?
Hãy 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 cộng đồng của Looker Studio cho phép bạn tạo và sử dụng hình ảnh trực quan hoá JavaScript tuỳ chỉnh trong trang tổng quan của mình.
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 của 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 hình ảnh dữ liệu cộng đồng, bạn cần có các tệp sau trong bộ chứa lưu trữ của Google Cloud Platform. Bạn sẽ tạo các tệp 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. |
viz-codelab.json | JSON | Các lựa chọn cấu hình kiểu và dữ liệu cho bảng điều khiển Thuộc tính. |
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. Các tệp khác có thể được đặt tên khác, miễn là tên/vị trí của các tệp được chỉ định trong tệp kê khai.
5. Viết lời chào mọi người! trực quan hoá
Trong phần này, bạn sẽ thêm mã cần thiết để hiển thị một câu lệnh Hello, world đơn giản! trực quan.
Viết nguồn JavaScript cho hình ảnh trực quan
Bước 1: Tải tệp dscc.min.js xuống từ trang Thư viện thành phần cộng đồng Looker Studio (dscc) rồi sao chép tệp đó vào thư mục đang làm việc.
Bước 2: Sao chép mã sau đây vào một trình chỉnh sửa văn bản rồi lưu mã đó dưới dạng viz-codelab-src.js trong thư mục đang làm việc trên má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);
}
// 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 duy nhất bằng cách sao chép nội dung của thư viện trình trợ giúp trực quan hoá (dscc.min.js) và tệp viz-codelab-src.js vào một tệp mới có tên 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 lần bạn cập nhật mã hình ảnh nguồn.
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 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 của hình ảnh trực quan
Tệp CSS xác định kiểu cho hình ảnh của bạn và là tệp 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 hình ảnh xác định các thuộc tính dữ liệu và kiểu mà hình ảnh của bạn hỗ trợ và yêu cầu. Hình ảnh trực quan 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 phần tử 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 rồi lưu dưới dạng viz-codelab.json.Để tìm hiểu thêm về những thuộc tính bạn có thể định cấu hình, hãy xem Tài liệu tham khảo về cấu hình của 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 bộ chứa và dự án trong Cloud Storage
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 bộ chứa GCP. Loại bộ nhớ nên dùng là theo Khu vực. Truy cập vào phần Giá của Cloud Storage để biết thông tin chi tiết về các bậc miễn phí. Lưu ý: Dung lượng lưu trữ trực quan hoá của bạn có khả năng sẽ không phải chịu bất kỳ chi phí nào cho lớp bộ nhớ theo 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 được gọi là "mã thành phần" trong Looker Studio, được dùng để xác định cũng như triển khai 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 tên là "manifest.json", và phải nằm trong nhóm/đường dẫn được tạo ở bước trước, chính là đường dẫn dùng cho mã thành phần của bạn.
Sao chép mã sau đây vào một trình chỉnh sửa văn bản và lưu dưới dạng manifest.json.
Để tìm hiểu thêm về tệp kê khai, hãy truy cập 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 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 tagmanager. Lặp lại quy trình này mỗi khi bạn cập nhật hình ảnh trực quan.
Lệnh tải lên OneRoster
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 của tập dữ liệu mẫu Hình ảnh dữ liệu cộng đồng. Ngoài ra, hãy 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 Thêm dữ liệu vào báo cáo mở ra.
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 ở 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. Báo cáo Không có tiêu đề sẽ được tạo và bảng mặc định được thêm vào báo cáo có dữ liệu mẫu. (Không bắt buộc) Bạn có thể chọn và xoá bảng mặc định để 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 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 của riêng bạn
Bước 4: Trong phần Kiểm tra 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 của bộ chứa Google Cloud Storage trỏ đến vị trí của tệp kê khai của hình ảnh, có tiền tố gs://. Ví dụ: gs://community-viz-docs/viz-codelab. Nếu bạn đã nhập đường dẫn Tệp kê khai hợp lệ, một thẻ trực quan sẽ hiển thị.
Bước 5: Nhấp vào thẻ hình ảnh để thêm vào báo cáo.
Bước 6: Nếu được nhắc, hãy đồng ý cho phép hình ảnh trực quan hiển thị.
Bước 7: Cập nhật phương diện và chỉ số đã chọn cho bảng (không bắt buộc). Nếu bạn đang sử dụng tập dữ liệu mẫu được cung cấp, hãy đặt thứ nguyê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 trực quan cho đến phần sau của lớp học lập trình này.
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 điều khiển Thiết lập, hình ảnh trực quan cho phép 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, thành phần điều khiển kiểu sẽ không có hiệu lực đối với hình ảnh cho đến khi mã hình ảnh được cập nhật trong bước sau. Lưu ý: Bạn sẽ thấy các lựa chọn kiểu bổ sung cho hình ảnh trực quan mà bạn không xác định trong tệp cấu hình. Điều này là bình thường vì tất cả các hình ảnh trực quan đều có một bộ kiểm soát chung tự động có sẵn.
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ó sẵn trong đối tượng tables và được cấu trúc dựa trên biến đổi mà hình ảnh 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 đối tượng headers và đối tượng rows chứa tất cả dữ liệu cần thiết để kết xuấ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á lên Google Cloud Storage.
Bước 3: Làm mới báo cáo Looker Studio để tải lại và thử nghiệm hình ảnh dữ liệu cộng đồng của bạn. Giờ đây, bảng này sẽ kết xuất dữ liệu (tức là Google Trang tính) và hiển thị 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 trực quan để xem tất cả các hàng.
13. Áp dụng động các thay đổi về kiểu
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 đã chọn trong bảng điều khiển Style.
Trạng thái của tất cả thành phần kiểu đề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 hình ảnh (viz-codelab.json). Đối với phần này, bạn sẽ nhận được màu nền đã chọn và sử 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 của bạn 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á lên Google Cloud Storage.
Bước 3: Làm mới báo cáo Looker Studio để tải lại và thử nghiệm hình ảnh dữ liệu cộng đồng của bạn.
Bước 4: Trong bảng Kiểu, hãy dùng tuỳ chọn điều khiển kiểu Màu nền tiêu đề để thay đổi màu nền của tiêu đề 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! Đến đây bạn sẽ kết thúc lớp học lập trình này. Bây giờ, hãy xem các 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 thành phần kiểu có sẵn và thêm kiểu khác cho hình ảnh trực quan của bạn.
- Thêm 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 tài liệu tham khảo cho thư viện trình trợ giúp DScc, tệp kê khai và tệp cấu hình.
- Gửi hình ảnh 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 kỹ hơn về những tài liệu đượ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 > Chế độ cài đặt của người dùng | |
Đặt câu hỏi | ||
Ví dụ |