@Martin.Zhang 发表于 2022-2-28 10:00:31

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

本帖最后由 James.Lv 于 2023-1-5 18:12 编辑

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


不同维度的数据格式化设置,能让我们整个插件的完整度更高。细节设置,能让整体效果更好。
接下来教大家实现此效果。
① 在 capabilities.json 文件中输入代码 ,以数值字段为例:{
            "name": "numeric",
            "displayNameKey": "数值",
            "kind": "value",
            "options": [
            {
                "displayNameKey": "数据格式",
                "type": "format",
                "name": "valueFormat"
            },
            {
                "displayNameKey": "数据单位",
                "type": "displayUnit",
                "name": "valueDisplayUnit"
            }
            ]
          }② 在 visual.ts文件中定义 private host: any;② 在visual.ts文件中 constructor 方法下增加this.host = host;③ 在visual.ts文件中 update 方法下增加,这里自己在代码中做好判断。const plainDataView = options.dataViews && options.dataViews.plain;④ 在visual.ts中增加方法public formatData = (number,format,displayUnit) => {
       const formatService = this.host.formatService;
       let realDisplayUnit = displayUnit;
       if (formatService.isAutoDisplayUnit(realDisplayUnit)) {
             realDisplayUnit = formatService.getAutoDisplayUnit();⑤ 引用格式化const number=this.formatData(props['price'], th.format, th.displayUnit);
至此,我们完成了数据格式化的整体显示。

页: [1]
查看完整版本: 【仪表板-插件开发】插件开发中数据格式化实现