社区可视化图表配置参考

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

此配置应为具有以下结构的 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))
        }
      ]
    }
    
字段名称 类型 说明
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) 支持的可能的互动

*defaultValue 是一个字符串,可包含除颜色选择器外的任何内容。对于颜色,defaultValue 应为采用以下格式的对象:

{
        color: `string`
    }
    

DataElement

数据元素的值可以是以下任一值:

枚举值 说明
"METRIC" 呈现指标字段元素。
"DIMENSION" 呈现维度字段元素。
"MAX_RESULTS" 定义此可视化图表可以请求的数据行数上限

DataElement 选项

数据元素的值可以是以下任一值:

枚举值 选项类型 可用选项
"METRIC" Object max:数字 - 支持的指标数上限。
min:数字 - 所需的指标数下限。
"DIMENSION" Object max:数字 - 支持的维度数上限。
min:数字 - 所需的维度数下限,
supportedTypes - 支持的类型列表。supportedTypes 可以包含 TIMEGEODEFAULT
"MAX_RESULTS" Object max:数字 - 可视化图表可以请求的行数上限。默认值:2500

StyleElement

样式元素的值可以是以下任一值:

枚举值 说明
"FONT_COLOR" 呈现字体颜色选择器。
"FONT_SIZE" 呈现字体大小选择器。默认值:10px
"FONT_FAMILY" 呈现字体系列选择器。默认值:auto
"CHECKBOX" 呈现复选框。默认值:"false"
"TEXTINPUT" 呈现文本输入框。
"TEXTAREA" 呈现较大的文本输入区域。
"SELECT_SINGLE" 呈现具有预定义值的下拉列表。
"SELECT_RADIO" 呈现具有预定义值的单选按钮。
"FILL_COLOR" 呈现填充颜色选择器。
"BORDER_COLOR" 呈现边框颜色选择器。
"AXIS_COLOR" 呈现坐标轴颜色选择器。
"GRID_COLOR" 呈现网格颜色选择器。
"OPACITY" 呈现不透明度选择器。
"LINE_WEIGHT" 呈现线条粗细选择器。
"LINE_STYLE" 呈现线条样式选择器。可接受的默认值:soliddasheddotteddouble
"BORDER_RADIUS" 呈现边框半径选择器。
"INTERVAL" 呈现间隔选择器。

样式元素用于配置属性面板的 Style 标签中显示的图标。

options: array(options)
    

选项对象

{
        label: `string`,
        value: `string`
    }
    

InteractionType

InteractionTypes 用于配置属性面板的 Data 样式中提供的互动选项。目前仅支持 "FILTER"

枚举值 说明
"FILTER" 让用户可以将可视化图表用作过滤器。

配置示例

{
      "data": [
        {
          "id": "concepts",
          "label": "concepts",
          "elements": [
            {
              "id": "dimension1",
              "label": "first dimension",
              "type": "DIMENSION",
              "options": {
                "min": 1,
                "max": 3,
                "supportedTypes": ["GEO"]
              }
            },
            {
              "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": "auto",
              "type": "FONT_FAMILY"
            }
          ]
        }
      ],
      "interactions": [
        {
          "id": "interactionsConfigId",
          "supportedActions": ["FILTER"]
        }
      ]
    }