11
最近更新时间： 2022-09-05 13:40:45
预览
ThingJS-X系统中大多数图表配置方式类似，包括如下几大部分：标题名称及是否显示标题设置、显示图例及坐标轴设置、图表样式设置、图表数据对接、传参设置等，图表的基本信息及样式可参考图表配置说明，以下主要介绍通用图表的数据对接方式。
# 接口数据流图
# 图表样式
以下使用一个图表进行举例
# 图表样例数据
主要查询图表要求的样例数据，方便后续封装httpserver时使用
数据类型：选择静态数据；
静态数据：静态数据中的样例即为httpserver端口需要返回的数据格式；
# 图表配置方法（httpclient端）
数据类型：选择API的方式进行数据对接，表示使用http请求外部接口返回的数据；
接口地址：调用外部httpserver端的URL地址；
接口标识：一个接口有多组图表数据时，区分该图表数据的标识；
以下图表为例，接口标识填写key1时，图表则显示key1对应内容显示在图表中；
接口参数：图表可以给httpserver提供参数，传入参数后，httpserver端可以获取到对应参数信息。利用图表参数传来的信息，可以通过一个DIX接口，根据不同的参数返回多个图表的数据；
以下图为例，图表动态获取buildName的值，并传入httpserver端；
三维场景下，能在控制台中看到当前获取的buildName的值；
更新频率：图表请求接口的频率，单位毫秒，例如1000表示每秒请求一次server端；
# 接口配置方法（httpserver端）
httpserver服务主要通过DIX或其他接口程序提供。本文档主要使用DIX工具创建一个httpserver端进行举例；
在6.1.3中了解到图表要求传入的数据格式如下
[
22,
34,
44
]
在DIX中创建httpserver端口
填写名称及必要的参数信息
接口示例
```
function run(args){
//客户端发送的请求参数为args,若需要有返回值在代码末尾添加return"字符类型数据"
logger.info("获取的参数为---》》" + args);
varlist = [
12,
32,
11,
14,
90
];
logger.info("====list=======" + JSON.stringify(list));
return list;
}
```
DIX接口中返回的日志，可以看到参数abc，为key,value形式，levelId为默认返回，表示ThingJS-X当前所属层级，图表在不同层级可以返回不同的levelId，DIX中可以判断此参数返回不同层级的统计数据，图表即可以在不同层级显示不同数据。
image.png
接口单独使用postman调用返回的参数，包含data层，实际ThingJS-X会直接获取data里的内容
返回示例
```language
```