如何使用自訂圖表製作工具

自訂圖表建構工具 (CVB) 是開發人員可用來建構及測試自訂圖表的測試環境，可在將自訂圖表加入 Looker 之前使用。以下提供這項工具的使用範例。

CVB 有兩個面：

1. 左側：您將編寫可視化資料的 JavaScript 程式碼
2. 右側也分為兩個部分：
   1. 頂端部分包含下列分頁：
      1. 查詢回應：您可以新增查詢回應的 JSON 格式。
      2. 原始資料。您必須在此處輸入 Looker 傳回的資料陣列。
      3. Dependencies (依附元件) 也是必填分頁，因此您必須輸入字串陣列，其中包含視覺化工具所需的所有依附元件的 CDN 連結。
   2. 底部區塊，用於顯示最終的視覺化呈現。

假設您想使用 Chart.js 程式庫建立下列圖表：

可視化物件有兩個必要屬性：create 和 updateAsync 函式。本教學課程將著重於後者，這是每次需要變更示意圖狀態時會呼叫的函式。系統一律會在 create 後呼叫這個方法，且可能會多次呼叫。

步驟 1：擷取及準備資料

系統會使用第一個參數 (通常稱為 data)，將資料傳遞至 updateAsync 函式。以下程式碼會循環處理這個 data 物件的每個元素，並將資料值推送至 actual_data 陣列，將標籤推送至 data_labels 陣列。這兩個陣列稍後會用於繪製視覺化效果。

const data_labels = []
const actual_data = []

data.forEach((d)=>{
     data_labels.push(d["Products Category"])
     actual_data.push(d["Products Count"])
})

步驟 2：在網頁中附加視覺化圖表

Chart.js 需要 canvas 才能在網頁上算繪視覺化資料。您需要使用所選的 id 建立 canvas 元素 (本教學課程使用 myChart)，然後將此 canvas 附加至 CVB 用於算繪圖表的 div 元素。這個 div 有一個名為 vis 的 ID 屬性。

const vizCanvas = document.createElement('canvas')
vizCanvas.setAttribute("id", "myChart")

const vizDiv = document.getElementById("vis")
vizDiv.appendChild(vizCanvas)

步驟 3：在頁面上繪製視覺化圖表

頁面上現在有一個 ID 為 myChart 的 canvas 元素，您可以指定這個元素並繪製如下所示的圖表：

const ctx = document.getElementById("myChart")
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: data_labels,
    datasets: [{
      label: 'Top 5 Product Category',
      data: actual_data,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

doneRendering()

請務必在最後呼叫 doneRendering 函式，表示視覺化項目已完全算繪。如果視覺化資訊需要執行非同步呼叫，或需要轉譯為 PDF，這項呼叫就特別重要。

最終程式碼如下所示：

const visObject = {
    create: function(element, config){
        element.innerHTML = "";
    },

    updateAsync: function (data, element, config, queryResponse, details, doneRendering) {
        const data_labels = []
        const actual_data = []

        data.forEach((d)=>{
            data_labels.push(d["Products Category"])
            actual_data.push(d["Products Count"])
        })

        const vizCanvas = document.createElement('canvas')
        vizCanvas.setAttribute("id", "myChart")

        const vizDiv = document.getElementById("vis")
        vizDiv.appendChild(vizCanvas)

        const ctx = document.getElementById("myChart")
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data_labels,
                datasets: [{
                    label: 'Top 5 Product Category',
                    data: actual_data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });

        doneRendering()
    }
};

looker.plugins.visualizations.add(visObject);

Looker 資料

以下是 Looker 傳回的資料，您可以在 CVB 的「原始資料」分頁中提供這些資料：

[{"Products Category":"Jumpsuits & Rompers","Products Count":"162"},
{"Products Category":"Suits","Products Count":"184"},
{"Products Category":"Skirts","Products Count":"364"},
{"Products Category":"Plus","Products Count":"439"},
{"Products Category":"Blazers & Jackets","Products Count":"551"}]

依附元件

以下是呈現此視覺化資料所需的依附元件：

["https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"]

查詢回應

您可以對 Get Query 端點發出 API 呼叫，藉此在 Looker 中擷取查詢回應。

最後一步

程式碼運作正常且視覺化運算結果如預期顯示後，您可以按照說明文件中的步驟將視覺化運算結果提交至 Looker。