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

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

本教程适用于经验丰富的 JavaScript 开发者，对功能编程技术有一定的了解。

在本示例中，我们先选择一个与某些品牌的虚构季度销售信息相关的查询。首先，我们会针对特定品牌过滤查询，然后按销售季度调整结果。有关示例，请参见下表。

按品牌查询订单结果的结果（包含“创建订单数”维度）。

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

一个定制的可视化图表，每个表格对应一行数据，每个品牌对应一个行，内嵌的火花谱线图按每一行显示订单。

此示例展示了如何创建自定义可视化效果，以及如何在 React 应用中使用 Looker API。

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

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

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

使用要求

开始前，您需要做好以下准备：

您必须有权访问 Looker 实例。
无论您是在扩展框架中构建，还是在独立的 React 应用中构建，都必须通过 Looker 的 API 进行身份验证并访问 Looker SDK 对象。如需了解详情，请参阅 Looker API 身份验证或我们的扩展程序框架。
确保您已安装 Looker 可视化组件的 NPM 软件包和 @looker/components-data NPM 软件包。如需了解如何安装和使用可视化组件软件包，请参阅 README 文档（位于 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 above.
    // 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 步：生成自定义可视化图表

插入转换后的数据并配置图表后，可视化图表将如下所示：