在 Looker Studio 中建立自訂圖表

1. 簡介

Looker Studio 可讓您免費建立即時互動式資訊主頁，並提供精美的資料視覺化效果。從各種來源擷取資料，並在 Looker Studio 中建立無限數量的報表，還能充分運用編輯和分享功能。以下螢幕截圖是 Looker Studio 報表的範例：

( 按這裡在 Looker Studio 中查看這個範例報表)

Looker Studio 提供多種內建圖表類型，包括折線圖、長條圖、圓餅圖和散布圖。社群視覺化功能可讓您在 Looker Studio 中，建立及使用自己的自訂 JavaScript 視覺化效果。您也可以與他人分享社群視覺化效果，讓他們搭配自己的資料使用。

課程內容

在本程式碼研究室中，您將學到：

瞭解 Looker Studio 社群圖表的運作方式。
如何使用 ds-component 輔助程式庫 (dscc) 建立社群視覺化。
如何在 Looker Studio 報表中使用社群圖表。

軟硬體需求

如要完成本程式碼研究室，請務必符合以下條件：

連上網際網路並使用網路瀏覽器。
Google 帳戶。
有權存取 Google Cloud Platform 儲存空間值區。
熟悉 JavaScript。

2. 簡短問卷調查

你為什麼選擇這個程式碼研究室？

我對一般資料視覺化感興趣。

我想進一步瞭解 Looker Studio。

我想建立自己的社群視覺化。

我嘗試將 Looker Studio 與其他平台整合。

我對 Google Cloud 解決方案有興趣。

您打算如何使用這個程式碼研究室/教學課程？

僅供快速瀏覽。

閱讀並完成練習。

你對 Looker Studio 的使用體驗如何？

從沒聽過。

我知道這是什麼，但我不使用。

我偶爾會使用。

我經常使用這項功能。

我是專家級使用者。

以下哪一項敘述最符合您的背景？

開發人員。

設計師 / 使用者體驗專家。

業務 / 資料 / 財務分析師。

資料科學家 / 資料工程師。

行銷 / 社群媒體 / 數位分析專家。

其他。

您想使用哪些 JavaScript 圖表程式庫？

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

其他

前往下一頁提交問卷調查資訊。

3. 社群視覺化總覽

Looker Studio 社群視覺化功能可讓您在資訊主頁中建立及使用自訂 JavaScript 視覺化。

在本程式碼研究室中，您將建立支援 1 個維度、1 個指標和表格標題樣式的表格圖表社群視覺化。

4. 社群視覺呈現開發工作流程

如要建立社群視覺化效果，您需要在 Google Cloud Platform 儲存空間 bucket 中準備下列檔案 (您會在後續步驟中建立 bucket)：

檔案名稱	檔案類型	目的
manifest.json*	JSON	視覺化中繼資料，以及所有視覺化資源的位置。
viz-codelab.json	JSON	「屬性」面板的資料和樣式設定選項。
viz-codelab.js	JavaScript	用於算繪視覺化效果的 JavaScript 程式碼。
viz-codelab.css (選用)	CSS	視覺化效果的 CSS 樣式。

*資訊清單是唯一需要命名的檔案。只要在資訊清單檔案中指定名稱/位置，其他檔案的名稱可以不同。

5. 撰寫「Hello, world!」視覺化效果

在本節中，您將新增程式碼，以便算繪簡單的「Hello, world!」視覺化內容。

編寫視覺化 JavaScript 來源

步驟 1：從 Looker Studio 社群元件程式庫 (dscc) 頁面下載 dscc.min.js 檔案，然後複製到工作目錄。

步驟 2：將下列程式碼複製到文字編輯器，然後儲存為本機工作目錄中的 viz-codelab-src.js。

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

準備 JavaScript 套件檔案

步驟 3：將所有必要的 JavaScript 複製到名為 viz-codelab.js 的新檔案中，即可將所有 JavaScript 合併為單一檔案。請複製視覺化輔助程式庫 (dscc.min.js) 和 viz-codelab-src.js 檔案的內容。執行下列指令即可串連檔案。每次更新來源視覺化程式碼時，請重複這個步驟。

Linux/Mac OS 串連指令碼

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

Windows 串連指令碼

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. 編寫視覺化 CSS

CSS 檔案會定義圖表的樣式，屬於選用檔案。複製下列 CSS 並儲存為 viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. 編寫 JSON 設定

圖表設定會定義圖表支援和需要的資料與樣式屬性。本程式碼研究室中的這個視覺化效果需要一個維度和一個指標，並有一個樣式元素可供選取填滿顏色。進一步瞭解維度和指標。

複製下列程式碼並儲存為 viz-codelab.json.如要進一步瞭解可設定的屬性，請參閱社群視覺化設定參考資料。

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. 建立 Cloud Storage 專案和 bucket

步驟 1： 建立 Google Cloud Platform (GCP) 專案，或使用現有的專案。

步驟 2： 建立 GCP bucket。建議的儲存空間級別為「區域」。如要瞭解免費層級的詳細資訊，請參閱 Cloud Storage 定價。注意：區域儲存空間級別不太可能產生任何視覺化儲存空間費用。

步驟 3：記下 bucket 名稱/路徑，從「Buckets/」後方的部分開始。在 Looker Studio 中，路徑稱為「元件 ID」，用於識別及部署視覺化效果。

9. 編寫 manifest.json 檔案

資訊清單檔案會提供有關視覺化位置和資源的資訊。這個檔案必須命名為「manifest.json」，且必須位於上一步建立的值區/路徑中，也就是元件 ID 所用的路徑。

將下列程式碼複製到文字編輯器，然後儲存為 manifest.json.

如要進一步瞭解資訊清單，請參閱資訊清單參考說明文件。

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. 將視覺化檔案上傳至 Google Cloud Storage

使用網頁介面或 gsutil 指令列工具，將 manifest.json、viz-codelab.js、viz-codelab.json 和 viz-codelab.css 檔案上傳至 Google Cloud Storage 值區。每次更新視覺化效果時，請重複這個步驟。

gsutil 上傳指令

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. 在 Looker Studio 中測試社群視覺化圖表

建立報表並新增資料

步驟 1：複製社群視覺化範例資料集的網址。或者，您也可以使用偏好的資料來源，並略過下列步驟。

步驟 2： 登入 Looker Studio。按一下左上方的「+ 建立」，然後選取「報表」。

步驟 3：報表編輯器工具隨即開啟「將資料新增至報表」面板。

步驟 4：在「連結至資料」分頁中，選取「Google 提供的 Google 試算表」連接器。

步驟 5：選取「網址」，然後貼上步驟 1 中的 Google 試算表網址。

步驟 6：按一下右下方的「新增」。

步驟 7：如果系統提示確認「您即將將資料新增至這份報表」，請按一下「加入報表」。系統會建立「未命名報表」，並在報表中新增含有範例資料的預設表格。(選用) 選取並刪除預設表格，只留下空白報表。

將社群視覺呈現加入報表

步驟 1：在工具列中，按一下「社群視覺化和元件」圖示。

步驟 2：按一下「+ 探索更多」開啟社群範本庫。

步驟 3：按一下「自行建立視覺化效果」

步驟 4：在「測試並新增社群視覺呈現」下方，輸入資訊清單路徑，然後按一下「提交」。資訊清單路徑是 Google Cloud Storage bucket 名稱和路徑，指向視覺化資訊清單的位置，並加上 gs://. 前置字元。例如：gs://community-viz-docs/viz-codelab。如果輸入有效的資訊清單路徑，系統應會顯示視覺化資訊卡。

步驟 5：按一下要新增至報表的視覺化資訊卡。

步驟 6：如果系統提示，請授予同意聲明，允許系統算繪視覺化內容。

步驟 7：視需要更新表格的所選維度和指標。如果您使用提供的範例資料集，請將維度設為「國家/地區」，指標設為「人口」。在本程式碼研究室的後續部分，這項操作才會對視覺化效果產生影響。

右側的屬性面板會反映 viz-codelab.json 中設定的元素。

在「設定」面板中，視覺化圖表可顯示一個維度和一個指標。

在「樣式」面板下方，視覺化效果有一個元素可設定「表格標題」樣式。此時，樣式控制項不會對視覺化效果產生任何影響，直到稍後步驟中更新視覺化程式碼為止。注意：您會看到在設定檔中未定義的視覺化額外樣式選項。這是正常現象，因為所有視覺化效果都有一組可自動使用的通用控制項。

12. 將資料算繪為表格

在本節中，您將更新視覺化效果，以表格形式顯示社群視覺化範例資料集。

要算繪的資料位於 tables 物件中，並根據您指定的可視化轉換結構化。在本程式碼研究室中，視覺化要求的是表格格式 (tableTransform)，其中包含 headers 物件和 rows 物件，內含用於算繪表格的所有資料。

步驟 1：將 viz-codelab-src.js 的內容替換為下列程式碼。

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

步驟 2：準備 JavaScript 組合檔案，然後上傳並覆寫 Google Cloud Storage 中的視覺化檔案。

步驟 3：重新整理 Looker Studio 報表，重新載入並測試社群視覺化。表格現在會根據所選維度和指標，顯示資料 (即 Google 試算表) 和標題欄。調整圖表大小，即可查看所有資料列。

13. 動態套用樣式變更

在本節中，您將更新視覺化效果，根據「樣式」面板中選取的填滿顏色，設定表格標題的樣式。

所有樣式元素的狀態都位於 style 物件中，每個項目鍵值都是根據您的視覺化樣式設定 (viz-codelab.json) 定義。在本節中，您將取得所選填滿顏色，並用來更新表格標題的背景顏色。

步驟 1：將 viz-codelab-src.js 檔案中的程式碼替換為下列程式碼。

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

步驟 2：準備 JavaScript 組合檔案，然後上傳並覆寫 Google Cloud Storage 中的視覺化檔案。

步驟 3：重新整理 Looker Studio 報表，重新載入並測試社群視覺化。

步驟 4：在「樣式」面板下方，使用「標題背景顏色」樣式控制項變更表格標題背景顏色。

恭喜！您已在 Looker Studio 中建立社群圖表！本程式碼研究室即將告一段落。接著，我們來看看可以採取哪些後續步驟。

14. 後續步驟

擴充視覺化效果

進一步瞭解可供視覺化呈現的資料和格式。
進一步瞭解可用的樣式元素，並為資料檢視畫面新增其他樣式。
在視覺化圖表中新增互動
瞭解如何在本機開發視覺化效果

運用社群視覺呈現執行更多工作

請參閱 dscc 輔助程式庫、資訊清單和設定檔的參考資料。
將視覺化圖表提交至社群視覺化圖表庫。
為 Looker Studio 建立社群連接器。

其他資源

下方提供各種資源，可協助您深入瞭解本程式碼研究室涵蓋的內容。

資源類型	使用者功能	開發人員功能
說明文件	說明中心	開發人員說明文件
最新消息與動態	在 Looker Studio 中註冊 > 使用者設定	開發人員郵寄清單
提問	使用者論壇	Stack Overflow [looker-studio] Looker Studio 開發人員論壇
範例	報表庫	開放原始碼存放區

在 Looker Studio 中建立自訂圖表 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 簡介

課程內容

軟硬體需求

2. 簡短問卷調查

你為什麼選擇這個程式碼研究室？

您打算如何使用這個程式碼研究室/教學課程？

你對 Looker Studio 的使用體驗如何？

以下哪一項敘述最符合您的背景？

您想使用哪些 JavaScript 圖表程式庫？

3. 社群視覺化總覽

4. 社群視覺呈現開發工作流程

5. 撰寫「Hello, world!」視覺化效果

編寫視覺化 JavaScript 來源

viz-codelab-src.js

準備 JavaScript 套件檔案

Linux/Mac OS 串連指令碼

Windows 串連指令碼

6. 編寫視覺化 CSS

viz-codelab.css

7. 編寫 JSON 設定

viz-codelab.json

8. 建立 Cloud Storage 專案和 bucket

9. 編寫 manifest.json 檔案

manifest.json

10. 將視覺化檔案上傳至 Google Cloud Storage

gsutil 上傳指令

11. 在 Looker Studio 中測試社群視覺化圖表

建立報表並新增資料

將社群視覺呈現加入報表

12. 將資料算繪為表格

viz-codelab-src.js

13. 動態套用樣式變更

viz-codelab-src.js

14. 後續步驟

擴充視覺化效果

運用社群視覺呈現執行更多工作

其他資源

在 Looker Studio 中建立自訂圖表