各图表静态数据
预览
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
```
# 图表中接口标识如何使用
## 问题
图表中接口标识如何使用
## 操作步骤
1、推送多个图表数据，如图，推送两个图表数据，推送时需要给不同图表数据添加不同的标识
2、推送的图表数据格式要与静态数据中的格式保持一致(图表数据格式不同不影响数据的推送，只需要推送时按照规范加上唯一标识即可)
3、进入环境，填写对应的标识
4、效果，对应图表均走的接口数据
# 图表中接口参数如何使用？
## 问题
图表中接口参数如何使用
## 操作步骤
接口参数有两种方式：静态参数，动态参数
1、静态参数
比如，传递一个静态的常量数据 “name”:"重点人口"
效果：控制台 - 网络（Network） - 载荷(Preview)，可接收到传递的静态参数
2、动态参数
比如，传递一个动态数据 ，获取当前时间月份的某一天【#new Date().getDate()#】
效果：控制台 - 网络（Network） - 载荷(Preview)，可接收到传递的动态参数
注意：
1、动态参数和静态参数的区别在于是否有#
2、参数格式需满足JSON数据格式要求
JSON数据格式要求：
1、JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。
2、JSON的Key必须包裹在一个双引号中
3、JSON的值只能是以下几种数据格式
# 需要开发的几个图表
## 开发指南
https://wiki.uino.com/docs/thingjs-x40/62ce7fbbc82cb441c52538cc.html
```
function run(args){
//客户端发送的请求参数为args,若需要有返回值在代码末尾添加return"字符类型数据"
logger.info("获取的参数为---》》" + args);
varlist = [
12,
32,
11,
14,
90
];
logger.info("====list=======" + JSON.stringify(list));
return list;
}
```
## 折线图-重返地球
静态数据
```
{
"xData": [
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00"
],
"data": {
"本周": [
19,
81,
24,
26,
52,
47
],
"上月": [
19,
50,
30,
40,
70,
30
],
"周末": [
199,
50,
30,
40,
70,
30
]
}
}
```
## 双向柱状图-安德
静态数据：
```
{
"电费": [
10,
22,
30,
58
],
"水费": [
89,
20,
30,
59
]
}
```
## 横向柱状图-重返地球
静态数据：
```
[
50,
40,
30,
20,
10
]
```
## 横向多项柱状图-重返地球
静态数据：
```
{
"xData": [
"服务器",
"服务器",
"服务器",
"服务器"
],
"data": [
{
"key": "一年",
"value": [
240,
320,
240,
300
]
},
{
"key": "三年",
"value": [
100,
93,
80,
160
]
},
{
"key": "五年",
"value": [
240,
180,
123,
400
]
}
]
}
```
## 纵向柱状图-安德
静态数据：
```
{
"xData": [
"空调用量",
"生活用量",
"排风用量",
"办公用量",
"照明用量"
],
"chartdata": {
"水费": [
20,
40,
60,
100,
70
],
"电费": [
20,
40,
60,
100,
70
]
}
}
```
## 列表-密斯
```
[
[
"A1",
"积极",
0.9,
22
],
[
"A2",
75.64966,
0.9,
22
],
[
"A3",
75.64966,
0.9,
22
],
[
"A4",
75.64966,
0.9,
22
],
[
"A5",
75.64966,
0.9,
22
],
[
"A6",
75.64966,
0.9,
25
]
]
```