Viết mã hình ảnh hoá
Thư viện trợ giúp Data Studio cung cấp một giao diện giữa bạn và Data Studio. Để sử dụng thư viện, hãy cung cấp một hàm callback để hiển thị hình ảnh hoá.
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 hiển thị hình ảnh hoá 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à thông tin tổng quan về hình ảnh hoá JavaScript.
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 vài điều quan trọng cần lưu ý khi viết hình ảnh hoá cộng đồng.
Các bản cập nhật từ hàm subscribeToData xảy ra khi dữ liệu, kiểu dáng 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ả thao tác trên DOM đều cần được thực hiện thông qua JavaScript.
Ví dụ: đoạn mã sau đây xác định và thêm 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 hoá cộng đồng Looker Studio chỉ cho phép bạn tải một tệp JavaScript. Mã đã 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 hình ảnh hoá JavaScript và mã hình ảnh hoá của bạn.
Để thực hiện việc này trong bash, bạn có thể sử 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 hình ảnh dữ liệu 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 hoá. Trong khi phát triển hình ảnh hoá, devMode phải là 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 hoá cộng đồng 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
Bây giờ bạn đã viết mã cho hình ảnh hoá, hãy tìm hiểu cách lưu trữ hình ảnh hoá.