Viết mã trực quan hoá
Thư viện trợ giúp của Looker Studio cung cấp một giao diện giữa bạn và Looker Studio. Để sử dụng thư viện này, hãy cung cấp một hàm gọi lại để kết xuất hình ảnh trực quan.
Hàm nổi bật nhất trong thư viện là subscribeToData, hàm này nhận hai đối số: một hàm callback kết xuất hình ảnh trực quan và một đối tượng options chỉ định loại biến đổi mà bạn muốn dữ liệu của mình thực hiện. Để tìm hiểu thêm, hãy xem tài liệu tham khảo về thư viện.
Sau đây là nội dung tổng quan về JavaScript trực quan hoá của bạn.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
Có một số điều quan trọng cần lưu ý khi viết một hình ảnh trực quan do cộng đồng tạo.
Hàm subscribeToData sẽ cập nhật khi dữ liệu, kiểu hoặc kích thước iframe thay đổi.
Ví dụ:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Looker Studio tải và chạy các tệp JavaScript, chứ không phải HTML. Tất cả hoạt động thao tác DOM đều cần diễn ra thông qua JavaScript.
Ví dụ: mã sau đây xác định và nối một div vào DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Gói mã
Hình ảnh dữ liệu cộng đồng trên Looker Studio chỉ cho phép bạn tải một tệp JavaScript. Mã được tải lên phải là một tệp duy nhất bao gồm thư viện trợ giúp dscc, mọi thư viện trực quan hoá JavaScript và mã trực quan hoá của bạn.
Để thực hiện việc này trong bash, bạn có thể dùng lệnh cat, như bên dưới.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Xác định tệp kê khai
Tệp kê khai hình ảnh hoá cung cấp siêu dữ liệu về hình ảnh hoá, cũng như thông tin về vị trí của các tài nguyên hình ảnh hoá. Vị trí của tệp kê khai được gọi là "mã thành phần" và được dùng để tải một hình ảnh trực quan của cộng đồng.
Xem tài liệu tham khảo về tệp kê khai để xem tệp kê khai mẫu.
Tham số devMode của tệp kê khai xác định hành vi lưu vào bộ nhớ đệm của hình ảnh trực quan. Trong khi phát triển hình ảnh trực quan, devMode phải được true để đảm bảo rằng các lần làm mới cứng sẽ tải phiên bản mới nhất của tài nguyên. Sau khi mã ổn định, devMode phải là false để đảm bảo rằng các báo cáo có hình ảnh trực quan do cộng đồng tạo tải nhanh. Để tìm hiểu thêm về bộ nhớ đệm, hãy xem hướng dẫn nâng cao về bộ nhớ đệm.
Các bước tiếp theo
Sau khi bạn viết mã cho thành phần trực quan hoá, hãy tìm hiểu cách lưu trữ thành phần trực quan hoá.