【仪表板-插件开发】插件开发中数据格式化实现
本帖最后由 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]