可视化图表和查询属性表

Visualization

该组件会从查询上下文中获取数据和配置，然后呈现相应的可视化图表。您可以通过向数值传递数字像素值来自定义宽度和高度。

属性	值	备注
width	数字（以像素为单位）	未定义属性时，默认值为 100%。
height	数字（以像素为单位）	属性未定义时，默认为 500 像素。
chartTypeMap	键值对对象	接受定义当适配器系统遇到特定图表类型值时要呈现的组件的键值对对象。这可用于替换 Looker 的默认图表或向适配器系统添加新的图表类型。

用法示例：

import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

<Query query='12345' config={{ type: 'radar'}}>
   <Visualization
      width={1000}
      height={500}
      chartTypeMap={{ radar: MyCustomRadar}}
    />
</Query>

Query

Query 与我们的 JavaScript API 集成，以处理请求/响应周期，并按查询 ID 或 qid 值提取查询响应。您可以传递 Vis config 替换以与 API 响应合并，并将所有数据加载到 React 上下文中。

属性	值	备注
query	数字 | 字符串	可以接受 Query.client_id（位于“探索”的网址中的 qid 属性后面）(3fdrdE0b3ATltUvXBaSOPN) 或数字查询 ID (1234)。如果您可以访问数字查询 ID，则从此值开始可以保存一个额外的服务器请求。 Query 接受 query 属性或 dashboard 属性，但不能同时接受这两者。
dashboard	数值	可以接受数字信息中心 ID (1234)。如果您有权访问数字信息中心 ID，则从此值开始可以保存一个额外的服务器请求。 dashboard 不接受 LookML 信息中心的字符串 ID。 Query 接受 query 属性或 dashboard 属性，但二者不能同时接受。
config	根据以下 type 值，可接受以下属性： type、legend、positioning、render_null_values、tooltips、series、x_axis、y_axis 如需了解支持的值，请参阅本页面后面的图表专属文档。	设定和覆盖图表的配置设置。
LoadingIndicator	组件参考	接受已卸载的组件引用。默认：ProgressCircular

import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

面积图属性

以下是面积图的 config 属性。

属性	值	备注
type	'area'
legend	false（用于停用）或 { position: 'left' | 'bottom' | 'right' | 'top' }	设置图例位置，或将图例设置为 false 以停用图例。 默认值：{ position: 'bottom' }
positioning	'overlay' | 'stacked' | 'percent'	图表堆叠模式。默认：'overlay'
render_null_values	布尔值	将 null 值视为 0。默认：false
tooltips	布尔值	悬停在数据点上时，会显示或禁用提示。默认：true
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。
x_axis	x 轴配置	如需了解配置选项和用法示例，请参阅 x 轴部分。
y_axis	y 轴配置	如需了解配置选项和用法示例，请参阅 y 轴部分。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'area',
    legend: { position: 'left' },
    positioning: 'stacked',
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 属性可以接受系列配置数组，也可以接受响应中特定系列的已命名对象。

属性	值	备注
color	字符串	十六进制代码
label	字符串
line_width	数值	设置线条描边宽度（以像素为单位）。默认值：3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	设置点的形状。默认：'circle'
style	'none' | 'filled' | 'outline'	设置点的样式。默认值：'none'（已停用积分）
visible	布尔值	显示或隐藏数据系列。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      }
    }
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

虽然我们的图表目前仅支持一条 x 轴，但我们的 API 能够满足未来需求，并且能够支持配置多个轴。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认：false
label	false（用于隐藏标签）| 字符串（要呈现的值）	设置作为 X 轴标签呈现的值。默认值：false（无标签）
reversed	布尔值	反转数据点的顺序。默认：false
values	布尔值	显示或隐藏沿该轴渲染的值。默认值：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

虽然我们的图表目前仅支持一条 y 轴，但我们的 API 能够满足未来需求，其结构还可以支持多个轴的配置。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认值：false。
label	false（用于隐藏标签）| 字符串（要呈现的值）	将渲染的值设为 y 轴标签。默认值：false（无标签）
range	[数字（分钟）| 'auto'，数字（最大值）| 'auto']	设置 y 轴的最小值和最大值。将最小值设置为 'auto' 默认为 0，将最大值设置为 'auto' 会默认为数据集中的最大值。默认值：['auto' | 'auto']
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

条形图和柱形图属性

以下是条形图和柱形图的 config 属性。

属性	值	备注
type	'bar' | 'column'
legend	false（用于停用）或 { position: 'left' | 'bottom' | 'right' | 'top' }	设置图例位置，或将图例设置为 false 以停用图例。默认值：{ position: 'bottom' }
positioning	'grouped' | 'stacked' | 'percent'	图表堆叠模式。默认：'overlay'
tooltips	布尔值	悬停在数据点上时，是否显示提示。 默认：true
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。
x_axis	x 轴配置	如需了解配置选项和用法示例，请参阅 x 轴部分。
y_axis	y 轴配置	如需了解配置选项和用法示例，请参阅 y 轴部分。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 属性可以接受系列配置数组，也可以接受响应中特定系列的已命名对象。

属性	值	备注
color	字符串	十六进制代码
label	字符串
visible	布尔值	显示或隐藏数据系列。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'column',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        visible: false,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'column',
    series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
  }}
>
  <Visualization />
</Query>

x_axis

虽然我们的图表目前仅支持一条 x 轴，但我们的 API 能够满足未来需求，并且能够支持配置多个轴。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认值：false。
label	false（用于隐藏标签）| 字符串（要呈现的值）	设置作为 X 轴标签呈现的值。默认值：false（无标签）
reversed	布尔值	反转数据点的顺序。默认：false
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'column',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

虽然我们的图表目前仅支持一条 y 轴，但我们的 API 能够满足未来需求，其结构还可以支持多个轴的配置。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认值：false。
label	false（用于隐藏标签）| 字符串（要呈现的值）	将渲染的值设为 y 轴标签。默认值：false（无标签）
range	[数字（分钟）| 'auto'，数字（最大值）| 'auto']	设置 y 轴的最小值和最大值。将最小值设为 0，将最大值设为 0，将最大值设为 3。将默认值设为集合中的最大值。默认值：['auto' | 'auto']。
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

折线图属性

以下是折线图的 config 属性。

属性	值	备注
type	'line'
legend	false（用于停用）或 { position: 'left' | 'bottom' | 'right' | 'top' }	设置图例位置，或将图例设置为 false 以停用图例。默认值：{ position: 'bottom' }
render_null_values	布尔值	将 null 值视为 0。默认：false
tooltips	布尔值	悬停在数据点上时，会显示或禁用提示。默认：true
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。
x_axis	x 轴配置	如需了解配置选项和用法示例，请参阅 x 轴部分。
y_axis	y 轴配置	如需了解配置选项和用法示例，请参阅 y 轴部分。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'line',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 属性可以接受系列配置数组，也可以接受响应中特定系列的已命名对象。

属性	值	备注
color	字符串	十六进制代码
label	字符串
line_width	数值	设置线条描边宽度（以像素为单位）。默认值：3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	设置点的形状。默认：'circle'
style	'none' | 'filled' | 'outline'	设置点的样式。默认值：'none'（已停用积分）
visible	布尔值	显示或隐藏数据系列。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

虽然我们的图表目前仅支持一条 x 轴，但我们的 API 能够满足未来需求，并且能够支持配置多个轴。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认值：false。
label	false（用于隐藏标签）| 字符串（要呈现的值）	设置作为 X 轴标签呈现的值。默认值：false（无标签）
reversed	布尔值	反转数据点的顺序。默认：false
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

虽然我们的图表目前仅支持一条 y 轴，但我们的 API 能够满足未来需求，其结构还可以支持多个轴的配置。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认：false
label	false（用于隐藏标签）| 字符串（要呈现的值）	将渲染的值设为 y 轴标签。默认值：false（无标签）
range	[数字（分钟）| 'auto'，数字（最大值）| 'auto']	设置 y 轴的最小值和最大值。将最小值设为 0，将最大值设为 0，将最大值设为 3。将默认值设为集合中的最大值。默认值：['auto' | 'auto']。
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

散点图属性

以下是散点图的 config 属性。

属性	值	备注
type	'scatter'
legend	false（用于停用）或 { position: 'left' | 'bottom' | 'right' | 'top' }	设置图例位置，或将图例设置为 false 以停用图例。默认值：{ position: 'bottom' }
render_null_values	布尔值	将 null 值视为 0。默认：false
tooltips	布尔值	悬停在数据点上时，会显示或禁用提示。默认：true
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。
x_axis	x 轴配置	如需了解配置选项和用法示例，请参阅 x 轴部分。
y_axis	y 轴配置	如需了解配置选项和用法示例，请参阅 y 轴部分。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'scatter',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series 属性可以接受系列配置数组，也可以接受响应中特定系列的已命名对象。

属性	值	备注
color	字符串	十六进制代码
label	字符串
line_width	数值	用于设置散点图中的点的大小。您可以将其理解为每个点的轮廓值。默认：3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	设置点的形状。默认：'circle'
style	'none' | 'filled' | 'outline'	设置点的样式。默认值：'none'（已停用积分）
size_by	false | 字符串	要为其校准每个点大小的系列名称。设置 false 可停用动态点大小调整功能。默认值：false
visible	布尔值	显示或隐藏数据系列。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
        size_by: 'orders.count',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
    query='12345'
    config={{
      type: 'scatter',
      series: [
        {
          color: '#4285F4',
          label: 'Total Orders',
          shape: 'square',
          size_by: 'orders.count',
        },
      ],
    }}
  >
    <Visualization />
  </Query>

x_axis

虽然我们的图表目前仅支持一条 x 轴，但我们的 API 能够满足未来需求，并且能够支持配置多个轴。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认值：false。
label	false（用于隐藏标签）| 字符串（要呈现的值）	设置作为 X 轴标签呈现的值。默认值：false（无标签）
reversed	布尔值	反转数据点的顺序。默认：false
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

虽然我们的图表目前仅支持一条 y 轴，但我们的 API 能够满足未来需求，其结构还可以支持多个轴的配置。

属性	值	备注
gridlines	布尔值	显示或隐藏垂直网格线。默认值：false。
label	false（用于隐藏标签）| 字符串（要呈现的值）	将渲染的值设为 y 轴标签。默认值：false（无标签）
range	[数字（分钟）| 'auto'，数字（最大值）| 'auto']	设置 y 轴的最小值和最大值。将最小值设为 0，将最大值设为 0，将最大值设为 3。将默认值设为集合中的最大值。默认值：['auto' | 'auto']。
values	布尔值	显示或隐藏沿该轴渲染的值。默认：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

单值图表属性

以下是单值图表的 config 属性。

属性	值	备注
type	'single_value'

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

火花谱线图属性

以下是火花谱线图的 config 属性。

属性	值	备注
type	'sparkline'
render_null_values	布尔值	将 null 值视为 0。默认：false
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。
y_axis	y 轴配置	如需了解配置选项和用法示例，请参阅 y 轴部分。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

series

尽管 Sparkline 本身仅支持单个系列，但我们仍保留了涉及已命名或数组系列替换的 API 模式，以便与库中的其他图表类型保持一致。

属性	值	备注
color	字符串	十六进制代码
line_width	数值	设置线条描边宽度（以像素为单位）。默认：3

用法示例：

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'sparkline',
    series: {
      'orders.count': {
        color: '#4285F4',
        line_width: 10,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: [
        {
          color: '#4285F4',
          line_width: 10,
        },
      ],
  }}
>
  <Visualization />
</Query>

y_axis

虽然我们的图表目前仅支持一条 y 轴，但我们的 API 能够满足未来需求，其结构还可以支持多个轴的配置。

属性	值	备注
range	[数字（分钟）| 'auto'，数字（最大值）| 'auto']	设置 y 轴的最小值和最大值。将最小值设为 0，将最大值设为 0，将最大值设为 3。将默认值设为集合中的最大值。默认值：['auto' | 'auto']。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

表格图表属性

以下是表图表的 config 属性。

属性	值	备注
type	'table'
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。
column_order	string[]	一个系列名称数组（例如 'orders.count'），用于指明您希望如何按从左到右的顺序对表列进行排序。
show_row_numbers	boolean	切换表格底部显示的总计行。默认：true
show_totals	boolean	切换表格底部显示的总计行。默认：true
show_row_totals	boolean	在表格的右侧显示行总计值。默认：true
truncate_text	boolean	如果设为 true，表格单元格文本不得超过一行，且内容溢出部分将以省略号截断。如果值为 false，则内容可换行至多行。默认值：true
truncate_header	boolean	如果为 true，则表格标题标签仅限于一行，而内容溢出会以省略号截断。如果值为 false，则标头可以换行至多行。默认值：true

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    column_order: ['orders.count', 'users.city'],
    show_row_numbers: true,
    show_totals: true,
    show_row_totals: true,
    truncate_text: true,
    truncate_header: true
  }}
>
  <Visualization />
</Query>

series

系列属性可接受一组系列配置，或接受响应中特定系列的指定对象。

属性	值	备注
cell_visualization	boolean	开启或关闭内嵌单元格可视化功能。第一个测量默认为 true，其他测量默认为 false。
color	string	指定用于呈现表格单元格可视化图表的颜色。
value_format	string	数字格式字符串，用于指示是否以货币形式呈现值、浮点数精度、是使用英文逗号还是句点来分隔数千个数字等等。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

饼图属性

以下是饼图的 config 属性。

属性	值	备注
type	'pie'
legend	false（停用）| 图例配置	设置为 false 可停用图例。默认：启用。如需了解配置选项和启用时的示例用法，请参阅图例部分。
tooltips	布尔值	悬停在数据点上时，会显示或禁用提示。默认：true
series	view_name.field_name 格式的系列图书	如需了解配置选项和用法示例，请参阅系列部分。

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

legend 属性可接受以下图例配置：

属性	值	备注
type	'labels' | 'legend'	labels 用于放置直接指向每个 Slice 的标签。legend 用于放置单独的图例。默认值：'legend'
position	'top' | 'bottom' | 'left' | 'right'	在 type: 'legend' 时定位图例。默认值：'right'
width	数值	type: 'legend' 时图例的宽度上限（以像素为单位）。默认值：300
value	'label' | 'label_value' | 'value' | 'percent' | 'label_percent'	设置图例内容：标签、标签和值、值、百分比、标签和百分比。默认：'label_percent'

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: {
      type: 'legend'
      position: 'right'
      width: 200,
      value: 'label_value',
    },
  }}
>
  <Visualization />
</Query>

series

与笛卡尔的图表不同，饼图中的每个数据点都会被视为一个新的系列：

属性	值	备注
color	字符串	十六进制代码

用法示例：

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    series: {
      'New York': {
        color: '#4285F4',
      },
      'Los Angeles': {
        color: '#b73ec3',
      },
      'Chicago': {
        color: '#db4da8',
      },
    },
  }}
>
  <Visualization />
</Query>