可视化图表配置定义了可视化图表所需的数据和样式属性。
此配置应为具有以下结构的 JSON 文件：
{
"data": [{
"id": string,
"label": string,
"elements": [{
"type": enum(DataElement),
"id": string,
"label": string,
"options": object(DataElementOptions)
}]
}],
"style": [{
"id": string,
"label": string,
"elements": [{
"type": enum(StyleElement),
"id": string,
"label": string,
"defaultValue": string | object
}]
}],
"interactions": [{
"id": string,
"supportedActions": array(enum(InteractionType))
}],
"features": {
"enableComparisonDateRange": boolean
}
}
| 字段名称 | 类型 | 说明 |
|---|---|---|
data[] |
Array(object) |
可视化图表的数据配置。此配置会影响属性面板的数据窗格。 |
data[].id |
string |
数据部分的 ID。它必须是不含空格的非空字符串。 |
data[].label |
string |
数据部分的标签。 |
data[].elements[] |
string |
要呈现的数据元素。 |
data[].elements[].type |
string enum(DataElement) |
要呈现的数据元素类型。 |
data[].elements[].id |
string |
数据元素的 ID。它必须是不含空格的非空字符串。 |
data[].elements[].label |
string |
数据元素的提示标签。 |
data[].elements[].options |
object(DataElementOptions) |
元素的数据选项。这取决于数据元素类型。 |
style[] |
Array(object) |
可视化图表所需的样式配置。此配置会影响属性面板的样式窗格。数组中的每个对象均代表一个要呈现的样式元素。元素的顺序决定了系统呈现它们的顺序。 |
style[].id |
string |
样式部分的 ID。它必须是不含空格的非空字符串。 |
style[].label |
string |
样式部分的标签。 |
style[].elements |
Array(object) |
要呈现的样式元素。 |
style[].elements[].id |
string |
样式元素的 ID。它必须是不含空格的非空字符串。 |
style[].elements[].type |
string enum(StyleElement) |
样式元素类型。例如，字体选择器。 |
style[].elements[].label |
string |
样式元素的提示或标签。它是复选框元素的标签文本，也是其他元素类型的提示文本。 |
style[].elements[].options |
Array(object) |
元素的 options。它仅对 SELECT_SINGLE 和 SELECT_RADIO 样式元素类型有效。 |
style[].elements[].defaultValue |
string OR object |
样式元素的默认值。系统会忽略无效值。* |
interactions[] |
Array(object) |
可视化图表的互动配置。此配置决定了可视化图表是否可以充当过滤器。 |
interactions[].id |
string |
互动元素的 ID。它必须是不含空格的非空字符串。 |
interactions[].supportedActions |
Array (enum(InteractionType) |
支持的可能的互动 |
features |
object |
您要在可视化图表中启用或停用的功能。 |
features.enableComparisonDateRange |
boolean |
启用比较日期范围。如果未指定，则默认为 false。 |
*defaultValue 是一个字符串，可包含除颜色选择器外的任何内容。对于颜色，defaultValue 应为采取以下格式的对象：
{
color: `string`
}
DataElement
数据元素的值可以是以下任一值：
| 枚举值 | 说明 |
|---|---|
| 指标 | 呈现指标字段元素。 |
| 维度 | 呈现维度字段元素。 |
| MAX_RESULTS | 定义此可视化可以请求的数据行数上限 |
DataElement 选项
数据元素的值可以是以下任一值：
| 枚举值 | 选项类型 | 可用选项 |
|---|---|---|
| 指标 | 对象 | 最大值：数字 - 指标数上限
最小值：数字 - 所需的指标数下限 |
| 维度 | 对象 | max: number - 支持的维度数上限。
最小值：数字 - 所需维度的最小数量 supportedTypes：支持的类型列表。 supportedTypes 可以包含 TIME、GEO 或 DEFAULT
|
| MAX_RESULTS | 对象 | max: number - 可视化图表可以请求的行数上限。默认值：2500 |
StyleElement
样式元素的值可以是以下任一值：
| 枚举值 | 说明 | defaultValue 数据类型（配置） |
value 数据类型（消息） |
默认值 |
|---|---|---|---|---|
| FONT_COLOR | 呈现字体颜色选择器。有效值为十六进制颜色代码。 | STRING | OBJECT<Color> |
STRING | OBJECT<Color> |
由主题决定。 |
| FONT_SIZE | 呈现字体大小选择器。有效值包括以下像素：8、9、10、11、12、14、16、18、20、24、28、30、32、36、40、44、48、60、72、84、96。 | NUMBER |
NUMBER |
12 |
| FONT_FAMILY | 呈现字体系列选择器。有效值包括： | STRING |
STRING |
由主题决定。 |
| CHECKBOX | 呈现复选框。 | BOOLEAN |
BOOLEAN |
false |
| 文本输入 | 呈现文本输入框。 | STRING |
STRING |
"" |
| TEXTAREA | 呈现较大的文本输入区域。 | STRING |
STRING |
"" |
| SELECT_SINGLE | 呈现具有预定义值的下拉列表。 | STRING（适用于 defaultValue、options.label 和 options.value） |
STRING |
未指定 |
| SELECT_RADIO | 呈现具有预定义值的单选按钮。 | STRING（适用于 defaultValue、options.label 和 options.value） |
STRING |
未指定 |
| FILL_COLOR | 呈现填充颜色选择器。有效值为十六进制颜色代码。 | STRING | OBJECT<Color> |
OBJECT<Color> |
由主题决定。 |
| BORDER_COLOR | 呈现边框颜色选择器。有效值为十六进制颜色代码。 | STRING | OBJECT<Color> |
OBJECT<Color> |
由主题决定。 |
| AXIS_COLOR | 呈现轴颜色选择器。有效值为十六进制颜色代码。 | STRING | OBJECT<Color> |
OBJECT<Color> |
由主题决定。 |
| GRID_COLOR | 呈现网格颜色选择器。有效值为十六进制颜色代码。 | STRING | OBJECT<Color> |
OBJECT<Color> |
由主题决定。 |
| 不透明度 | 呈现不透明度选择器，单位为 %。有效值为 0 到 1，以 0.1 为增量 | NUMBER |
NUMBER |
1 |
| LINE_WEIGHT | 呈现线条粗细选择器。有效值介于 0 到 5 之间。0 在下拉菜单中将呈现为“无”。 | NUMBER |
NUMBER |
|
| LINE_STYLE | 呈现线条样式选择器。可接受的默认值：solid、dashed、dotted、double。 |
STRING |
STRING |
"solid" |
| BORDER_RADIUS | 呈现边框半径选择器。有效值包括：0、1、2、3、4、5、10、15、20、25、30、40、50、60、70、80、90、100 | NUMBER |
NUMBER |
由主题决定。 |
| INTERVAL | 呈现间隔选择器。值均为整数。 | NUMBER |
NUMBER |
0 |
样式元素用于配置属性面板的 Style 标签中显示的图标。
样式元素选项
某些样式元素支持选项
options: array(options)
| 枚举值 | 选项对象 |
|---|---|
| SELECT_SINGLE |
{
label: `string`,
value: `string`
}
|
| SELECT_RADIO |
{
label: `string`,
value: `string`
}
|
| INTERVAL |
{
max: `number`,
min: `number`
}
|
数据类型
对象<颜色>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
STRING<颜色>
包含十六进制颜色代码的字符串值。
示例
"color": "#0000ff"
NUMBER<Opacity>
从 0 到 1 的数值，以 0.10 为增量
示例
"opacity": 0.2
InteractionType
InteractionTypes 用于配置属性面板的 Data 样式中提供的互动选项。目前仅支持 "FILTER"。
| 枚举值 | 说明 |
|---|---|
"FILTER" |
让用户可以将可视化图表用作过滤器。 |
配置示例
{
"data": [{
"id": "concepts",
"label": "concepts",
"elements": [
{
"id": "dimension1",
"label": "first dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 3,
"supportedTypes": ["DEFAULT"]
}
},
{
"id": "metric",
"label": "metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 3
}
}
]
}],
"style": [
{
"id": "colors",
"label": "Highlight Colors",
"elements": [
{
"id": "accentColor",
"label": "Accent Color",
"type": "SELECT_SINGLE",
"defaultValue": "rain",
"options": [
{
"label": "Summer",
"value": "summer"
},
{
"label": "Fall",
"value": "fall"
}
]
},
{
"id": "reverseColor",
"label": "Show reverse color",
"defaultValue": false,
"type": "CHECKBOX"
},
{
"id": "fillColor",
"label": "Fill Color",
"defaultValue": {
"color": "#0000ff"
},
"type": "FILL_COLOR"
},
{
"id": "textOpacity",
"label": "Text Opacity",
"defaultValue": 0.2,
"type": "OPACITY"
},
{
"id": "customText",
"label": "Custom Text",
"defaultValue": "0.2",
"type": "TEXTINPUT"
}
]
},
{
"id": "text",
"label": "Highlight Text",
"elements": [
{
"id": "textFontSize",
"label": "Font size",
"defaultValue": 10,
"type": "FONT_SIZE"
},
{
"id": "font",
"label": "Font family",
"defaultValue": "Arial",
"type": "FONT_FAMILY"
}
]
}
],
"interactions": [
{
"id": "interactionsConfigId",
"supportedActions": ["FILTER"]
}
],
"features": {
"enableComparisonDateRange": false
}
}