[]
        
首页
开发者学堂
文档
论坛
市场
生态机会
活动
在线Demo 免费试用
(Showing Draft Content)

Capabilities.json深度配置

4.1 通用接口

interface ILocalizable {
    displayName?: string;
    displayNameKey?: string;
}

interface IIconable {
    icon?: string;
    iconCss?: string;
}

interface IMember extends ILocalizable, IIconable {
    name?: string;
}

interface IEnumItem extends ILocalizable, IIconable {
    value: any;
}

interface IPosition {
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
}

interface ISize {
    width?: number;
    height?: number;
}

说明

  • ILocalizable:用于显示名称或显示名称键。

  • IIconable:支持资源图标或 iconCss。

  • IMember:动作、枚举成员等常见成员类型的基类。

  • IEnumItem:枚举项结构。

  • IPosition / ISize:用于位置与尺寸配置。

4.2 dataBinding:数据角色与绑定结构

总接口

interface IDataBinding {
    dataRoles: Array<IDataRole | IDataRolesCollection>;
    templates?: IDataRoleTemplate[];
    dataViewMappings?: IDataViewMappingConfig[];
    conditions?: IDataRoleConditions;
    conversionRules?: IConversionRules;
}

interface IOption extends IIconable, ILocalizable {
    name: string;
    type: DataRoleOptionType | DataRoleTemplateOptionType;
    defaultValue?: any;
}

interface IItemOption extends IIconable, ILocalizable {
    name: string;
    type: DataRoleItemOptionType;
    defaultValue?: any;
}

相关枚举与接口

enum DataRoleOptionType {
    Enum = 'enum',
    Format = 'format',
    DisplayUnit = 'displayUnit',
}

enum DataRoleItemOptionType {
    Enum = 'enum',
    Format = 'format',
    DisplayUnit = 'displayUnit',
    RenderSetting = 'renderSetting',
}

interface IEnumOptions extends IOption {
    items: Array<CommonDefNS.IEnumItem>;
}

interface IItemEnumOptions extends IItemOption {
    items: Array<CommonDefNS.IEnumItem>;
}

export enum DataRoleType {
    Value = 'value',
    Grouping = 'grouping',
    GroupingOrValue = 'groupingOrValue',
    Attribute = 'attribute',
    AttributeOrValue = 'attributeOrValue',
}

enum DatasetFieldDataType {
    date = 'date',
    datetime = 'datetime',
    number = 'number',
    string = 'string',
    boolean = 'boolean',
}

interface IDataRole extends CommonDefNS.ILocalizable {
    name: DataRoleName;
    aliasName: DataRoleName;
    kind: DataRoleType;
    options: IOption[];
    itemOptions: IItemOption[];
    hidden?: boolean;
    acceptedTypes?: DatasetFieldDataType[];
    preferredKind?: DataRoleType;
}

interface IDataRolesCollection extends CommonDefNS.ILocalizable {
    kind: DataRoleType.DataRoleCollection;
    groups?: TemplateName[];
    collapsible?: boolean;
    editable?: boolean;
}

字段说明

IDataRole
  • name:data role 名称。

  • aliasName:切换图表类型时使用;具有相同名称或别名的 data role 会被视为同一角色。

  • kind:

    • grouping:分类 / 分组字段

    • value:度量值字段

    • groupingOrValue:既可作度量,也可作分组

    • attribute:字段分组后的第一个值

    • attributeOrValue:既可作属性,也可作度量

    • collection:模板集合容器,用于承载可重复的模板组;该值在示例和模板集合场景中实际使用

  • options:在 data role 面板上显示的设置项按钮。

  • itemOptions:针对绑定字段本身的设置,例如格式或渲染设置。

  • hidden:若为真,则该 role 不显示在数据绑定面板上,但仍可用于 dataViewMapping。

  • acceptedTypes:可接受的数据类型限制。

  • preferredKind:仅在 groupingOrValue / attributeOrValue 下有效,用于指定默认优先当作值还是分组。

补充说明:

  • acceptedTypes 常用于限制某个 role 只能绑定数字、日期、字符串等字段。

  • preferredKind 用于改善拖拽绑定体验,例如某个 role 既能接维度也能接度量时,优先按哪种方式接收。

IDataRolesCollection
  • groups:初始模板实例集合。

  • collapsible:是否支持折叠。

  • editable:是否支持排序、添加、编辑标题等操作。

dataRoles 示例

{
  "name": "Values",
  "kind": "value",
  "options": [
    {
      "type": "format",
      "name": "valueFormat",
      "displayNameKey": "inspector.properties.charts.axis.dataFormat"
    },
    {
      "displayNameKey": "actionBar.changeChartType",
      "name": "valueChartType",
      "type": "enum",
      "defaultValue": "column",
      "items": [
        { "value": "line", "displayNameKey": "chartTypes.line" },
        { "value": "column", "displayNameKey": "chartTypes.column" },
        { "value": "area", "displayNameKey": "chartTypes.area" },
        { "value": "stackedColumn", "displayNameKey": "chartTypes.stackedColumn" }
      ]
    }
  ],
  "itemOptions": [
    {
      "name": "itemRenderSetting",
      "type": "renderSetting",
      "displayName": "Render Setting"
    },
    {
      "name": "itemFormat",
      "type": "format",
      "displayName": "Edit Format..."
    },
    {
      "name": "itemDisplayUnit",
      "type": "displayUnit",
      "displayName": "DisplayUnit"
    },
    {
      "name": "itemEnum",
      "type": "enum",
      "displayName": "Enum",
      "items": [
        { "value": 1, "displayName": "one" },
        { "value": 2, "displayName": "two" },
        { "value": 3, "displayName": "three" }
      ],
      "defaultValue": 1
    }
  ]
}

界面说明(Data Binding 截图文字化)

  • 原始截图展示了 data role 面板的布局。

  • 原始截图展示了 data role 上附加“格式 / 单位 / 枚举”等选项按钮的效果。

  • 原始截图展示了模板集合中为单个绑定项增加枚举选项的菜单效果。

4.3 templates:模板化数据绑定组

接口

enum DataRoleTemplateOptionType {
    Enum = 'enum',
}

interface IDataRoleTemplate extends CommonDefNS.ILocalizable, CommonDefNS.IIconable {
    name: TemplateName;
    dataRoles?: IDataRole[];
    dataViewMappings: IDataViewMappingConfig[];
    conditions?: IDataRoleConditions;
    options?: IOption[];
}

interface IDataRolesCollection extends CommonDefNS.ILocalizable {
    kind: DataRoleType.DataRoleCollection;
    groups?: TemplateName[];
    collapsible?: boolean;
    editable?: boolean;
}

示例

{
  "templates": [
    {
      "name": "value",
      "displayNameKey": "dataBindingPanel.singleValue",
      "dataRoles": [
        {
          "name": "values",
          "displayNameKey": "dataBindingPanel.value",
          "kind": "value"
        }
      ],
      "dataViewMappings": [
        {
          "single": {
            "value": "values"
          }
        }
      ],
      "conditions": [
        {
          "values": { "max": 1 }
        }
      ]
    }
  ],
  "dataRoles": [
    {
      "name": "row",
      "displayNameKey": "dataBindingPanel.row",
      "kind": "grouping"
    },
    {
      "kind": "collection",
      "displayNameKey": "dataBindingPanel.value",
      "groups": ["value"],
      "collapsible": true,
      "editable": true
    }
  ]
}

模板的使用价值

  • 适合 KPI、矩阵等“重复绑定组”场景。

  • 一个模板对应一组可重复的数据角色配置。

  • 可支持多数据绑定组、折叠、编辑与排序。

4.4 dataViewMappings:从角色到视图的映射

通用接口

interface IDataViewMapping {
    required?: IDataRoleConditions;
}

interface IDataView {
    single: ISingleDataView;
    plain: IPlainDataView;
    matrix: IMatrixDataView;
}

interface IDataRoleProfile {
    options: any;
    values: IPivotSettingProfile[];
}

interface IPivotSettingProfile {
    display: string;
    name: string;
    method?: AggMethod;
    dataType: DataType;
    format: string;
}

1)SingleDataView

interface ISingleDataViewMapping extends IDataViewMapping {
    value: DataRoleName;
}

interface ISingleDataView {
    value: number;
    profile: { [key: string]: IDataRoleProfile };
    options: any;
}

映射示例:

{
  "single": {
    "value": "values"
  }
}

运行时示例:

{
  "value": 2610462,
  "profile": {
    "values": {
      "options": {
        "valueFormat": "$#,##0.00"
      },
      "values": [
        {
          "display": "Amount",
          "name": "Amount",
          "method": "sum",
          "dataType": "number",
          "format": "$#,##0.00"
        }
      ]
    }
  },
  "options": {}
}

2)PlainDataView

interface IPlainDataViewMapping extends IDataViewMapping {
    dataRoles: DataRoleName[];
    series?: DataRoleName;
    trellisRows?: DataRoleName;
    trellisColumns?: DataRoleName;
}

interface IPlainDataView {
    data: any[];
    profile: { [dataRoleName: string]: IDataRoleProfile };
    sort: {
        [columnDisplay: string]: {
            order: any[];
            priority: -1 | 0 | 1;
        }
    };
    options: any;
}

映射示例:

{
  "plain": {
    "required": [
      {
        "values": {
          "min": 1
        }
      }
    ]
  }
}

说明:

  • plain.data:平面行数据。

  • plain.profile:不同 data role 对应的字段 profile。

  • plain.sort:排序信息;启用 sort action 后,插件代码需要自行消费此排序信息。

运行时样例特征:

  • data 中每一行包含如 Department、Product、Amount 等字段。

  • profile.values / profile.dimensions / profile.series 记录字段显示名、类型、格式、聚合方式。

  • sort 记录列的顺序与优先级。

3)MatrixDataView

interface IMatrixDataViewMapping extends IDataViewMapping {
    values: DataRoleName[];
    rows: DataRoleName[];
    columns: DataRoleName[];
}

映射示例:

{
  "matrix": {
    "values": ["values"],
    "rows": ["dimensions"],
    "columns": ["series"]
  }
}

运行时结构特征:

  • matrix.columns.levels / headers / sortPriority

  • matrix.rows.levels / headers / sortPriority

  • matrix.values:扁平化后的交叉值记录

  • profile.values / dimensions / series:字段 profile 信息

dataViewMappings 补充说明

  • required 表示此映射成立所需的最小绑定条件。

  • plain.dataRoles 未显式指定时,默认可视为映射全部相关 data role。

  • plain.series、trellisRows、trellisColumns 可用于系列分组与小多图布局。

  • IDataRoleProfile.options 中可以读取在 data role 上定义的 options 值,例如格式、显示单位、枚举等。

  • IPivotSettingProfile 中:

    • display 是运行时数据点对象的字段名读取入口

    • name 是字段原始名称

    • method 是聚合方式,如 sum

    • dataType 和 format 可辅助运行时格式化与类型判断

运行时读取 role options 的价值

例如当某个 role 配置了:

  • format

  • displayUnit

  • enum

这些值会出现在对应 profile.<role>.options 中,插件可以据此决定:

  • 数字标签格式

  • 单位缩放逻辑

  • 渲染形态或图表类型

4.5 conditions 与 conversionRules

conditions

conditions 用于定义每个 data role 可绑定字段数的限制。

  • 不同 condition 之间是 OR 关系

  • 同一个 condition 内的 dataRole 之间是 AND 关系

[
  {
    "series": { "max": 0 }
  },
  {
    "series": { "min": 1 },
    "values": { "max": 1 }
  }
]

含义:

  • 当 series 中没有字段时,其他字段不受此条件限制。

  • 当 series 至少有一个字段时,values 最多只能绑定一个字段。

conditions 接口

interface IDataRoleCondition {
    [dataRoleName: string]: {
        max?: number;
        min?: number;
    };
}

conversionRules

用于定义图表切换时的数据角色迁移规则。

enum ConversionCommand {
    All = 'all',
    First = 'first',
    Last = 'last',
}

enum ConversionPhase {
    Pre = 'pre',
    Post = 'post'
}

interface IConversionRulesDetail {
    mode: ConversionPhase;
    conditions?: Array<IDataRoleCondition>;
    execute: Array<{
        source: DataRoleName;
        target: DataRoleName;
        cmd: ConversionCommand;
    }>;
}

interface IConversionRules {
    in?: Array<IConversionRulesDetail>;
    out?: Array<IConversionRulesDetail>;
}

规则说明

  1. 尝试把源可视化中的相关 dataRole 项目迁移到目标可视化。

  2. 若 conditions 为空,则执行规则;若不为空且匹配,则执行;否则不执行。

  3. cmd 含义:

    • all:全部迁移

    • first:迁移第一项,其余留在源 role

    • last:迁移最后一项,其余留在源 role

  4. 执行后还会再次检查目标图表是否满足 conditions,不满足则回滚。

规则执行顺序

  1. 执行 target conversionRules.in 中的 pre

  2. 执行 source conversionRules.out 中的 pre

  3. 执行默认转换规则(name / aliasName 相同的 role 自动迁移)

  4. 执行 target conversionRules.in 中的 post

  5. 执行 source conversionRules.out 中的 post

  6. 处理源图表中仍未转换的 dataRole 项目;若目标能找到相关 role,则迁入并标记无效,否则也迁入并标记无效

典型配置示例(柱状图 ↔ 旭日图)

原始文档给出了“柱状图组件”与“旭日图组件”的完整规则示例,核心要点如下:

  • 柱状图的 category、series 可在转换时迁入旭日图的 details

  • 旭日图转换回柱状图时,可将 details 的最后一个字段迁入 series,其余迁入 category

  • 当 values 超出目标图表允许数量时,多余项会被迁入但标记为 invalid: true

这组示例是理解 conversionRules 的关键业务案例:它说明了图表切换不只是字段“同名迁移”,还可以做有条件的结构重组。

4.6 options:属性系统总览

总接口

interface IOptions {
    common?: {
        size?: ISize;
        margin?: IPosition;
        filter?: boolean;
    };
    visual?: IVisualCategory[];
}

enum InheritProperty {
    Palette = 'dashboard.palette',
    TextStyle = 'dashboard.textStyle',
    TitleTextStyle = 'dashboard.titleTextStyle',
    BackgroundColor = 'dashboard.backgroundColor',
}

enum PublicPropertyType {
    Text = 'Text',
    Integer = 'Integer',
    Float = 'Float',
    Boolean = 'Boolean',
    LongText = 'LongText',
    Enum = 'Enum',
    Command = 'Command',
    Color = 'Color',
    Percentage = 'Percentage',
    Format = 'Format',
    DisplayUnit = 'DisplayUnit',
    Angle = 'Angle',
    Palette = 'Palette',
    TextStyle = 'TextStyle',
    Position = 'Position',
    Image = 'Image',
    Hidden = 'Hidden',
    ColorAssignment = 'ColorAssignment',
    Collection = 'Collection',
    ClickAction = 'ClickAction'
}

enum CategoryType {
    Title = 'title',
    Appearance = 'appearance',
    Custom = 'custom',
    Interaction = 'interaction',
}

interface IVisualCategory extends ILocalizable {
    type?: CategoryType;
    properties?: IVisualProperty[];
}

interface IProperty {
    name: string;
    inheritFrom?: InheritProperty;
    defaultValue?: any;
    structuredPath?: string;
}

interface IVisualProperty extends IProperty {
    type?: PublicPropertyType;
    hidden?: boolean;
}

说明

  • options.common.filter = true:启用筛选器能力。筛选器主要用于过滤其他组件,自身的数据不会受到其他组件的联动分析影响,如果插件主要用于展示内容,请不要开启这个选项。

  • hidden:可让属性在面板中隐藏,但仍可作为内部值存在。

  • inheritFrom:支持从 dashboard 或同级属性继承。

  • structuredPath:表示属性写入对象中的父路径。

structuredPath 示例

{
  "name": "c",
  "type": "Color",
  "displayName": "Text Color",
  "defaultValue": "#fff",
  "structuredPath": "a.b"
}

其效果相当于把属性写入:

{
  "a": {
    "b": {
      "c": "#fff"
    }
  }
}

4.7 属性分类与 watchParameter

1)标题类(title)

interface ITitleCategory extends IVisualCategory {
    disable?: {
        auto?: boolean,
        alignment?: boolean,
    };
    defaultValue?: {
        show?: boolean,
        alignment?: string,
    };
}

2)外观类(appearance)

interface IAppearanceCategory extends IVisualCategory {
    disable?: {
        batchSetStyle?: boolean,
        backgroundColor?: boolean,
        padding?: boolean,
        margin?: boolean,
        backgroundImage?: boolean,
        border?: boolean,
        shadow?: boolean,
    };
}

3)交互类(interaction)

interface IInteractionCategory extends IVisualCategory {
    disable?: {
        crossFilter?: boolean,
        jumpTo?: boolean,
        dataSetAutoRefresh?: boolean,
        hiddenActions?: boolean,
        pinAnnotation?: boolean,
    };
    defaultValue?: {
        crossFilter?: boolean,
    };
    watchParameter?: {
        roles: string[];
        staticOnly?: boolean;
    };
}

4)自定义类(custom)

  • 业务自定义属性归入该分类。

watchParameter 关键说明

  • 仅配置 watchParameter 不够,分类必须是 type: "interaction"。

  • roles 定义可绑定参数角色。

  • staticOnly: true 表示仅监听静态参数。

  • 如果未设置 interaction 分类,或在该分类中禁用了 crossFilter,则 SelectionManager 不会触发交叉筛选。

  • disable.crossFilter、disable.jumpTo、disable.dataSetAutoRefresh、disable.hiddenActions、disable.pinAnnotation 用于裁剪交互面板中可见或可用的系统能力。

  • defaultValue.crossFilter 可用于定义交叉筛选的默认开关状态。

watchParameter 示例

{
  "type": "interaction",
  "displayNameKey": "property.general",
  "properties": [],
  "watchParameter": {
    "roles": [
      {
        "name": "parameterDefaultValue",
        "display": "parameterDefaultValue",
        "displayNameKey": "property.parameterDefaultValue"
      },
      {
        "name": "bindToParameter",
        "display": "bindToParameter",
        "displayNameKey": "property.bindToParameter"
      }
    ],
    "staticOnly": true
  }
}

4.8 属性类型明细

通用属性类型速查表

类型

关键字段 / 说明

Text

maxLength、regex

Integer

min、max、step

Float

min、max、placeholder

Boolean

布尔开关

LongText

rows

Enum

items: IEnumItem[]

Command

命令类选择属性

Color

resetType

Percentage

min、max

Format

数字格式编辑器

DisplayUnit

显示单位编辑器

Angle

min、max、step、markStep、marks

Palette

调色板, 使用 Wyn 内置的调色板,返回一个颜色数组,可以和内置组件颜色保持一致

TextStyle

fontFamilyList

Position

位置编辑器

Image

图片选择

Hidden

不渲染 UI,只能由代码修改

ColorAssignment

颜色分配,需实现 getColorAssignmentConfigMapping

Collection

集合属性,支持配置 itemShape

ClickAction

鼠标点击动作配置

典型示例

Text

{
  "name": "test",
  "type": "Text",
  "displayName": "Test",
  "maxLength": 10,
  "regex": "^aaa"
}

Enum

{
  "name": "test",
  "type": "Enum",
  "displayName": "Test",
  "items": [
    { "value": "a", "displayName": "A" },
    { "value": "b", "displayName": "B" }
  ]
}

Command

{
  "name": "command",
  "type": "Command",
  "displayNameKey": "command",
  "items": [
    { "value": "HideScenario", "displayNameKey": "HideScenario" },
    { "value": "ShowScenario", "displayNameKey": "ShowScenario" },
    { "value": "ToggleScenario", "displayNameKey": "ToggleScenario" }
  ]
}

该属性类型通常用于在属性面板中选择一个宿主命令,再由运行时代码根据所选命令调用 commandService.execute(...)。


Color

export enum ColorResetType {
    None = 'none',
    Auto = 'auto',
    NoFill = 'noFill',
}

interface IColorProperty extends IVisualProperty {
    resetType?: ColorResetType;
}

含义:

  • none:隐藏重置按钮

  • auto:点击自动按钮时清除数据

  • noFill:点击 no fill 按钮时设置 no fill 关键字

Angle


Angle 编辑器除 min、max、step 外,还支持:

  • markStep:绘制刻度标记时的步长

  • marks:自定义刻度值数组

这类属性通常用于旋转角度、仪表盘弧度、标签倾斜角等滑块配置。


TextStyle


TextStyle 支持 fontFamilyList?: string[],可用于限制字体下拉框的可选范围,而不是向最终用户暴露全部字体。


Hidden


Hidden 类型没有固定结构,可以是字符串、数字、数组或复杂对象;它不会在属性面板渲染任何 UI,只能通过 propertyService 或运行时代码修改。


ColorAssignment

interface IColorAssignmentProperty extends IVisualProperty {
    alias?: string;
    palettePath?: string;
}

说明:

  • alias:visual.ts 中颜色分配配置的键。

  • palettePath:默认调色板值路径。

  • 启用后,属性值将变为“颜色映射对象”。

  • 必须在 Visual 上实现 getColorAssignmentConfigMapping。

Collection

enum ItemType {
    Text = 'Text',
    Integer = 'Integer',
    Float = 'Float',
    Boolean = 'Boolean',
    LongText = 'LongText',
    Enum = 'Enum',
    Color = 'Color',
    Percentage = 'Percentage',
    Format = 'Format',
    DisplayUnit = 'DisplayUnit',
    Slider = 'Slider',
    Image = 'Image',
}

interface IItemProperty {
    name?: string;
    displayName?: string;
    displayNameKey?: string;
    defaultValue?: any;
    type: ItemType;
}

interface ICollectionProperty extends IVisualProeprty {
    itemShape: IItemProperty | IItemProperty[];
    defaultValue?: any[];
}

Collection 子项还支持:

  • IItemStringProperty

  • IItemIntegerProperty

  • IItemFloatProperty

  • IItemLongTextProperty

  • IItemEnumProperty

  • IItemColorProperty

  • IItemPercentageProperty

  • IItemSliderProperty

Collection 定义示例

{
  "name": "collection",
  "displayName": "Collection",
  "type": "Collection",
  "itemShape": [
    { "name": "name", "displayName": "Name", "type": "Text" },
    { "name": "min", "displayName": "Min", "type": "Integer" },
    { "name": "max", "displayName": "Max", "type": "Integer" },
    { "name": "color", "displayName": "Color", "type": "Color" }
  ],
  "defaultValue": []
}

Collection 使用示例

const list = properties.collection;
// list: [
//   { name: '0~59', min: 0, max: 59, color: 'red' },
//   { name: '60~79', min: 60, max: 79, color: 'yellow' },
//   { name: '80~100', min: 80, max: 100, color: 'green' }
// ]

ClickAction

enum InteractionMouseEventAction {
    ShowTooltip = 'showTooltip',
    None = 'none',
    Keep = 'keep',
    Exclude = 'exclude',
    DrillTo = 'drillTo',
    JumpTo = 'jumpTo',
    AddMonitor = 'addMonitor',
}

interface IClickActionProperty extends IVisualProperty {
    disableActions?: Array<InteractionMouseEventAction>;
}

示例:

{
  "name": "clickAction",
  "type": "ClickAction",
  "displayName": "Click Action"
}

补充说明:

  • disableActions 用于裁剪点击交互面板中允许用户选择的动作项。

  • 可禁用的原始枚举包括:showTooltip、none、keep、exclude、drillTo、jumpTo、addMonitor。

  • 该属性的作用不是直接执行动作,而是决定“点击时允许配置成什么动作”。

说明补充

  • 原始属性文档为大多数属性类型都提供了截图,用于展示它们在属性面板中的编辑器样式;本文已将这些界面效果转化为“编辑器类型 + 可配置字段”的文字化说明。

4.9 actions:设计态与运行态能力

接口

interface IAction extends CommonDefNS.IMember {
    type: ActionType;
}

Action Type 总表

Action

关键接口 / 参数

设计态可用

运行态可用

说明

filter

—

y

y

为可视化组件添加数据过滤功能

sort

—

y

y

添加排序功能;代码需自行消费 dataView.sort

rank

—

y

y

添加排名功能

convertVisual

disableChangePivotSetting? disableChangeChartType?

y

y

设计时切换图表类型,运行时修改数据绑定

edit

—

y

n

为组件添加编辑能力

focus

—

y

y

添加聚焦功能

showData

disableCustomData? rule: IConversionRules

y

n

聚焦时显示数据透视表

export

disablePNG? disableExcel?

n

y

导出 PNG / 导出数据

annotation

—

y

n

添加批注功能

extension

见下文

y

y

将属性编辑器映射到操作栏

event

horizontal?

y

y

自定义操作按钮,通过 EventService 回调

shareScenario

—

y

n

以 iframe 或 DIV 方式分享组件

openFullDashboard

—

y

n

打开对应完整仪表板

clearSelection

—

n

y

清除当前场景选择

analysisPath

—

n

y

记录过滤、排序、排名等操作路径

saveAsTemplate

—

y

n

保存为模板

convertVisual 补充说明

interface IConvertVisualAction extends IAction {
    disableChangePivotSetting?: boolean;
    disableChangeChartType?: boolean;
}
  • disableChangePivotSetting:禁用运行时修改数据绑定结构。

  • disableChangeChartType:禁用设计时切换图表类型。

  • 原始文档强调:该 action 同时覆盖设计态图表转换与运行态绑定调整两类能力,因此在可转换图表插件中非常常见。

showData 接口与示例

补充说明:

  • disableCustomData: true 时,将不支持“自定义数据”能力。

  • rule 本质上是切换到数据透视表时所采用的 IConversionRules,因此它与第 4 章 conversionRules 的写法完全联动。

  • 该 action 只在设计态可用,不在运行态暴露。

interface IShowDataAction extends IAction {
    disableCustomData?: boolean;
    rule: DataBindingDefNS.IConversionRules;
}
{
  "type": "showData",
  "rule": {
    "out": [
      {
        "mode": "post",
        "execute": [
          {
            "source": "dimensions",
            "target": "columns",
            "cmd": "all"
          }
        ]
      }
    ]
  }
}

export 接口

interface IExportAction extends IAction {
    disablePNG?: boolean;
    disableExcel?: boolean;
}

extension 扩展操作

enum ExtensionType {
    Toggle = 'toggle',
    Enum = 'enum',
    ReferenceLine = '_referenceLine',
    TrendLine = '_trendLine',
    ImagePicker = '_imagePicker',
    ConditionalFormat = '_conditionalFormat',
}

interface IExtensionAction extends IAction {
    path: string;
    extensionType: ExtensionType;
    horizontal?: boolean;
}

interface IToggleExtension extends IExtensionAction {
    toggleState?: Array<CommonDefNS.ILocalizable & CommonDefNS.IIconable>;
}

interface IEnumExtension extends IExtensionAction {
    items: CommonDefNS.IEnumItem[];
}

interface IReferenceLineExtension extends IExtensionAction {
    axis?: CommonDefNS.IEnumItem[];
    _scope?: boolean;
    _constOnly?: boolean;
}

interface IConditionalFormatExtension extends IExtensionAction {
    roleNameList?: string[];
    dataRole?: string;
}

关键说明:

  • extension 会把某个 visual property 映射到操作栏,因此需要通过 path 指向属性名。

  • toggle 与 enum 是文档明确说明的常用映射类型,可把高频属性直接放到 action bar 中。

  • horizontal 用于控制扩展项在操作栏中的横向/纵向显示方式。

  • toggleState 用于分别定义 true / false 状态下的文本和图标表现。

  • items 用于为 enum 扩展提供枚举项。

示例:

{
  "type": "extension",
  "name": "showBorder",
  "displayName": "Show Border",
  "path": "showBorder",
  "extensionType": "toggle",
  "toggleState": [
    {
      "displayName": "show",
      "iconCss": "icon-expand"
    },
    {
      "displayName": "hide",
      "iconCss": "icon-expand"
    }
  ]
}

event 事件类操作

interface IEventAction extends IAction {
    horizontal?: boolean;
}

示例:

{
  "name": "log",
  "type": "event",
  "icon": "",
  "displayName": "Log Event Test"
}

补充说明:

  • 该类 action 对应“自定义操作按钮”,点击后会通过 eventService.registerOnCustomEventCallback(...) 回调给插件代码。

  • horizontal 用于控制按钮在操作栏中的排布方向。

其他内置 Action 的用途说明

  • shareScenario:在设计态提供“分享当前组件”的入口,可用于 iframe 或 DIV 方式嵌入场景。

  • openFullDashboard:与分享场景能力配套,允许用户从分享场景打开对应完整仪表板。

  • clearSelection:仅运行态可用,用于一键清除当前场景内的选择状态。

  • analysisPath:仅运行态可用,用于记录过滤、排序、排名等分析路径,便于用户在不同分析状态之间切换。

  • saveAsTemplate:仅设计态可用,用于把当前组件保存为模板。

操作栏界面说明

  • 原始截图逐项展示了 filter、sort、rank、convertVisual、edit、focus、showData、export、annotation 等按钮在设计态或运行态中的出现位置。

  • 原始资料特别提醒:启用 sort 后,插件实现必须自己根据 dataView.sort 完成排序,而不是宿主自动帮你排序。

4.10 analysis:钻取配置

drill

interface IDrillAction extends ActionDefNS.IAction {
    rule: IDrillRule;
}

interface IDrillRule {
    roles: string[];
    type?: DrillDownType;
}

enum DrillDownType {
    Default = 'all',
    List = 'list',
    Path = 'path',
}

说明

  • roles:定义钻取时使用哪些绑定数据进行替换。

  • type:钻取模式,可选。

    • all:默认模式,即全部维度

    • list:部分维度

    • path:固定路径

示例

{
  "type": "drill",
  "rule": {
    "roles": ["dimensions"]
  }
}

本章来源文件