[]
        
(Showing Draft Content)

插件开发中功能合集示例

本文为大家介绍一下插件开发中的一些基础功能以及demo示例。

visual.json 文件介绍


name:插件名称

externalJs:需要引入的外部js,可以通过{{参数名}}获取配置中的参数

configuration:扩展参数

image2022-9-21_14-20-8.png


配置字段内容获取

image2022-9-21_14-20-46.png

3. webpack.config.js

设置外部引用包里面的js对象名称,可以在 visual.ts 文件中引用

image2022-9-21_14-21-47.png


外部扩展js插件引用方式:

image2022-9-21_14-22-49.png

package.json

Version:设置插件版本号

image2022-9-21_14-23-32.png

assets

可以在里面定义一些图片资源,使用时返回base64文件,用资源图片时,需要在visual.json 中定义名称映射

image2022-9-21_14-24-24.png


获取图片内容:

image2022-9-21_14-25-19.png

capabilities.json 属性设置,数据字段配置

1.dataBinding 数据绑定

(1)dataRoles

name: 属性名称

displayNameKey: 显示名称

kind:

grouping:用于度量字段的分类或分组。

value:数值数据。

groupingOrValue:可用作度量也可以用作分组。

options:format 格式化,displayUnit 数据单位,enum 自定义下拉框,(使用方式后面详细介绍)


image2022-9-21_15-12-22.png


(2)dataViewMappings,conditions

设置数据绑定的最大,最小数量。

conditions 组合条件,{},{}属于或者关系,下面示例中可以理解为:

① numeric 没有绑定字段,category 绑定数量无限制。

② numeric 若绑定数据,则category 最多只能绑定一个字段。

image2022-9-21_15-18-39.png


2.options>visual 组件属性设置 (使用方式后面详细介绍)



开启数据联动,只有开启数据联动后,才可以实现组件之间数据联动

设置后显示内容:

image2022-9-21_15-19-33.png


3.actions 设置组件按钮, 详细介绍请参考Actions

image2022-9-21_15-20-36.png

visual.ts 文件

1.IVisualUpdateOption 属性对象

image2022-9-21_15-21-30.png

isViewer:表示在预览仪表板时是否呈现该组件。

isMobile::表示是否在移动端显示该组件。

isEditing:表示组件的编辑状态。当触发了编辑操作时,值为true

isFocus: 表示组件的聚焦状态。当触发了聚焦操作时,值为true

dataViews: 在capabilities.json中定义的计算数据视图(dataViewMapping)。

properties: 在 capabilities.json 中定义的属性模型(options.visual)。

docTheme: 选择的文档主题。

language: 当前语言。

scale: 比例因子。

filters: 用来影响其他组件。


2.获取属性设置内容

image2022-9-21_15-22-30.png


3.组件排序,此代码完成排序功能

image2022-9-21_15-22-58.png


image2022-9-21_15-23-21.png

4.数据联动,点击实现仪表板数据互动

(1)设置字段

image2022-9-21_15-24-2.png

(2)获取联动item合集

image2022-9-21_15-24-31.png


此功能调试代码查看。

5.联动钻取,跳转

image2022-9-21_15-25-41.png


参考代码:bindEvents() 方法

image2022-9-21_15-26-17.png


6.数据格式化

参考方法:formatData

image2022-9-21_15-26-42.png


7.自定义设置

具体参考 number_formatting 方法

image2022-9-21_15-28-26.png


image2022-9-21_15-28-50.png


8.按钮显示隐藏

image2022-9-21_15-29-13.png


更多更详细内容,请参考demo示例。

柱状图.zip