社区可视化图表配置参考

可视化图表配置定义了可视化图表所需的数据和样式属性。

此配置应为具有以下结构的 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_SINGLESELECT_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:数字 - 指标的数量上限
min:数字 - 所需的指标数量下限
维度 对象 max: number - 支持的维度数上限。
min:数字 - 所需的维度数下限
supportedTypes:支持的类型列表。“supportedTypes”可包含 TIMEGEODEFAULT
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 呈现字体系列选择器。有效值是以下字体,字体:Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, Coming Soon, Cormorant Unicase MS, Coming Soon, Cormorant Uni[ STRING STRING 由主题决定。
CHECKBOX 呈现复选框。 BOOLEAN BOOLEAN false
TEXTINPUT 呈现文本输入框。 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 在下拉菜单中呈现为 None。 NUMBER NUMBER
LINE_STYLE 呈现线条样式选择器。可接受的默认值:soliddasheddotteddouble 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&lt;Color&gt;

包含十六进制颜色代码的字符串值。

示例

"color": "#0000ff"

NUMBER<不透明度>

介于 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
 
}
}