編寫視覺化圖表

編寫視覺化程式碼

Looker Studio 輔助程式庫提供您與 Looker Studio 之間的介面。如要使用程式庫，請提供可算繪視覺化內容的回呼函式。

程式庫中最顯著的函式是 subscribeToData，它會採用兩個引數：用於算繪視覺化效果的 callback 函式，以及指定要對資料進行何種轉換的 options 物件。詳情請參閱程式庫參考資料。

以下是視覺化 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})

撰寫社群視覺化內容時，請注意以下幾點。

資料、樣式或 iframe 大小變更時，subscribeToData 函式就會更新。

例如：

// 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 會載入並執行 JavaScript 檔案，而非 HTML。所有 DOM 操控作業都必須透過 JavaScript 進行。

舉例來說，下列程式碼會定義 div 並附加至 DOM。

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

將程式碼打包

Looker Studio 社群視覺化效果只允許載入一個 JavaScript 檔案。上傳的程式碼應為單一檔案，其中包含 dscc 輔助程式庫、任何 JavaScript 視覺化程式庫，以及您的視覺化程式碼。

如要在 Bash 中執行這項操作，可以使用 cat 指令，如下所示。

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

定義資訊清單

視覺化資訊清單檔案提供視覺化中繼資料，以及視覺化資源位置的相關資訊。資訊清單檔案的位置稱為「元件 ID」，用於載入社群視覺化效果。

請參閱資訊清單參考資料，查看資訊清單範例。

資訊清單的 devMode 參數會決定視覺化內容的快取行為。開發視覺化內容時，請devMode true，確保強制重新整理會載入最新版本的資源。程式碼穩定後，請devModefalse，確保含有社群視覺化效果的報表能快速載入。如要進一步瞭解快取，請參閱快取進階指南。

後續步驟

現在您已編寫好圖表的程式碼，請瞭解如何代管圖表。