可视化和查询属性表

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 值获取查询响应。您可以传递要与 API 响应合并的 vis 配置替换，并将所有数据加载到 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 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。
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 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。
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，将最大值设置为“自动”会默认设置为数据集中的最大值。默认值：['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 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。
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，将最大值设置为“自动”会默认设置为数据集中的最大值。默认值：['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 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。
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，将最大值设置为“自动”会默认设置为数据集中的最大值。默认值：['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 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。
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，将最大值设置为“自动”会默认设置为数据集中的最大值。默认值：['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 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。
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 会停用图例。默认：启用。如需了解配置选项和启用后的用法示例，请参阅 legend 部分。
tooltips	布尔值	启用或停用将鼠标悬停在数据点上时显示的提示。默认：true
series	view_name.field_name 格式的系列	如需了解配置选项和用法示例，请参阅 series 部分。

用法示例：

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>