# Online图表配置手册 [TOC] ## 一、配置单个数据源的图表 - 配置地址: `/online/graphreport` ### 具体步骤 1. 在页面中点击 `新增` 按钮 2. 在打开的弹窗中输入你的图表信息。其中,必填项有: - 图表名称 - 编码(编码是唯一的) - X轴字段(数据源中被当做 X 轴的字段) - Y轴字段(数据源中被当做 Y 轴的字段) - 查询SQL/数据JSON 3. 其中有几个动态的内容区域,分别是: - 当 `数据类型` 字段选为 `JSON` 后,`查询SQL` 字段会被替换成 `数据JSON` 字段,该字段会验证你的JSON字符串格式是否正确,反之则不变;当切换到`API`后,`查询SQL` 字段会被替换成 `API接口` 字段; 4. 配置列表字段 - 列表字段前两项是配置 数据表格 的 `列(columns)` - `字段名` 是必填的,对应 `column.dataIndex` - `字段文本` 是对字段名的描述,对应 `column.title`,不填则不显示 - `是否显示` 默认勾选,如果去掉勾选则不显示此列 - `计算总计` 默认不勾选,如果勾选上则会对当前列所有的数据进行求和,如果存在非数字的内容,则拒绝计算并提示"包含非数字内容" - `是否查询` 默认不勾选,如果勾选上则会在图表最上方显示一个表单,用于筛选表格的数据 - `字段类型` 默认为空,可选择查询条件表单的类型,可选值有:数值类型、日期类型、字符类型、长整型 - `查询模式` 默认为空,可选择查询条件的筛选方式,如果选择了范围查询,则会显示两个表单,一个是开始值,一个是结束值,共同完成筛选 5. 点击右下角的`确定`按钮完成添加操作 ### 使用方法 - 在 `操作` 列中,选中 `更多`,点击 `功能测试` 可以查看你配置的效果。 - 效果会根据不同的 `展示模板` 显示不同的布局 ### 配置示例:JSON数据格式 假如我有一段JSON,我要将它配置成和下图一样图表,那么需要怎么做呢? ![](https://img.kancloud.cn/e9/7a/e97ab91ca16bdb20b8a4b95880b44337_765x301.png) #### 第一步:准备好你需要的JSON ```json [ {"day": "星期一", "step": 1234, "assess": "良"}, {"day": "星期二", "step": 1884, "assess": "优"}, {"day": "星期三", "step": 1671, "assess": "良+"}, {"day": "星期四", "step": 2197, "assess": "优+"}, {"day": "星期五", "step": 1342, "assess": "中"}, {"day": "星期六", "step": 545, "assess": "差"}, {"day": "星期日", "step": 244, "assess": "极差"} ] ``` #### 第二步:填写JSON 点击“新增”按钮,填写一些基本信息,然后将 `数据类型` 改为 `JSON`,然后将JSON填入`数据JSON`字段中,如下图 ![](https://img.kancloud.cn/d3/a8/d3a88111fb45ea69ae2909fa4db718a4_1193x564.png) #### 第三步:配置数据字段 数据字段即`X轴字段`、`Y轴字段`和`Y轴文字`。 `X轴字段` 顾名思义,就是需要在X轴显示的字段,根据上图示例图表中我们可以发现,X轴方向显示的是星期一到星期日,而在准备的json中,`day`字段是存储星期信息的,所以我们要将 `X轴字段`处填写成`day`。 `Y轴字段` 也是如此,即对应需要在Y轴上显示的字段,这里我们填写上 `step` `Y轴文字` 是对Y轴数据的一个解释。这里我们填上`步数`,那么就会在鼠标悬浮在图表上时直观的显示出来,如下图所示。 ![](https://img.kancloud.cn/88/e7/88e71b064bfb42e57733b039eb769f28_248x406.png) ### 第四步:配置数据表格的列 在`列表字段`下面的表格中配置,配置示例如下 ![](https://img.kancloud.cn/be/6b/be6b0158f1ec1f10d3b4b9eb8543fff0_1170x340.png) 这里的配置是配置数据表格的列信息,只有配置上去的字段才会被显示出来。 数据表格可以计算列的总数,当`计算总计`被勾选上之后,会在数据表格最下面显示一行“总计”,当所有的`计算总计`都没被勾选的话,那么就不会显示这一行,如果要计算总计的列中某一行包含非数字的值,那么将会计算失败,并显示错误信息(包含非数字内容) ### 第五步:提交并测试功能 点击右下角的`确定`按钮并成功保存之后,我们可以在新增加的数据行右侧点击`更多 --> 功能测试` ![](https://img.kancloud.cn/be/45/be45311a905a4aa116e31c92b91924e3_156x166.png) 最终显示效果如下: ![](https://img.kancloud.cn/79/38/7938a28060d64610d78750ba1ecc321e_1315x416.png) 我们发现只有一个柱状图,而刚刚配置的数据表格并没有显示出来,这是因为`图表类型`只配置了一个柱状图。我们回到列表页面,点击编辑按钮,在`图表类型`处勾选`数据列表`,如下图所示 ![](https://img.kancloud.cn/08/dc/08dcf3f76a93a70b26a02c17ca323238_373x194.png) 点击`确定`保存,再点击功能测试,最终显示效果如下: ![](https://img.kancloud.cn/d6/b2/d6b2787c9e8e36003dff3cd0537b83e0_1341x907.png) 至此,配置JSON数据格式的图表就已经完成了 ### 配置SQL数据格式 配置SQL数据格式的图表与JSON的步骤类似,只是需要将`数据类型` 改为 `SQL`即可,在`查询SQL`处填写上你的SQL语句,填写好`X轴字段`、`Y轴字段`和`Y轴文字`点击`确定`保存即可 ### 配置API数据格式 配置API数据格式的图表与JSON的步骤类似,只是需要将`数据类型` 改为 `API`即可,在`API接口`处填写上你的api路径,填写好`X轴字段`、`Y轴字段`和`Y轴文字`点击`确定`保存即可。 api接口例子:http://api.jeecg.com/mock/83/graphreport/apitest 接口返回的数据结构: ~~~ {"data":[ {"sex":0,"cnt":10}, {"sex":1,"cnt":1}, {"sex":2,"cnt":4} ]} ~~~ *注:数据最外层用data包裹* ## 二、配置多数据源的图表 多数据源图表可以将你配置过的`单数据源图表`整合到一个页面中,并且可以进行分组、排序 - 配置地址: `/online/graphreport/templet`(暂定) ### 具体步骤 2. 点击页面中的 `新增` 按钮 3. 在打开的弹窗中输入你的图表信息。其中,必填项有: - 报表名称 - 报表编码(编码是唯一的) - 报表风格(Tab风格、单排布局、双排布局、组合布局) 4. 图表配置 - 图表 (必填项,选择的是你配置过的`单数据源图表`) - 图表类型(如果选择`不配置`,那么则应用选择的`单数据源图表`中配置的`图表类型`,如果配置了则优先显示此处配置的图表类型) - 组合编码(必填项,只能为数字,数字越小越往前排) 5. 点击右下角的`确定`按钮完成添加操作 ### 注意事项 1. 如果`报表风格`配置成了`组合布局`,那么就会将配置的图表显示在一张图表内,并且`图表类型`只能配置成`柱状图`或`曲线图`,即使配置成了其他的类型,实际运行中也一样不会生效 ### 使用方法 - 在 `操作` 列中,选中 `更多`,点击 `功能测试` 可以查看你配置的效果。 - 效果会根据不同的 `报表风格`和`组合展示风格` 显示不同的布局 ### 配置示例 #### 第一步:配置图表名称、编码、风格、多图表组合等 示例配置图如下 ![](https://img.kancloud.cn/06/7d/067dfb1a5ef6525be6c93dfc3645f541_1091x598.png) #### 第二步:查看效果 在新增加的数据行右侧点击`更多 --> 功能测试` ![](https://img.kancloud.cn/be/45/be45311a905a4aa116e31c92b91924e3_156x166.png) 最终显示效果如下: ![](https://img.kancloud.cn/a5/1c/a51c037a66142f007a144da8b894bb3b_1321x516.png) ![](https://img.kancloud.cn/e8/90/e890db0ebb69098efd80d7e6d7ffd460_1317x569.png) ![](https://img.kancloud.cn/1c/25/1c25362eca5e9ab248b92230cead2741_1319x519.png) ![](https://img.kancloud.cn/00/03/0003f6f1052915c33bb65eb7c1105da3_1322x513.png) ## 三、配置图表参数 ### 自定义参数 以SQL数据类型为例,在SQL后面拼接where条件即可。 注意`${}`内的文本就是参数名,要和配置的参数名保持一致,如果是文本类型,要记得加引号。 ![](https://img.kancloud.cn/23/15/2315d00f80fd76caf2a806fb226d06c2_413x227.png) ![](https://img.kancloud.cn/97/ae/97ae0d0edd471aa5faa0e6c045021fc0_933x230.png) ![](https://img.kancloud.cn/f2/24/f224a861b3fec027400387830c5885e6_525x194.png) 使用时可以直接在地址栏上将参数替换成实际的值,也可在配置菜单时直接设置 ![](https://img.kancloud.cn/e2/e8/e2e8a1c354b4bba60ce0e27ea778dc6b_667x921.png) ![](https://img.kancloud.cn/99/28/99289dc366f87a8beb7e9ff8fa820fa8_1225x985.png) 如果在使用时没有填写具体参数,那么就会应用默认值 ![](https://img.kancloud.cn/fe/46/fe4692b39968eb06096fecb658bc1e65_1274x985.png) ### 系统变量 注意系统变量是`#{}`,不要和自定义参数搞混了 ![](https://img.kancloud.cn/08/4b/084b84169c620c75960ddca7c03b539e_577x130.png) 可以使用的如下表所示: | 编码 | 描述 | | --- | --- | | sys\_user\_code | 当前登录用户登录账号 | | sys\_user\_name | 当前登录用户真实名称 | | sys\_date | 当前系统日期 | | sys\_time | 当前系统时间 | | sys\_org\_code | 当前登录用户部门编号 | | tenant_id | 当前登录用户租户ID 要求:3.4.5版本+ | | sys_base_path| 当前JAVA服务的basePath(v2.4.4+支持)(仅API模式支持) | ![](https://img.kancloud.cn/50/fc/50fc15d888d314dba2b3527857e2f0d5_387x81.png)