社区可视化图表配置参考

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

此配置应为具有以下结构的 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
  }
}