Viết mã tạo hình ảnh trực quan
Thư viện trợ giúp Looker Studio cung cấp 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 callback để kết xuất hình ảnh trực quan.
Hàm nổi bật nhất trong thư viện là subscribeToData, có 2 đối số: hàm callback hiển thị hình ảnh trực quan và một đối tượng options chỉ định kiểu 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.
Phần sau đây cung cấp bản tóm tắt về hình thức của JavaScript cho hình ảnh trực quan.
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 hình ảnh trực quan cho cộng đồng.
Nội dung cập nhật từ hàm subscribeToData xảy ra khi dữ liệu, kiểu hoặc kích thước khung nội tuyến 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 DOM cần diễn ra thông qua JavaScript.
Ví dụ: mã sau đây xác định và thêm 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 trực quan về 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 bao gồm thư viện trình trợ giúp dscc, mọi thư viện trực quan hoá JavaScript và mã hình ảnh 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 cung cấp siêu dữ liệu về hình ảnh, cũng như thông tin về vị trí của tài nguyên hình ảnh. Vị trí của tệp kê khai được gọi là "mã thành phần" và dùng để tải hình ảnh dữ liệu cộng đồng.
Xem lại tệp tham chiếu 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 là true để đảm bảo rằng các lần làm mới cứng sẽ tải phiên bản tài nguyên mới nhất. Khi mã đã ổn định, devMode phải là false để đảm bảo rằng các báo cáo có hình ảnh cộng đồng sẽ tải nhanh. Để tìm hiểu thêm về tính năng lưu vào bộ nhớ đệm, hãy xem hướng dẫn nâng cao về tính năng lưu vào bộ nhớ đệm.
Các bước tiếp theo
Bây giờ, bạn đã có mã để viết hình ảnh, hãy tìm hiểu cách lưu trữ hình ảnh trực quan.