请注意，您正在查看 Looker 文档。如需查看 Looker Studio 文档，请访问 https://support.google.com/looker-studio。

此页面由 Cloud Translation API 翻译。

使用可视化组件构建自定义可视化

本辅导手册适用于经验丰富的 JavaScript 开发者，要求对函数式编程技术有一定的了解。

在此示例中，我们从一个与某些品牌的假设季度销售信息相关的查询开始。首先，我们将过滤特定品牌的查询，然后按销售季度透视结果。有关示例，请参阅下表。

按品牌查询订单数的结果，包含“创建季度订单”维度的数据透视。

然后，我们将使用可视化组件构建一个自定义可视化，以显示每个品牌的产品在过去一个季度的趋势。这会产生一种新的可视化，由嵌套在表中的一系列火花谱线图组成，如下例所示：

一个定制的可视化图表，其中显示了一个表格，表格中每个品牌都有一行，还有一个嵌入式的火花谱线图，该图表显示了每行中各季度的订单。

这个示例不仅展示了如何创建自定义可视化，还演示了在 React 应用中使用 Looker API 的一些最佳实践。

如需使用 Looker 组件构建自定义可视化图表，请确保您的设置符合要求，然后执行以下步骤：

在“探索”中构建查询并复制 qid 值
将数据传递给自定义可视化图表组件
构建 CustomVis 组件
转换标准化数据
将转换后的数据插入 CustomVis
生成自定义可视化图表

如果自定义可视化图表适用于嵌入式应用或扩展程序，则使用可视化组件来构建自定义可视化图表。如果您希望为 Looker 实例的 Looker 用户提供自定义可视化图表，请按照 visualization 文档页面中的说明操作。如果您想开发自定义可视化图表并将其上传到 Looker Marketplace，请按照为 Looker Marketplace 开发自定义可视化图表文档页面中的说明操作。

使用要求

在开始之前，需要了解一些元素：

您必须有权访问 Looker 实例。
无论您是在扩展程序框架中构建，还是在您自己的独立 React 应用中构建，都需要通过 Looker 的 API 进行身份验证并拥有 Looker SDK 对象的访问权限。如需了解详情，请参阅 Looker API 身份验证或我们的扩展框架。
确保您已安装 Looker 可视化组件 NPM 软件包和 @looker/components-data NPM 软件包。如需了解如何安装和使用可视化组件软件包，请参阅 GitHub 和 NPM 中的自述文档。

第 1 步：在探索中构建查询并复制查询 ID

在此示例中，对于我们长期跟踪的品牌，我们使用假设的季度销售信息。

我们将透视这些数据，因为透视是 Looker 对查询结果进行分组的内置方式。在探索中，我们可以运行查询并使用 Looker 的一种原生可视化类型创建数据图表。该图表提供了大量信息，但很难对每个品牌的商品趋势一览无余：

按品牌查询订单数生成的图表，包含“创建季度订单数”维度的数据透视。

与呈现简单可视化的示例一样，下一步是从“探索”的网址栏中复制 qid 值。在本示例中，qid 值为 Uijcav7pCA4MZY2MompsPZ，但该值特定于我们的测试实例；您的值会有所不同。

第 2 步：将数据传递给自定义可视化组件

首先，将通过探索的网址获取的 qid 值传入 Query 组件，并将经过身份验证的 SDK 对象传递到 DataProvider。

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'></Query>
    </DataProvider>
  )
}

接下来，我们将构建自己的名为 CustomVis 的自定义组件，而不是通过 Visualization 组件渲染原生 Looker 可视化。

Query 组件可以接受任何 React 元素作为子元素，并且只需传递 config、data、fields 和 totals 值作为属性，即可渲染您自己的可视化组件。我们会将 CustomVis 呈现为 Query 的子项，以便它以属性的形式接收所有相关数据。

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
import { CustomVis } from '../path/to/MyCustomVis'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

第 3 步：构建 `CustomVis` 组件

接下来，我们来构建 CustomVis 组件。从 Query 组件继承的属性包括 config、fields、data、pivots 和 totals：

config 描述了数据在图表中呈现的所有方式，例如火花谱线图中线条的粗细或散点图中各点的大小和形状。
fields 存储有关从查询返回的测量值和维度值的其他元数据，例如值应如何设置格式或为每个轴添加标签的内容。
data 是从查询返回的键值对响应。
pivots 用于描述透视查询所依据的维度。
totals 引用了 Looker 的行总计，以用于基于表格的可视化图表。

我们可以通过插入 Table 组件将这些未经修改的属性传递到表格可视化图表。

import React from 'react'
import { Table } from '@looker/visualizations'

export const CustomVis = ({ config, fields, data, pivots }) => {
  return <Table config={config} data={data} fields={fields} pivots={pivots} />
}

这样，我们就可以了解直接从 SDK 返回的数据。在呈现的响应中，每个品牌都会有一行显示结果，并且结果按季度分组或透视。

第 4 步：转换标准化数据

为了转换此透视数据以使用嵌套的火花谱线图进行渲染，我们会隔离所有测量值并将其传递给子图表。在下图中，单行的相关数据突出显示，以说明我们要使用子级可视化图表来收起和呈现的数据：

数据结果图表，其中突出显示了第二行中的订单计数。

我们将为此创建自定义转换。以下是一个特定于此场景的示例；您需要相应地解析自己的数据。


import React from 'react'
import { Table, Sparkline } from '@looker/visualizations'

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'

const nestSparklines = (data) => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData: SDKRecord[] = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={75}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

该函数按照以下步骤创建：

减少数据集，以将品牌名称与每行的季度订单数据分离。
更新每一行，以包含相应维度以及呈现的 React 组件（可表示表格中每一行的值）。

第 5 步：将转换后的数据插入 `CustomVis`

现在，使用新函数转换数据，并将输出分配给名为 nestedData 的新变量：


export const CustomVis =({
  fields,
  data,
  config,
  pivots,
}) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      config={config}
      data={nestedData}
      pivots={pivots}
    />
  )
}

第 6 步：生成自定义可视化图表

插入转换后的数据并配置图表后，可视化图表将类似于下方的表格示例，其中每行都有单独的火花谱线图：