如何使用自定义可视化图表制作工具

自定义可视化图表构建器 (CVB) 是一个实验场，可让开发者在将自定义可视化图表添加到 Looker 之前，先在该环境中构建和测试自定义可视化图表。以下示例展示了如何使用此工具。

CVB 有两个方面：

1. 左侧：您将在此处编写可视化图表的 JavaScript 代码
2. 右侧也分为两个部分：
   1. 顶部部分包含以下标签页：
      1. 查询响应：您可以在此处添加查询响应的 JSON 格式。
      2. 原始数据。您必须在此处输入 Looker 返回的数据数组。
      3. 依赖项，这也是一个必填标签页，因此您需要输入一个字符串数组，其中包含可视化图表所需的所有依赖项的 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（本教程中使用 myChart）创建 canvas 元素，然后将此 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。