編寫視覺化圖表

編寫視覺化程式碼

Looker Studio 輔助程式庫提供 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，以確保強制重新整理作業會載入最新版本的資源。程式碼穩定後，devMode 應為 false，確保採用社群視覺呈現的報表可以快速載入。如要進一步瞭解快取，請參閱快取進階指南。

後續步驟

現在您已編寫視覺化呈現的程式碼，接下來請瞭解如何代管視覺化內容。