可视化和查询属性表

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 配置替换，以便与 API 响应合并，并将所有数据加载到 React 上下文中。

属性	值	备注
query	数字 | 字符串	可以接受 Query.client_id（位于探索网址中的 qid 属性后面），或 3fdrdE0b3ATltUvXBaSOPN 的数字查询 ID (1234)。如果您有权访问数字查询 ID，则从此值开始可以额外保存一个服务器请求。 Query 可接受 query prop 或 dashboard prop，但不能接受这两者。
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 轴的最小值和最大值。将最小值设置为“自动”，将最大值设置为“自动”，默认为数据集内的最大数据点值。默认值：['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 轴的最小值和最大值。将最小值设置为“自动”，将最大值设置为“自动”，默认为数据集内的最大数据点值。默认值：['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 轴的最小值和最大值。将最小值设置为“自动”，将最大值设置为“自动”，默认为数据集内的最大数据点值。默认值：['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 轴的最小值和最大值。将最小值设置为“自动”，将最大值设置为“自动”，默认为数据集内的最大数据点值。默认值：['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>