編寫視覺化圖表

編寫視覺化程式碼

Looker Studio 輔助程式庫提供您與 Looker 之間的介面 如要使用這個程式庫，請提供可轉譯 圖表

程式庫中最重要的函式是 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})

撰寫社群時，請留意幾件事 圖表

當資料、樣式或subscribeToData 變更 iframe 大小。

例如：

// 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 社群視覺呈現僅允許載入 1 個 JavaScript 檔案。上傳的程式碼必須是包含 dscc 輔助程式庫、任何 JavaScript 視覺化程式庫，以及您的視覺化內容 再也不是件繁重乏味的工作

如要在 bash 中執行這項作業，請使用 cat 指令，如下所示。

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

定義資訊清單

視覺化資訊清單檔案提供圖表的中繼資料 以及視覺呈現資源位置的相關資訊地點 稱為「元件 ID」，可用於載入 社群視覺呈現

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

資訊清單的 devMode 參數會決定 圖表開發視覺化效果時，devMode 應為 true 到 確保強制重新整理會載入最新版本的資源。產生 程式碼穩定，devMode 應為 false，以確保報表 快速載入社群視覺呈現如要進一步瞭解快取，請參閱 快取進階指南。

後續步驟

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