Google Data Studio cho phép người dùng tạo các trang tổng quan trực tiếp, mang tính tương tác với hình ảnh trực quan hoá dữ liệu bắt mắt, hoàn toàn miễn phí. Người dùng có thể tìm nạp dữ liệu từ nhiều nguồn và tạo báo cáo trong Data Studio, với đầy đủ các chức năng chỉnh sửa và chia sẻ. Dưới đây là ví dụ về trang tổng quan Data Studio:
(Nhấp vào đây để xem báo cáo mẫu này trong Data Studio)
Data 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 Data Studio. Hình ảnh dữ liệu cộng đồng do cộng đồng nhà phát triển Data Studio tạo ra. Mọi nhà phát triển đều có thể tạo hình ảnh dữ liệu cộng đồng. 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 một hình ảnh dữ liệu cộng đồng trên Google Data Studio
- Cách tạo hình ảnh dữ liệu cộng đồng bằng thư viện trợ giúp ds-component
- Cách tích hợp hình ảnh dữ liệu cộng đồng vào trang tổng quan Data 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 bộ chứa lưu trữ trên Google Cloud Platform
- Sử dụng thành thạo JavaScript
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 Data Studio?
Câu nào mô tả đúng nhất về lý lịch của bạn?
Bạn quan tâm đến nhữ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.
Hình ảnh trực quan cộng đồng của Data Studio cho phép bạn tạo và sử dụng hình ảnh trực quan JavaScript tuỳ chỉnh tích hợp vào 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 trực quan tuỳ chỉnh dạng biểu đồ thanh hỗ trợ 1 phương diện, 1 chỉ số và kiểu màu thanh.
Để tạo một thành phần trực quan hoá do cộng đồng tạo, 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 | Cung cấp siêu dữ liệu về hình ảnh trực quan và vị trí của các tài nguyên khác. |
myViz.json | JSON | Cung cấp các lựa chọn về cấu hình dữ liệu và kiểu cho bảng điều khiển Thuộc tính. |
myViz.js | JavaScript | Cung cấp mã JavaScript cần thiết để hiển thị dữ liệu trực quan. |
myViz.css (không bắt buộc) | CSS | Cung cấp kiểu 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à bạn chỉ định tên/vị trí của các tệp đó trong tệp kê khai.
Trong phần này, bạn sẽ thêm mã cần thiết để xử lý dữ liệu, thay đổi kiểu và hiển thị hình ảnh trực quan vào tệp JavaScript.
Ghi nguồn hình ảnh trực quan
Bước 1: Tải tệp dscc.min.js xuống từ Thư viện thành phần cộng đồng của Data Studio rồi sao chép tệp đó vào thư mục làm việc 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 myVizSource.js trong thư mục làm việc cục bộ.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Chuẩn bị tệp JavaScript cuối cùng
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ợ giúp trực quan hoá (dscc.min.js) và tệp myVizSource.js của bạn vào một tệp mới có tên là myViz.js. Chạy 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ã trực quan hoá.
Tập lệnh nối Linux/Mac OS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsTập lệnh Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsTệp CSS xác định kiểu cho hình ảnh trực quan của bạn. Sao chép mã sau và lưu dưới dạng myViz.css.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}Tệp 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. Hình ảnh hoá mà bạn sẽ tạo trong lớp học lập trình này hỗ trợ một phương diện và một chỉ số, đồng thời yêu cầu một phần tử kiểu để chọn màu. Tìm hiểu thêm về phương diện và chỉ số.
Sao chép mã sau và lưu mã đó dưới dạng myViz.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 truy cập vào tài liệu tài liệu tham khảo về cấu hình.
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}Bước 1: Tạo một dự án trên Google Cloud Platform (GCP)
Bước 2: Tạo một vùng lưu trữ GCP. Lớp lưu trữ được đề xuất là Regional. Hãy truy cập trang Giá của Cloud Storage để biết thông tin chi tiết về các cấp miễn phí. Bộ nhớ trực quan hoá của bạn khó có thể phát sinh chi phí cho lớp Regional Storage.
Bước 3: Ghi lại tên/đường dẫn của nhóm, bắt đầu bằng phần sau Buckets/ . Data Studio gọi đây là "mã thành phần" và mã này sẽ được dùng để xác định và triển khai.
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 vùng chứa được tạo ở bước trước (vùng chứa đượ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/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- Tải các tệp
manifest.json,myViz.js,myViz.jsonvàmyViz.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 myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETBước 1: Sao chép URL cho Tập dữ liệu mẫu của Thành phần trực quan hoá do cộng đồng tạo.
Bước 2: Truy cập vào Data Studio rồi nhấp vào Trống trong mục Bắt đầu báo cáo mới.
Bước 3: Ở dưới cùng bên phải, hãy nhấp vào TẠO NGUỒN DỮ LIỆU MỚI.
Bước 4: Chọn trình kết nối Google Trang tính.
Bước 5: Trong trường URL, hãy nhập URL của Trang tính trên Google ở bước 1 nêu trên.
Bước 6: Ở trên cùng bên phải của trang, hãy nhấp vào KẾT NỐI
Bước 7: Trên tiêu đề nguồn dữ liệu, hãy nhấp vào Quyền truy cập hình ảnh dữ liệu cộng đồng, chọn BẬT rồi nhấp vào Lưu.
Bước 7: Nhấp vào THÊM VÀO BÁO CÁO trong hộp xuất hiện để thêm Nguồn dữ liệu vào báo cáo.
Bước 6: Trên thanh công cụ, hãy nhấp vào nút trực quan hoá cộng đồng 
. Thao tác này sẽ mở một trình đơn thả xuống.
Bước 7: Dán tên nhóm của bạn có tiền tố là gs:// (, ví dụ: gs://community-viz-docs/myViz) vào phần nhập văn bản cho "Manifest Path" (Đường dẫn tệp kê khai), thêm barChart vào phần "Component ID" (Mã thành phần) rồi nhấp vào "ADD" (THÊM). 
Hình ảnh trực quan sẽ tự động được vẽ trên canvas. Bảng thuộc tính ở bên phải sẽ phản ánh các phần tử trong tệp myViz.json của bạn.
Hình ảnh trực quan cho phép hiển thị một Phương diện và một Chỉ số.
Một Phần tử kiểu đã được chỉ định – hiển thị một bộ chọn Màu phông chữ có nhãn "Màu thanh". Trong bước tiếp theo, bạn sẽ dùng bộ chọn này để ảnh hưởng đến hình ảnh trực quan.
Trong phần này, bạn sẽ sử dụng phần tử kiểu bộ chọn màu để cập nhật hình ảnh trực quan.
Bước 1: Thay thế mã trong tệp myVizSource.js bằng mã dưới đây.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Bước 2: Tạo tệp JavaScript kết hợp, sau đó tải lại các tệp trực quan hoá lên Google Cloud Storage.
Bước 3: Làm mới báo cáo Data Studio nơi bạn đã thử nghiệm hình ảnh dữ liệu cộng đồng.
Bạn có thể thay đổi màu của hình chữ nhật bằng bộ chọn trong trình đơn kiểu.
Trong phần này, bạn sẽ cập nhật hình ảnh trực quan để vẽ biểu đồ thanh bằng cách sử dụng dữ liệu từ Tập dữ liệu mẫu về hình ảnh dữ liệu cộng đồng. Lưu ý: Data Studio trả về tối đa 2.500 hàng dữ liệu cho hình ảnh trực quan.
Bước 1: Thay thế mã trong tệp myVizSource.js bằng mã dưới đây.
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Bước 2: Tạo tệp JavaScript kết hợp, sau đó tải lại các tệp trực quan hoá lên Google Cloud Storage.
Bước 3: Làm mới báo cáo Data Studio nơi bạn đã thử nghiệm hình ảnh dữ liệu cộng đồng. Bạn sẽ có một biểu đồ dạng cột có nhãn được tạo từ dữ liệu trong Google Trang tính. Để thay đổi màu của các thanh, hãy thay đổi màu đã chọn trong bộ chọn Kiểu "Màu thanh".
Trong phần này, bạn sẽ cập nhật hình ảnh trực quan để vẽ biểu đồ thanh bằng cách sử dụng dữ liệu từ Tập dữ liệu mẫu về hình ảnh dữ liệu cộng đồng.
Bước 1: Thay thế mã trong tệp myVizSource.js bằng mã dưới đây.
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Bước 2: Tạo tệp JavaScript kết hợp, sau đó tải lại các tệp trực quan hoá lên Google Cloud Storage.
Bước 3: Làm mới báo cáo Data Studio nơi bạn đã thử nghiệm hình ảnh dữ liệu cộng đồng. Bạn nên có một biểu đồ thanh có tiêu đề được tạo từ dữ liệu và được tạo kiểu bằng tệp myViz.css.
Xin chúc mừng! Bạn đã tạo một hình ảnh dữ liệu cộng đồng trong Data Studio! Đến đây là kết thúc 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.
Mở rộng hình ảnh trực quan
- 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
- 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.
Làm được nhiều việc hơn nhờ hình ảnh dữ liệu cộng đồng
- Xem lại các thông tin tham khảo về thư viện trợ giúp dscc, tệp kê khai và tệp cấu hình.
- Gửi hình ảnh trực quan của bạn đến Thư viện hình ảnh dữ liệu cộng đồng của chúng tôi.
- Tạo trình kết nối cộng đồng cho Data 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 Data Studio > Cài đặt người dùng | |
Đặt câu hỏi | ||
Video | Sắp ra mắt! | |
Ví dụ |