Viết hình ảnh trực quan

Viết mã 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 hàm callback có khả năng kết xuất trực quan.

Hàm nổi bật nhất trong thư viện là subscribeToData, mất 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 kiểu biến đổi mà bạn muốn dữ liệu của mình thực hiện 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 tóm tắt về những gì JavaScript trực quan của bạn có thể có trông như thế nào.

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 chính cần lưu ý khi viết cộng đồng trực quan.

Quá trình cập nhật từ hàm subscribeToData diễn ra khi dữ liệu, kiểu hoặc kích thước iframe sẽ 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 đối với DOM cần xảy ra thông qua JavaScript.

Ví dụ: đoạn 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);

Nhóm mã

Hình ảnh dữ liệu cộng đồng trong Looker Studio chỉ cho phép bạn tải một JavaScript . Mã được tải lên phải là một tệp duy nhất có chứa dscc thư viện trình trợ giúp, bất kỳ thư viện trực quan hoá JavaScript nào và hình ảnh trực quan 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 trực quan, như cũng như thông tin về vị trí của các tài nguyên trực quan hoá. Vị trí của tệp kê khai được gọi là "ID thành phần" và được dùng để tải hình ảnh dữ liệu cộng đồng.

Xem xét 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 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 hoàn toàn sẽ tải phiên bản mới nhất của tài nguyên. Khi mã ổn định, devMode phải là false để đảm bảo rằng các báo cáo có hình ảnh dữ liệu cộng đồng tải nhanh chóng. Để tìm hiểu thêm về việc lưu vào bộ nhớ đệm, hãy xem hướng dẫn nâng cao về cách lưu vào bộ nhớ đệm.

Các bước tiếp theo

Giờ đây, khi bạn đã viết mã cho hình ảnh trực quan, hãy tìm hiểu cách lưu trữ hình ảnh trực quan của bạn.