Visualization
此组件会从查询上下文中抓取数据和配置，并呈现相应的可视化图表。您可以通过向这些属性传递数值像素来自定义宽度和高度。
| 属性 | 值 | 备注 |
|---|---|---|
width
|
数值（以像素为单位） | 未定义属性时，默认值为 100%。 |
height
|
数字（以像素为单位） | 未定义属性时，默认值为 500px。 |
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 later on this page */
}}
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
|
boolean | 将 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
|
boolean | 显示或隐藏数据系列。默认：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 轴的最小值和最大值。将 min 设置为 'auto' 的默认值为 0，将 max 设置为 'auto' 的默认值为集合中的最大数据点值。默认值：['auto' | 'auto']
|
values
|
boolean | 显示或隐藏沿轴渲染的值。默认：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（停用）OR { 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；将“最大值”设置为“自动”时，默认值为数据集中的最大数据点值。默认值：['auto' | 'auto']。
|
values
|
boolean | 显示或隐藏沿轴渲染的值。默认：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（停用）OR { position: 'left' | 'bottom' | 'right' | 'top' }
|
将图例设置为 false 可设置图例位置或停用图例。默认值：{ position: 'bottom' }
|
render_null_values
|
boolean | 将 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
|
boolean | 显示或隐藏数据系列。默认：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
|
boolean | 显示或隐藏沿轴渲染的值。默认：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（停用）OR { position: 'left' | 'bottom' | 'right' | 'top' }
|
将图例设置为 false 可设置图例位置或停用图例。默认值：{ position: 'bottom' }
|
render_null_values
|
boolean | 将 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
|
boolean | 显示或隐藏数据系列。默认：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
|
boolean | 显示或隐藏沿轴渲染的值。默认：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
|
boolean | 将 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 轴的最小值和最大值。正在将 min 设置为“auto”默认为 0，将 max 设置为“auto”。默认为集中的最大数据点值。默认值：['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
|
boolean | 启用或停用将鼠标悬停在数据点上时显示的提示。默认：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 用于放置直接指向每个切片的标签。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>