自定义可视化插件实现原理

收藏

本帖最后由 JamesLv 于 2020-2-12 23:34 编辑

1. 功能概述
除了使用产品提供的可视化插件外，您还可以自定义插件绘制更多样化的图表，为仪表板提供无限可能。
本节为您介绍如何添加自定义可视化插件。
2. 添加和使用自定义可视化插件
第一步： 单击下载如下插件包。将其保存到本地计算机并解压。

Demo.zip (17.88 KB, 下载次数: 184)

2020-2-12 23:18 上传

点击文件名下载附件

解压后，在demo文件夹中有以下文件：
app.js：文件中包含新插件的主要逻辑，请根据实际需要进行修改，具体说明请见该文件中的代码注释。
index.html：一般情况下无需改动，仅在用户需要定制内嵌页面的外观时需修改。
index(with token).html：带有token认证信息的html文件，需要进行token认证时请使用此文件（有关token认证的更多说明，请见本页最下方的自定义插件Token认证说明）。
style.css：样式文件。
snapshot.jpg：插件的预览图，显示在插件选择的面板中，请根据实际需要替换。

第二步： 修改index.html文件。在index.html中引入需要的第三方库（例如d3）文件
示例：

<body>
<div id='root'></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="./../webContent.js"></script>
<script src="./app.js"></script>
</body>
</html>

复制代码

第三步： 修改app.js文件,该文件中包含插件的主要逻辑。
app.js文件中提供了一个WebContent全局对象，该对象提供了以下几个方法：
(1) WebContent.init(onUpdate: Function, onCleanSelection?: Function) —— 用于初始化webcontent
参数说明：
onUpdate ：当数据或自定义属性变化时触发。
onCleanSelection：当需要清理selection状态时触发，可选。

interface AggregationData {
data: any[], //数据聚合结果
dimensions: string[], //每个值表示使用的数据绑定中的维度列, 可以用来作为访问data中每条数据的key；
series: string[], //每个值表示使用的数据绑定中的系列, 可以用来作为访问data中每条数据的key。
values: string[], //每个值表示使用的数据绑定中的值列, 可以用来作为访问data中每条数据的key。
}
//例如
{
"data": [
{
"Department": "DTD1",
"Language": "Japanese ",
"Amount": 208869
},
{
"Department": "DTD1",
"Language": "Chinese ",
"Amount": 84582
},
{
"Department": "DTD2",
"Language": "Japanese ",
"Amount": 371790
},
{
"Department": "DTD3",
"Language": "Chinese ",
"Amount": 50816
}],
"values": ["Amount"],
"dimensions": ["Department"],
"series": ["Language"]
}

复制代码

WebContent.init(function onUpdate(aggregation: AggregationData, options: any) {
//options是用户自定义的属性对象
myChart.update(aggregation, options)
}, function onClearSelection() {
myChart.clearSelection()
});

复制代码

(2) WebContent.Models.CrossFilterSetting(columnNames: string[]) —— 用于创建CrossFilterSetting对象，与其他组件进行交叉过滤。
参数说明：
columnNames：表示对应filter column name的纵向关系的数组。

var filterSetting = new WebContent.Models.CrossFilterSetting(['Department', 'Language']);
var admFilter = filterSetting.filter('Department', 'Admin');
admFilter.filter('Language', 'Chinese'); //创建了Department = Admin 且 Language = Chinese 的admFilter，添加过滤字段的顺序需要与初始化时一致
var salesFilter = filterSetting.filter('Department', 'Sales');
salesFilter.filter('Language', 'English'); //创建了Department = Sales 且 Language = English的admFilter， admFilter 与 salesFilter是或的关系

复制代码

以上代码示例实现的过滤效果为“Department = Admin 且 Language = Chinese”或“Department = Sales 且 Language = English”。

(3) WebContent.doCrossFilter(filterSetting: CrossFilterSetting) —— 通用于知wyn dashboard 进行 crossfilter。
参数说明：
filterSetting：上一步中创建的CrossFilterSetting对象。

WebContent.doCrossFilter(filterSetting);

复制代码

(4) WebContent.syncOptions(options: any) —— 通过api修改自定义属性的接口。
参数说明：
options：自定义属性，设置的自定义属性将会显示在系统的属性设置中，如下图。

第四步： 更新snapshot.jpg图片文件（图片文件的名称依然使用“snapshot.jpg”）。该图片将显示在如下插件区域。

第五步： 将Demo文件夹放置到服务器的指定路径下：
如果安装Wyn Enterprise时，使用的是默认的安装路径，则将文件夹放到“C:\Program Files\Wyn Enterprise\Server\wwwroot\Web Contents”下；
如果是自定义安装，则将文件夹放置到“自定义安装路径\Wyn Enterprise\Server\wwwroot\Web Contents”下。

提示:
文件夹名（如Demo）即为新添加插件的名字，请按需修改且命名中不允许有空格。

第六步：刷新Wyn Enterprise系统，即可看到新加的自定义插件。

3. 自定义插件Token认证说明
如果实际应用中需要为自定义插件添加Token认证，请参照如下说明修改index.html文件。

引用项目	不带Token认证时的引用方法（示例）	带Token认证时的引用方法（示例）
添加对应的href资源	<a href="./index.html">This is a link without token</a>	<a data-wc-href="./index.html">This is a link with token</a>
引用图片	<img src="./assets/demo.png" alt="demo">	<img data-wc-src="./assets/demo.png" alt="demo">
引入对应的src资源（如插件中的“WynVideo”）	<video controls="controls" autoplay="autoplay" loop="loop" preload="auto" muted height="100%" width="100%" src="./assets/demo.mp4"></video>	<video controls="controls" autoplay="autoplay" loop="loop" preload="auto" muted height="100%" width="100%" data-wc-src="./assets/demo.mp4"></video>
引入JS	<script src="./assets/demo.js"></script>	<script data-url="./assets/demo.js" type="template/script"></script>
引入CSS	<link href="./assets/demo.css" ref="stylesheet"></script>	<script data-url="./assets/demo.css" type="template/stylesheet"></script>

		自动登录	找回密码
密码			立即注册

自定义可视化插件实现原理

0 个回复

活字格认证

活字格高级认证

Wyn高级认证

Wyn认证

微信认证勋章

讲师达人

元老葡萄

悬赏达人