1. Giới thiệu
Google Data Studio giúp bạn tạo các trang tổng quan linh hoạt, mang tính tương tác với hình ảnh minh hoạ dữ liệu trực quan, hoàn toàn miễn phí. Hình ảnh hoá cộng đồng là một tính năng của Data Studio, cho phép bạn tạo hình ảnh hoá tuỳ chỉnh bằng JavaScript để tích hợp với báo cáo Data Studio.
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 một hình ảnh dữ liệu cộng đồng bằng công cụ mẫu dòng lệnh của chúng tôi
- Cách sử dụng các thư viện trực quan hoá JavaScript để tạo Hình ảnh dữ liệu cộng đồng
- Cách tích hợp Hình ảnh hoá 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, trình duyệt web, thiết bị đầu cuối và trình chỉnh sửa văn bản mà bạn yêu thích
- Tài khoản Google
- Quyền truy cập vào một bộ chứa Google Cloud Storage
- Làm quen với Javascript, Node.js và dòng lệnh
Lớp học lập trình này giả định rằng:
- Bạn đã tạo một Hình ảnh dữ liệu cộng đồng (TODO link first codelab)
- Đã quen với Google Cloud Storage
Để bắt đầu, hãy sao chép báo cáo này bằng cách nhấp vào biểu tượng 
ở góc trên bên phải. Hãy mở trang này trong một thẻ khác khi bạn tham gia lớp học lập trình.
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 Data Studio?
Câu nào mô tả đúng nhất về nền tảng của bạn?
Chuyển sang trang tiếp theo để gửi thông tin khảo sát.
3. Phát triển hình ảnh dữ liệu cộng đồng bằng dscc-gen
dscc-gen
dscc-gen là một công cụ dòng lệnh cung cấp các mẫu và quy trình làm việc có ý kiến cho Hình ảnh dữ liệu cộng đồng và Trình kết nối cộng đồng. Mẫu trực quan hoá cộng đồng cung cấp một hình ảnh trực quan đang hoạt động và một quy trình cho phép bạn xem ngay các thay đổi về mã trực quan hoá, cũng như các tập lệnh để xác thực, tạo và triển khai hình ảnh trực quan.
Thiết lập
dscc-gen sử dụng gsutil trong các tập lệnh triển khai, cũng như npm và webpack để tạo mã JavaScript cho hình ảnh trực quan của cộng đồng.
- Cài đặt npm trên máy tính cục bộ
- Xem hướng dẫn nhanh về gsutil và thiết lập một bộ chứa Google Cloud Storage
- Chuyển đến một thư mục cục bộ nơi bạn muốn đặt dự án
4. Bắt đầu một dự án dscc-gen mới về Hình ảnh dữ liệu cộng đồng
Mở một cửa sổ dòng lệnh rồi chạy lệnh:
npx @google/dscc-gen viz
dscc-gen sẽ nhắc bạn nhập tên dự án, vị trí bộ nhớ GCS "dev" và vị trí bộ nhớ "prod". Nhập vị trí dưới dạng một URI có giao thức gs, ví dụ: gs://my-gs-project/example-dev. "Vị trí" có thể là một bộ chứa Cloud Storage hoặc một thư mục trong bộ chứa đó. Hai vị trí lưu trữ phải khác nhau. Công cụ này sẽ xác thực rằng bạn có quyền truy cập vào các giá trị mà bạn nhập. Nếu các vị trí đó chưa tồn tại, hệ thống sẽ tạo các vị trí đó cho bạn.
Sau khi tạo một Hình ảnh dữ liệu cộng đồng mới, dscc-gen sẽ in hướng dẫn về cách bắt đầu. Thiết bị đầu cuối của bạn sẽ có dạng như sau (phần bạn nhập được đánh dấu bằng chữ nghiêng đậm):
$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...
Created new community viz: barchart
cd barchart and npm run start to begin working on your viz!
Bạn sẽ chỉnh sửa các tệp trong src/, cụ thể là index.js, index.json và index.css để viết hình ảnh trực quan.
Các tệp trong dist/ cho phép bạn xem trước hình ảnh trực quan cục bộ trong trình duyệt. webpack.config.js được dùng để chạy hình ảnh trực quan cục bộ. README.md cung cấp thông tin tổng quan về các tệp và lệnh mẫu.
5. Xem trước hình ảnh trực quan của bạn trên thiết bị
Làm theo hướng dẫn được đề xuất và chạy các lệnh sau trong cửa sổ dòng lệnh:
cd <folder name>
npm run start
Một trình duyệt sẽ mở ra với một trang web có giao diện như sau:
Tìm hiểu thêm ở bước tiếp theo.
6. [Thông tin] Cách thức hoạt động của quy trình dscc-gen
Mẫu trực quan dscc-gen đi kèm với một hình ảnh trực quan đang hoạt động và hướng dẫn về cách sử dụng mẫu. Sau đây là chức năng chính:
Cập nhật thông báo cục bộ: Thông báo mẫu có trong mẫu, nhưng có thể không phản ánh trường hợp sử dụng mà bạn muốn hỗ trợ. Bạn nên tải dữ liệu mẫu phản ánh hình ảnh mà bạn muốn tạo.
Quy trình phát triển cục bộ: Sử dụng dữ liệu từ Cập nhật dữ liệu địa phương, viết và kiểm thử mã cục bộ.
Tạo và triển khai hình ảnh trực quan: Tạo mã và tải mã đó lên các vùng lưu trữ Google Cloud Storage.
Tải hình ảnh trực quan lên Data Studio: Thêm hình ảnh trực quan vào báo cáo Data Studio.
7. Xác định cấu hình
Tệp cấu hình là hợp đồng giữa bạn (nhà phát triển hình ảnh hoá) và trình chỉnh sửa báo cáo sử dụng hình ảnh hoá. Thẻ này xác định các lựa chọn có sẵn sau khi hình ảnh hoá được tải vào Data Studio.
Đối với hình ảnh trực quan của biểu đồ thanh này, cấu hình sẽ có một phương diện và một chỉ số, cũng như một thuộc tính kiểu cho phép người chỉnh sửa báo cáo thay đổi kiểu biểu đồ thanh.
Thay thế nội dung của src/index.json bằng nội dung sau. Hãy nhớ thêm tất cả dấu ngoặc. Nếu bạn đang nhập lại, hãy chú ý đến sự khác biệt giữa dấu ngoặc vuông và dấu ngoặc nhọn cũng như cấu trúc lồng nhau.
index.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "dimension",
"label": "Dimensions",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "metric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "barStyling",
"label": "Bar Styles",
"elements": [
{
"id": "barColor",
"label": "Bar Color",
"type": "FILL_COLOR",
"defaultValue": {
"color": "#1E555C"
}
}
]
}
]
}
8. Tải tin nhắn đã cập nhật xuống
Để cập nhật dữ liệu được lưu trữ cục bộ, hãy chạy:
npm run update_message
Thiết bị đầu cuối của bạn sẽ có dạng như sau:
barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object
Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev
Lệnh này triển khai một hình ảnh hoá đến Data Studio để in dữ liệu nhận được vào một viz cục bộ. Các tập lệnh in ra vị trí triển khai của hình ảnh hoá (được đánh dấu ở trên). Bạn sẽ sử dụng vị trí này để tải hình ảnh trực quan trong Data Studio.
Để tải hình ảnh trực quan, hãy mở báo cáo mà bạn đã sao chép trước đó.
- Chuyển đến phần "chỉnh sửa báo cáo"
- Nhấp vào "Hình ảnh dữ liệu cộng đồng và các thành phần" trong thanh công cụ
- Nhấp vào "Khám phá thêm"
- Nhấp vào "Tạo hình ảnh riêng của bạn"
- Nhập đường dẫn tệp kê khai (vị trí
gs://...được in trong thiết bị đầu cuối) rồi nhấp vào Gửi
- Nhấp vào thẻ được hiển thị để thêm thẻ đó vào báo cáo
Hình ảnh trực quan sẽ hiển thị JSON có dạng như sau:
Sao chép toàn bộ thông báo bằng cách nhấp chuột phải rồi chọn tất cả, sau đó thay thế nội dung của src/localMessage.js bằng nội dung bạn vừa sao chép. Lưu tệp.
Hình ảnh trực quan chạy cục bộ trong trình duyệt của bạn sẽ không xuất hiện nữa và nếu xem trong bảng điều khiển, bạn sẽ thấy một lỗi.
9. Viết JavaScript cho biểu đồ thanh
Trước tiên, hãy chạy lệnh sau để thêm d3.js làm phần phụ thuộc.
npm install d3
Sau đó, thay thế src/index.js bằng mã sau. Các thay đổi so với bước gần đây nhất sẽ được in đậm.
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;
const drawViz = (message) => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]));
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Nếu máy chủ cục bộ vẫn đang chạy, hãy kiểm tra trình duyệt của bạn. Trang web phát triển cục bộ giờ đây sẽ cho thấy một biểu đồ thanh, chẳng hạn như biểu đồ dưới đây.
10. Cập nhật tệp kê khai (không bắt buộc)
Tệp kê khai trực quan hoá chứa siêu dữ liệu về hình ảnh trực quan, cũng như vị trí của JavaScript, cấu hình và CSS trực quan hoá. Cập nhật các giá trị trong tệp kê khai – các giá trị này sẽ được dùng để cung cấp cho người dùng cuối thông tin về hình ảnh trực quan của bạn.
Chỉnh sửa src/manifest.json để mô tả hình ảnh trực quan của bạn. Dưới đây là một tệp kê khai mẫu.
src/manifest.json
{
"name": "Bar Chart",
"organization": "[My name]",
"description": "Bar chart",
"logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
"organizationUrl": "https://github.com/googledatastudio/",
"supportUrl": "http://github.com/googledatastudio/community-visualizations",
"privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
"termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
"packageUrl": "",
"devMode": "DEVMODE_BOOL",
"components": [
{
"id": "Bar chart",
"name": "Bar chart",
"description": "My first Community Visualization",
"iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
"resource": {
"js": "YOUR_GCS_BUCKET/index.js",
"config": "YOUR_GCS_BUCKET/index.json",
"css": "YOUR_GCS_BUCKET/index.css"
}
}
]
}
11. Triển khai hình ảnh trực quan
Trong src/index.js, hãy thay đổi hằng số LOCAL thành "false". Hình ảnh trực quan trong trình duyệt của bạn sẽ ngừng hoạt động. Dòng mã đã thay đổi được in đậm. Giá trị boolean này định cấu hình việc mã có nên sử dụng tệp dữ liệu "cục bộ" hay dữ liệu nhận được từ Data Studio hay không.
src/index.js (abridged)
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;
const drawViz = (message) => {...}
Sau đó, trong thiết bị đầu cuối, hãy chạy:
npm run build:dev
npm run push:dev
Lệnh build:dev sẽ gói các phần phụ thuộc JavaScript của bạn thành một đầu ra chưa được rút gọn và thay thế các giá trị trong tệp kê khai để tắt tính năng lưu vào bộ nhớ đệm và trỏ đến nhóm "dev" mà bạn đã định cấu hình trước đó.
Lệnh push:dev sẽ tải tài nguyên trực quan hoá của bạn lên nhóm "dev" mà bạn đã định cấu hình ở bước 1 và in vị trí nhóm vào bảng điều khiển.
Làm mới báo cáo Data Studio. Bạn sẽ thấy một biểu đồ thanh. Hãy thử thay đổi các lựa chọn về dữ liệu và kiểu trong bảng điều khiển thuộc tính. Việc thay đổi dữ liệu sẽ làm thay đổi các thanh. Tuy nhiên, bộ chọn kiểu màu thanh sẽ chưa hoạt động.
12. Sử dụng lựa chọn màu trong trình chỉnh sửa báo cáo trong biểu đồ thanh
Để chỉnh sửa mã cục bộ, trước tiên, hãy cập nhật biến const LOCAL trong src/index.js thành true. Sau đó, hãy thêm một hàm mới có tên là styleVal() và cập nhật mã trong drawViz(). src/index.js sẽ có dạng như sau:
src/index.js
const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');
// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;
// parse the style value
const styleVal = (message, styleId) => {
if (typeof message.style[styleId].defaultValue === "object") {
return message.style[styleId].value.color !== undefined
? message.style[styleId].value.color
: message.style[styleId].defaultValue.color;
}
return message.style[styleId].value !== undefined
? message.style[styleId].value
: message.style[styleId].defaultValue;
};
const drawViz = message => {
const margin = { left: 20, right: 20, top: 20, bottom: 20 };
const height = dscc.getHeight() - 10;
const width = dscc.getWidth();
const chartHeight = height - margin.top - margin.bottom;
const chartWidth = width - margin.left - margin.right;
// remove existing svg
d3.select("body")
.selectAll("svg")
.remove();
// make a canvas
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// make an svg for the bar chart
const chartSvg = svg
.append("svg")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("width", chartWidth)
.attr("height", chartHeight);
// xScale to distribute bars
const xScale = d3
.scaleBand()
.domain(message.tables.DEFAULT.map(d => d.dimension[0]))
.range([0, chartWidth])
.paddingInner(0.3);
// yScale to size bars
const yScale = d3
.scaleLinear()
.domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
.range([0, chartHeight]);
// get the user-selected bar color
let barColor = styleVal(message, "barColor");
// add bars
const bars = chartSvg
.append("g")
.attr("class", "bars")
.selectAll("rect.bars")
.data(message.tables.DEFAULT)
.enter()
.append("rect")
.attr("x", d => xScale(d.dimension[0]))
.attr("y", d => chartHeight - yScale(d.metric[0]))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d.metric[0]))
.attr("fill", barColor);
// add text
const text = svg
.append("g")
.selectAll("text")
.data(message.tables.DEFAULT)
.enter()
.append("text")
.attr(
"x",
d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
)
.attr("y", height - margin.bottom / 4)
.attr("text-anchor", "middle")
.attr("fill", barColor)
.text(d => d.dimension[0]);
};
// renders locally
if (LOCAL) {
drawViz(local.message);
} else {
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}
Lưu src/index.js, sau đó quay lại phiên trình duyệt cục bộ. Xem ứng dụng chạy cục bộ, sau đó thay đổi hằng số LOCAL thành false.
Tải tệp đã cập nhật lên Google Cloud Storage bằng cách chạy:
npm run build:dev
npm run push:dev
Làm mới báo cáo Data Studio. Giờ đây, bạn có thể thay đổi màu của các thanh.
13. Triển khai thực tế
Triển khai thực tế
Sau khi bạn hài lòng với hình ảnh trực quan, hãy đảm bảo rằng const LOCAL trong src/index.js là false, sau đó chạy.
npm run build:prod
npm run push:prod
Thao tác này sẽ triển khai các tệp của bạn đến vị trí của vùng chứa GCS "prod". Ngoài ra, tính năng lưu vào bộ nhớ đệm sẽ được bật và JavaScript đi kèm sẽ được giảm thiểu một cách thích hợp.
Giống như trước đây, vị trí triển khai của bạn sẽ được in trong bảng điều khiển. Sử dụng "đường dẫn tệp kê khai" này để tải hình ảnh "prod" trong báo cáo Data Studio.
Xin chúc mừng! Bạn vừa tạo Hình ảnh dữ liệu cộng đồng đầu tiên bằng công cụ dscc-gen.
14. Các bước tiếp theo
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 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 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.
- Tạo một 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 | Stack Overflow [google-data-studio]Diễn đàn dành cho nhà phát triển Data Studio | |
Video | Sắp ra mắt! | |
Ví dụ |