社区可视化图表配置参考

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

此配置应为具有以下结构的 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_SINGLE` 和 `SELECT_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` 可以包含 `TIME`、`GEO` 或 `DEFAULT`。
`"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"`	呈现线条样式选择器。可接受的默认值：`solid`、`dashed`、`dotted`、`double`。
`"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"]
        }
      ]
    }