【仪表板-插件开发】插件开发中数据格式化实现

插件中，总有很多细节惊喜在等着大家去发现，有没有在开发中遇到需要将数据格式化的需求呢？

不同维度的数据格式化设置，能让我们整个插件的完整度更高。细节设置，能让整体效果更好。

接下来教大家实现此效果。

① 在 capabilities.json 文件中输入代码 ，以数值字段为例：

1. {
   
2.             "name": "numeric",
   
3.             "displayNameKey": "数值",
   
4.             "kind": "value",
   
5.             "options": [
   
6.               {
   
7.                 "displayNameKey": "数据格式",
   
8.                 "type": "format",
   
9.                 "name": "valueFormat"
   
10.               },
    
11.               {
    
12.                 "displayNameKey": "数据单位",
    
13.                 "type": "displayUnit",
    
14.                 "name": "valueDisplayUnit"
    
15.               }
    
16.             ]
    
17.           }

复制代码

② 在 visual.ts文件中定义

1. private host: any;

复制代码

② 在visual.ts文件中 constructor 方法下增加

1. this.host = host;

复制代码

③ 在visual.ts文件中 update 方法下增加，这里自己在代码中做好判断。

1. const plainDataView = options.dataViews[0] && options.dataViews[0].plain;

复制代码

④ 在visual.ts中增加方法

1. public formatData = (number,format,displayUnit) => {
   
2.        const formatService = this.host.formatService;
   
3.        let realDisplayUnit = displayUnit;
   
4.        if (formatService.isAutoDisplayUnit(realDisplayUnit)) {
   
5.              realDisplayUnit = formatService.getAutoDisplayUnit([number]);

复制代码

⑤ 引用格式化

1. const number=this.formatData(props['price'], th.format, th.displayUnit);

复制代码

至此，我们完成了数据格式化的整体显示。